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 are grouped together at the bottom, in addition to being mentioned
in the documentation for their respective class or component.
§ Colors
--bg
- Page background.
--fg
- The text color.
--link-fg
- The color used for hyperlinks. Defaults to
--accent
. --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.
--pressed-interactive-bg
- Background for interactive elements with
[aria-pressed=true]
. --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.
§ Component-specific variables
--flex-switch-threshold
- Sets the threshold at which
.flex-switch
switches from row to column. Default is15ch
. --col-width
- Sets the width of a column for
.textcolumns
. Default is30ch
. --grid-row-width
- Sets the width of a row in a
.grid
. Default is1fr
. --grid-col-width
- Sets the width of a column in a
.grid
. Default is1fr
. --sidenote-width
- Sets the width of a
<small role="note">
sidenote. Default is20ch
.