Skip to main content
Sedeya

Dark mode, everywhere

Theme tokens, a system-aware toggle, and contrast-checked surfaces.

2.0.0

Every surface in the template now ships a light and a dark value, and the toggle remembers what you picked.

Added

  • A theme toggle in the header and in the mobile drawer, both driven by the same data-theme attribute on the document root.
  • prefers-color-scheme is read once on first visit, then the stored choice wins.
  • Dual-theme code blocks — Shiki emits both palettes and CSS swaps them, so there is no flash and no second highlighter pass.

Changed

  • Every raw colour literal is gone from src/. Components reference semantic tokens (bg-background, text-muted-foreground, border-border) and the theme files own the actual values.
// The toggle writes one attribute; the CSS does the rest.
document.documentElement.dataset.theme = next;
localStorage.setItem("theme", next);

Fixed

  • Focus rings stayed invisible on dark surfaces where an element had a bare outline-none next to its focus-visible:outline-* rule.