Theming

Themes are plain TypeScript objects. Strata validates them at build time, generates CSS variables and gives you typed access to every token in your code.

Updated Sep 27, 2026 5 min readThemingTokens

Defining a theme

src/styles/tokens.ts

import { defineTheme } from "@strata/core";

export const aurora = defineTheme({
  colors: {
    brand: { light: "oklch(0.52 0.22 278)", dark: "oklch(0.7 0.17 282)" },
    surface: { light: "#ffffff", dark: "#0c0b14" },
  },
  radius: { sm: "4px", md: "8px", lg: "14px" },
  font: { sans: "Inter, system-ui", mono: "JetBrains Mono, monospace" },
});

Token scales

Scale	Steps	Utility
spacing	0 – 96 (0.25rem base)	p-4, gap-6, mt-12
radius	none, sm, md, lg, xl, full	radius-lg
elevation	0 – 5	elevation-2
text	xs – 6xl (fluid)	text-lg

Typed access in TypeScript

chart.ts

import { token } from "@strata/core";

// Autocompletes and errors on unknown paths
const series = token("colors.brand"); // "var(--st-brand)"

Multiple themes

Register more than one theme and switch with data-theme. Unchanged tokens are inherited from the first theme, so a variant only lists what differs.

Was this page helpful?

Last edited Sep 27, 2026 · docs/theming.mdx