Semantic tokens, not hexSemantic tokens, not hex

Edit a token, see who follows

Pick a token, then drag its sliders.

Both panes match.

/* globals.css */
@theme inline {
  --color-background: oklch(0.145 0 0);
  --color-card: oklch(0.205 0 0);
  --color-primary: oklch(0.488 0.243 264.376);
  --color-ring: oklch(0.488 0.243 264.376);
  --color-border: oklch(0.269 0 0);
  --color-input: oklch(0.269 0 0);
}

<Card className="bg-card text-card-foreground border-border">
  <Button className="bg-primary text-primary-foreground" />
</Card>

Swap the base palette

Pick a base color and a mode.

neutral, dark

/* components.json: "baseColor": "neutral" */
.dark {
  --background: oklch(0.145 0 0);
  --card: oklch(0.205 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --border: oklch(0.269 0 0);
}
@theme inline {
  --color-background: var(--background);
  --color-card: var(--card);
  --color-muted-foreground: var(--muted-foreground);
  --color-border: var(--border);
}

Find the drift

Hover or tap a part, then switch to light.

Dark mode hides the drift.

<Card className="bg-card border-border">
  <CardTitle className="text-card-foreground">Workspace</CardTitle>
  <CardDescription className="text-muted-foreground">
    Shown on invoices and emails.
  </CardDescription>
  <Label className="text-foreground">Name</Label>
  <Input className="border-input focus-visible:ring-ring" />
  <Button>Save</Button>           {/* bg-primary text-primary-foreground */}
  <Button variant="secondary">Cancel</Button>
</Card>

Why it matters, pros and cons