Theme CSS Variables

The theme CSS variables are defined in the theme.css file. Example:

:root.dark {
  /* neutral */
  --transparent: oklch(0 0 0 / 0%);
  --black: oklch(0.25 0.01 196);
  --white: oklch(1 0 196);
  --gray: oklch(0.5 0.01 196);

  /* background */
  --background: oklch(0.2 0.01 196);
  --background-plus: oklch(0.3 0.01 196);
  --background-dimmed: oklch(0.4 0.01 196);
  --background-disabled: oklch(0.45 0.01 196);

  /* content */
  --disabled: oklch(0.5 0.02 196);
  --dimmed: oklch(0.6 0.02 196);
  --foreground: oklch(1 0 196);

  /* surface */
  --border: oklch(0.4 0.01 196);
  --panel-down: oklch(0.32 0.01 196);
  --panel: oklch(0.35 0.01 196);
  --panel-up: oklch(0.38 0.01 196);
  --panel-plus: oklch(0.4 0.01 196);

  /* semantic */
  --accent: oklch(0.95 0.21 113);
  --accent-up: oklch(1 0 196);
  --accent-fg: oklch(0.3 0.21 113);

  --stop: oklch(0.85 0.2 30);
  --stop-up: oklch(0.9 0.2 30);
  --stop-fg: oklch(0.35 0.1 30);

  --go: oklch(0.85 0.17 130);
  --go-up: oklch(0.9 0.17 130);
  --go-fg: oklch(0.2 0.1 130); 

  /* badge */
  --badge-url: url("/badge-dark.png");  
}

:root.light {
  /* neutral */
  --black: oklch(0.25 0.01 265);
  --white: oklch(1 0 265);
  --gray: oklch(0.5 0.01 265);

  /* background */
  --background: oklch(0.96 0.01 265);
  --background-plus: oklch(0.98 0 265);
  --background-dimmed: oklch(0.85 0.037 265);
  --background-disabled: oklch(0.8 0.05 265);

  /* content */
  --disabled: oklch(0.8 0.033 265);
  --dimmed: oklch(0.7 0.052 265);
  --foreground: oklch(0.4 0.05 265);

  /* surface */
  --border: oklch(0.9 0.01 265);
  --panel-down: oklch(0.95 0.01 265);
  --panel: oklch(1 0 265);
  --panel-up: oklch(0.97 0.01 265);
  --panel-plus: oklch(0.93 0.012 265);

  /* semantic */
  --accent: oklch(0.66 0.18 265);
  --accent-up: oklch(0.4 0.06 265);
  --accent-fg: oklch(1 0 265);

  --stop: oklch(0.7 0.12 11);
  --stop-up: oklch(0.73 0.15 11);
  --stop-fg: oklch(1 0 265);

  --go: oklch(0.75 0.1 120);
  --go-up: oklch(0.78 0.13 120);
  --go-fg: oklch(1 0 265);

  /* badge */
  --badge-url: url("/badge-light.png");
}

Available CSS Variables

Neutral Colors

Background Colors

Surface Colors

Content Colors

Semantic Colors

Badge

The --badge-url variable adds a central image to the visualizations. Place the image file in the Public folder and use the format --badge-url: url("/file-name.extension");

Recommendations

General

• All color values should be in oklch format.
• All Neutral, Background, Surface, and Content colors must share the palettes's base HUE value.

Neutral

• Neutral colors should match their naming, regardless of whether they appear in light or dark mode, and should always follow the neutral HUE value.
• Black should have a LIGHTNESS of 0.25.
• Gray should have a LIGHTNESS of 0.5.
• White should have a LIGHTNESS of 1.
• Transparent should have an ALPHA value of 0.

Background

• Background colors should be very similar to each other, with LIGHTNESS variations between 0.05 and 0.1.

Content

• Foreground should have good contrast on both Background and Surface colors.
• Foreground and Dimmed must have a LIGHTNESS contrast between 0.3 and 0.4.
• Foreground and Disabled must have a LIGHTNESS contrast higher than Dimmed, between 0.4 and 0.5.
• Content colors must provide sufficient contrast for readability with Panel colors.

Surface

• Surface colors should be very similar to each other, with LIGHTNESS variations between 0.02 and 0.03.
• Border LIGHTNESS should be similar to Panel LIGHTNESS, with variations between 0.05 and 0.1.

Semantic

• Semantic colors should have good contrast on both Background and Surface colors.
• Accent may preferentially use the palette's base HUE value, with higher CHROMA for visual hierarchy; other HUEs are acceptable as long as they remain harmonious with the base HUE. Adjust LIGHTNESS so contrast remains sufficient for legibility on Surface and Background, comparable to Foreground.

Dark Mode

Dark mode allows a wider range of Surface colors, but creators should use low CHROMA values for readability and comfort.

Background

• Background colors LIGHTNESS order is:
  1. Background (darker)
  2. Background-plus
  3. Background-dimmed and
  4. Background-disabled (lighter)
• Background and Background-plus should have LIGHTNESS values lower than Panel.
• The difference in LIGHTNESS between each Background colors step should be between 0.05 and 0.15.
• Background colors should share the same CHROMA value within the range 0.01–0.02.

Content

• Foreground should always be 100% white.

Surface

• Surface colors LIGHTNESS order is:
  1. Panel-down (darker)
  2. Panel
  3. Panel-up
  4. Panel-plus (lighter)
• Border should have a LIGHTNESS value equal to or higher than Panel-plus.
• Surface colors should share the same CHROMA value, within the range 0.01 and 0.02.

Light Mode

Light mode is much more restrictive. For legibility and comfort, Panel must always be white, which limits the LIGHTNESS range for Surface and Background colors.

Background

• Background and Background-plus should have LIGHTNESS values close to each other and not too far from Panel.
• Background-dimmed and Background-disabled are auxiliary content colors on Background and Background-plus, so ensure at least 0.1 LIGHTNESS distance from them.
• Background and Background-plus should use low CHROMA (e.g. 0 – 0.01). Background-dimmed and Background-disabled may use slightly higher CHROMA for hierarchy (stay between 0.01 and 0.03).

Content

• Foreground should never be 100% black. Use LIGHTNESS values between 0.2 and 0.4.
• Foreground should have a CHROMA value within the range 0.01 and 0.02.

Surface

• Panel should always be 100% white.
• Border should have a LIGHTNESS value of 0.9.
• Panel-up LIGHTNESS should be 0.97.
• Panel-down LIGHTNESS should be 0.95.
• Panel-plus LIGHTNESS should be 0.93.
• Surface colors should share the same CHROMA value, within the range 0 and 0.01. Low values like 0.001 are acceptable.