CSS Variables

We use several CSS variables that you can override to customize your site. You can create multiple classes that set these variables and switch between them to create multiple themes, or use the prefers-color-scheme @media query to create a dark theme.

This is a reference of all the variables you can set on the root <html> element. There are a few more that are used with specific components or utility classes; these will be listed in the documentation for that class.

§ Colors

--bg: Page background.
--fg: The text color.
--muted-fg: Text color for disabled or de-emphasized elements. It's important that this color is readable against all of the background colors.
--faded-fg: Text for disabled interactive components.
--graphical-fg: Graphical elements like borders. Not text.
--box-bg: Background for blocks: cards, admonitions etc.
--interactive-bg: Background for interactive elements
--accent: Accent color. It's important that this color is readable against all of the background colors.
--muted-accent: Less vivid version of accent color. Will not be used for text.

§ Colorways

--plain-fg: Foreground color for the .plain colorway.
--info-fg: Foreground color for the .info colorway.
--ok-fg: Foreground color for the .ok colorway.
--bad-fg: Foreground color for the .bad colorway.
--warn-fg: Foreground color for the .warn colorway.
--plain-graphical-fg: Graphical elements (i.e. borders) color for the .plain colorway.
--info-graphical-fg: Graphical elements (i.e. borders) color for the .info colorway.
--ok-graphical-fg: Graphical elements (i.e. borders) color for the .ok colorway.
--bad-graphical-fg: Graphical elements (i.e. borders) color for the .bad colorway.
--warn-graphical-fg: Graphical elements (i.e. borders) color for the .warn colorway.
--plain-bg: Background color for the .plain colorway.
--info-bg: Background color for the .info colorway.
--ok-bg: Background color for the .ok colorway.
--bad-bg: Background color for the .bad colorway.
--warn-bg: Background color for the .warn colorway.

§ Lengths

--rhythm: Vertical rhythm, line height.
--line-length: Maximum line length for prose.
--border-radius: Border radius. Set to 0 for sharp corners.

§ Fonts

--main-font

The main font family for text.

--secondary-font

A secondary text font. It's a good idea to specify a sans-serif font as it will be used for buttons and captions.

--display-font

A display font used for headings.

--mono-font

Monospace font for code, preformatted text, computer input and output.

Tip Browsers shrink monospace fonts. You can suppress this behavior by specifying monospace twice:

--mono-font: "Cascadia Code", monospace, monospace

§ Density

--density: The amount of space between elements (i.e. gaps between paragraphs, padding of boxes), as a multiplier of the line height (--rhythm). See Utilities / Density.