Skip to content
Ariia

Appearance

Palette

How the Theme System Works

Palette × mode, flash-free initialization, and adding a new palette. This post exists only in Chinese and English, to demonstrate the switcher's behavior for missing translations.

1 min read

Also available in: 简体中文

The theme has two independent dimensions, both set as data-* attributes on <html>:

  • data-mode: light / dark
  • data-theme: palette name

Flash-free initialization

A small blocking inline script in <head> reads preferences from localStorage before the first paint, so reloading never flashes the wrong theme.

Adding a palette

  1. Add a block to src/styles/themes.css:
[data-theme='mint'] {
  --hue: 170;
  --accent-c: 0.12;
  --neutral-c: 0.01;
}
  1. Register { id: 'mint', swatch: 'oklch(0.6 0.12 170)' } in src/config/themes.ts.
  2. Add a theme.palette.mint label to each UI dictionary.

All semantic colors are derived from the hue via oklch formulas, for both light and dark modes.