Select dark mode, don't flip

Chart color tokens pick validated dark steps; never invert them.

From dataviz (references/palette.md, references/color-formula.md).

Flip or select

Switch theme and flip method; the checks re-run.

Flip method

Auto-invertedBad

Slot	Hex	L	vs surface	Δh°

filter: invert(1) hue-rotate(180deg)

Selected dark stepsGood

Slot	Hex	L	vs surface	Δh°

--series-7: #9085e9

.viz-root {
  color-scheme: light;
  --surface-1: #fcfcfb;
  --series-1: #2a78d6;  --series-2: #eb6834;  --series-3: #1baf7a;  --series-4: #eda100;
  --series-5: #e87ba4;  --series-6: #008300;  --series-7: #4a3aa7;  --series-8: #e34948;
}
:root[data-theme="dark"] .viz-root {
  color-scheme: dark;
  --surface-1: #1a1a19;
  --series-1: #3987e5;  --series-2: #d95926;  --series-3: #199e70;  --series-4: #c98500;
  --series-5: #d55181;  --series-6: #008300;  --series-7: #9085e9;  --series-8: #e66767;
}

Two switches, one winner

Set OS and toggle; the toggle must win.

Unguarded media queryBad

Guarded scopesGood

OS	data-theme	Expected	Unguarded	Guarded

@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) .viz-root {
    color-scheme: dark;  --series-1: #3987e5;  …
  }
}
:root[data-theme="dark"] .viz-root {
  color-scheme: dark;  --series-1: #3987e5;  …
}

Same eight hues, re-stepped

Hover or click a slot to isolate it.

Light#fcfcfb

Dark#1a1a19

node scripts/validate_palette.js \
  "#3987e5,#d95926,#199e70,#c98500,#d55181,#008300,#9085e9,#e66767" \
  --mode dark --surface "#1a1a19"

Why it matters

An inverted palette is a new, unvalidated palette. Selecting steps from the same ramps keeps each hue and lets each mode pass as a set.

Pros

Violet stays violet in both modes.
Light and dark swap in one place.
OS preference and toggle both honored.

Cons

Two columns to maintain and re-validate.
The dark block is written twice.
Canvas and exports must read resolved tokens.