Dark Mode

First-class dark theme via CSS tokens. Toggle instantly, see side-by-side comparisons, learn the mapping.

Preview

Dark mode card preview

CARD

Content

Online Error

Surfaces

--bg #f3f4f6

--white #ffffff

sidebar #ffffff

Surfaces

--bg #020617

--white #1e293b

sidebar #0a1120

Token Mapping

Token	Light	Dark	Notes
`--bg`	#f3f4f6	#020617	Page background
`--white`	#ffffff	#1e293b	Cards, surfaces
`--gray-900`	#1b1b1f	#ffffff	Primary text (inverted)
`--gray-500`	#616568	#94a3b8	Muted text
`--border`	--gray-200	#3b4f6a	All borders
`--accent`	#744F28	#C4956A	Primary action color
`--accent-container`	#F0E6DA	#1e40af	Active sidebar bg
`--green`	#006d3b	#6ee7b7	Success states
`--red`	#ba1a1a	#fca5a5	Error states
`--shadow`	0.06/0.1 opacity	0.5 opacity	Deeper in dark

Flash Prevention (FOUC)

warning To prevent white flash on dark mode, apply overrides on html.dark before body loads.

<!-- In <head> before stylesheets -->
<script>
  if (localStorage.getItem("ds-theme") === "dark" ||
      (!localStorage.getItem("ds-theme") &&
       matchMedia("(prefers-color-scheme:dark)").matches)) {
    document.body.classList.add("dark");
  }
</script>