Search code examples
cssrthemestidyversepkgdown

How to have pkgdown code chunks with a dark background?

I am trying to have code chunks displayed with a dark background in my website generated by pkgdown.

I've been looking for a way to change syntax highlighting in code chunks, but found only little information so far, and nothing that allowed me to tweak or simply change the highlighting theme.

I've tried adding highlight: zenburn either in the vignette's YAML or in the _pkgdown.yml but it didn't change anything.

However, I found this code to be put into an extra.css file in the pkgdown folder to modify certain aspects:

.fl      {color: #1514b5;}
.fu      {color: #FF9800;}  /* function */
.ch,.st  {color: #CDDC39;}  /* string */
.kw      {color: #FFC107;}  /* keyword */
.co      {color: #9E9E9E;}  /* comment */

.message { color: #EEEEEE;   font-weight: bolder;}
.error   { color: #f44336;  font-weight: bolder;}
.warning { color: #9C27B0; font-weight: bolder;}

This works (i.e., it does have an effect on the syntax highlighting), but I cannot find the command to modify the background colour (and switch to a dark background). Is there a way of simply changing the theme (for instance, to zenburn, which has a dark background)? If not, what would be the right CSS to do so?

This is the pkgdown website I am trying to modify, and this is my goal:

enter image description here

Solution

  • I'm not familiar with the package that you're using, but you should be able to do something like body { background-color: white; } to change the background color of the entire page.

    To change the background color specifically for the code sections, you simply need to change body above to the relevant selector, so pre, code { background-color: white; }.