Theming

The jhDocs Hugo theme provides a full color palette for all elements of your Hugo documentation site, for both light mode and dark mode.

Accessing theme colors in your CSS

All themed colors are baked into the CSS used by the jhDocs theme, but you can access them for use in your CSS too. You can use CSS variables to reference the colors in the jhDocs palette within your own CSS. These CSS variables mostly specify color values, but they also include settings for font, border radius, box shadows, etc.

For example, the themed value for the content background color can be found in the --jhdocs-content-bg CSS variable.

To reference that color value, use this notation in your CSS:

var(--jhdocs-content-bg)

The binding of the values from the CSS variables happens at runtime. This allows you to reference all themed colors as standalone values that you can then assign to any property in any element in your own CSS.

List of CSS variables in this theme

Below is a list of all color CSS variables available for you to use in this theme.

If you switch this site between light mode and dark mode, you’ll see the color values below change to fit the selected mode.