Fix dark mode code block

How to get code to render in dark mode using docsy theme.

less than a minute

If you’re using Docsy as your Hugo theme, your code blocks might not render correctly in dark mode.

To fix this quickly, create a CSS rule that sets the background-color for <pre> elements that are children of the .highlight class.

Here’s one way to do this:

Declare the following rule:

/* Fix dark mode code rendering */
.highlight pre {
  background-color: var(--td-pre-bg) !important;
}

Here, --td-pre-bg evaluates to the background color value defined by your theme.

Your code blocks should now be more readable in dark mode.

To learn more about _styles_project.scss, see Project style files (Docsy)

Vital statistics