Themes

Themes affect the visual appearance of pages by specifying colors and fonts, or by augmenting default styles. Framework includes several built-in themes, but you can also design your own themes by specifying a custom stylesheet.

The theme is typically set via the theme config option, such as:

theme: "cotton"

You can also apply a theme to an individual page via the front matter:

---
theme: [glacier, slate]
---

Here is an overview of the available themes.

Light mode

The built-in light-mode color themes are:

• air (default)
• cotton
• glacier
• parchment

Dark mode

The built-in dark-mode color themes are:

• coffee
• deep-space
• ink
• midnight
• near-midnight (default)
• ocean-floor
• slate
• stark
• sun-faded

Auto mode

When both a light and a dark mode theme are specified, theme styles are applied selectively based on the user’s preferred color scheme. This is implemented via prefers-color-scheme and typically relies on the user’s operating system settings.

Modifiers

Theme modifiers are intended to compose with the above color themes. They are:

• alt - swap the page and card background colors
• wide - make the main column full-width

The alt theme swaps the page and card background colors. This brings cards to the foreground and is recommended for dashboards.

The wide theme removes the maximum width constraint of the main column, which is normally 1152 pixels, allowing it to span the full width of the page. This is recommended for dashboards and is typically combined with the alt theme modifier and toc: false to disable the table of contents.

The dashboard theme alias composes the default light and dark themes (air and near-midnight) with the alt and wide modifiers. On its own, dashboard is equivalent to [light, dark, alt, wide].

Aliases

In addition to themes and theme modifiers, there are special aliases:

• default - either light or dark depending on user preference
• dashboard - [light, dark] if needed, plus alt and wide
• light - an alias for air
• dark - an alias for near-midnight

On its own, default is equivalent to [light, dark] (or [air, near-midnight]). The default theme is applied by default if you don’t specify any color theme. You can also use default to combine a specific light or dark theme with the default theme of the opposing mode; for example [cotton, default] is equivalent to [cotton, dark], and [coffee, default] is equivalent to [coffee, light].

Colors

The following custom properties are defined by the current theme:

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>