CSS: Color

The following custom properties are defined by the current theme:

Name	Color	Description
`--theme-foreground`		page foreground color
`--theme-background`		page background color
`--theme-background-alt`		block background color
`--theme-foreground-alt`		heading foreground color
`--theme-foreground-muted`		secondary text foreground color
`--theme-foreground-faint`		faint border color
`--theme-foreground-fainter`		fainter border color
`--theme-foreground-faintest`		faintest border color
`--theme-foreground-focus`		emphasis foreground color

You can use these properties anywhere you like. For example, to style a line chart to match the focus color:

Plot.lineY(aapl, {x: "Date", y: "Close", stroke: "var(--theme-foreground-focus)"}).plot()

A handful of color classes are also provided:

<div class="red">I am red text.</div>

<div class="yellow">I am yellow text.</div>

<div class="green">I am green text.</div>

<div class="blue">I am blue text.</div>

<div class="muted">I am muted text.</div>