www/docs/variables.md


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107


# 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

<dfn>--fg</dfn> {#var-fg}
:   The text color.

<dfn>--muted-fg</dfn> {#var-muted-fg}
:   Text color for disabled or de-emphasized elements. It's important that this
    color is readable against all of the background colors.

<dfn>--faded-fg</dfn> {#var-faded-fg}
:   De-emphasized or disabled graphical elements. Will not be used as a text color.

<dfn>--info-fg:</dfn> {#var-info-fg}
:   —

<dfn>--ok-fg</dfn> {#var-ok-fg}
:   —

<dfn>--bad-fg</dfn> {#var-bad-fg}
:   —

<dfn>--warn-fg</dfn> {#var-warn-fg}
:   —

<dfn>--bg</dfn> {#var-bg}
:   Page background.

<dfn>--bg-2</dfn> {#var-bg-2}
:   Background for blocks: cards, admonitions etc.

<dfn>--bg-3</dfn> {#var-bg-3}
:   Background for interactive elements


<dfn>--bg-4</dfn> {#var-bg-4}
:   Background for pressed interactive elements

<dfn>--info-bg</dfn> {#var-info-bg}
:   —

<dfn>--ok-bg</dfn> {#var-ok-bg}
:   —

<dfn>--bad-bg</dfn> {#var-bad-bg}
:   —

<dfn>--warn-bg</dfn> {#var-warn-bg}
:   —

<dfn>--shadow</dfn> {#var-shadow}
:   Box shadows.

<dfn>--accent</dfn> {#var-accent}
:   Accent color. It's important that this
    color is readable against all of the background colors.

<dfn>--muted-accent</dfn> {#var-muted-accent}
:   Less vivid version of accent color. Will not be used for text.


## Lengths

<dfn>--rhythm</dfn> {#var-rhythm}
:   Vertical rhythm, line height.

<dfn>--line-length</dfn> {#var-line-length}
:   Maximum line length for prose.

## Fonts

<dfn>--main-font</dfn> {#var-main-font}
:   The main font family for text.

<dfn>--display-font</dfn> {#var-display-font}
:   A secondary text font. It's a good idea to specify a sans-serif font as it
    will be used for buttons.

<dfn>--mono-font</dfn> {#var-mono-font}
:   Monospace font for code, preformatted text, computer input and output.

    ::: box {.info}
    **Tip**: Browsers shrink monospace fonts. You can suppress this behavior by
    specifying `monospace` _twice_:

      ~~~ css
      {
        --mono-font: "Cascadia Code", monospace, monospace
      }
      ~~~
    :::

## Density

<dfn>--density</dfn> {#var-density}
:   —