Themes

Theme behavior

Without a data-theme attribute, the :root light palette applies. The dark palette applies only to data-theme="dark". Automatic mode starts from the light palette and switches to dark inside prefers-color-scheme: dark.

Each mode also sets the browser-facing color-scheme property, so compatible native controls use the corresponding light or dark appearance.

Theme selection changes the mode, not the palette design. Use the palette playground for generated colors or the Colors guide for direct overrides and contrast checks. The CSS variables reference lists the parameters and exact color formulas.

The Monokai example demonstrates full color overrides with a dark palette and a light companion.

Use the light theme

Omit the attribute or select light explicitly. An explicit value is useful when an application stores a preference.

<html lang="en" data-theme="light">

Use the dark theme

Set the attribute on the document root. tty.css theme selectors do not theme an individual descendant subtree.

<html lang="en" data-theme="dark">

Follow the system

Automatic mode follows prefers-color-scheme. It needs no JavaScript and updates when the system preference changes.

<html lang="en" data-theme="auto">

Control themes with JavaScript

Change document.documentElement.dataset.theme to apply a user choice. Persist a value only after an explicit choice; otherwise, leave auto in control. This complete example cycles through the three supported values, stores the selection, and keeps the button label accessible.

<button type="button" id="theme-toggle">Theme: light</button>
<script>
  const root = document.documentElement;
  const button = document.querySelector("#theme-toggle");
  const themes = ["light", "dark", "auto"];
  const storedTheme = localStorage.getItem("theme");

  if (storedTheme && themes.includes(storedTheme)) {
    root.dataset.theme = storedTheme;
  }

  function updateThemeButton() {
    const theme = root.dataset.theme || "light";
    button.textContent = `Theme: ${theme}`;
    button.setAttribute("aria-label", `Current theme: ${theme}. Change theme`);
  }

  button.addEventListener("click", () => {
    const current = root.dataset.theme || "light";
    const next = themes[(themes.indexOf(current) + 1) % themes.length];
    root.dataset.theme = next;
    localStorage.setItem("theme", next);
    updateThemeButton();
  });

  updateThemeButton();
</script>

The theme switcher in these documentation pages is progressive enhancement. The palettes themselves remain CSS-only.