Dark mode

Strata's semantic tokens flip automatically between colour schemes, so most components need zero `dark:` classes. Reach for the variant only for one-off adjustments.

Updated Sep 21, 2026 4 min readTheming

Choosing a strategy

colorScheme	Switches when	Best for
"system"	OS preference changes	Docs, marketing sites
"class"	.dark is on <html>	Apps with a theme toggle
"attribute"	data-theme="dark"	Multiple named themes

strata.config.ts

export default defineConfig({
  colorScheme: "class",
});

Building a toggle

The React bindings include useColorScheme(), which persists the choice and avoids a flash of the wrong theme on first paint.

theme-toggle.tsx

import { useColorScheme } from "@strata/react";

export function ThemeToggle() {
  const { scheme, setScheme } = useColorScheme();
  return (
    <button
      className="btn btn-ghost"
      aria-pressed={scheme === "dark"}
      onClick={() => setScheme(scheme === "dark" ? "light" : "dark")}
    >
      Toggle theme
    </button>
  );
}

Semantic tokens

Token	Light	Dark
--st-surface	#ffffff	#0c0b14
--st-surface-raised	#f7f7fb	#15131f
--st-text	#16141f	#ecebf5
--st-text-muted	#5e5a72	#9a96ad
--st-brand	#5b4bf0	#8f84ff

Was this page helpful?

Last edited Sep 21, 2026 · docs/dark-mode.mdx