2026/08/04

Vanilla Extract でテーマを組む

白基調に黒を差す配色を、ゼロランタイムの CSS-in-TypeScript でトークン化する。

色だけがテーマで切り替わるので、色は createGlobalThemeContract でコントラクト化し、寸法や書体は :root に一度だけ定義しています。

export const color = createGlobalThemeContract(
  { bg: null, fg: null, muted: null, border: null },
  (_value, path) => `hase-color-${path.join('-')}`,
);

createGlobalTheme(':root', color, { bg: '#ffffff', fg: '#0a0a0a', /* ... */ });
createGlobalTheme('[data-theme="dark"]', color, { bg: '#0a0a0a', fg: '#f5f5f5', /* ... */ });

切り替えは React の島がひとつだけ担当します。初期値は <head> のインラインスクリプトが先に当てるので、白から黒へのちらつきは起きません。

影は使わず、境界は 1px のボーダーだけ。余白でリズムを作る。

なおこのノートのタグには ASTRO と大文字で書いていますが、他のノートの Astro / astro と同じタグページにまとまります。