Theming

One file drives everything. Mizu's look lives in CSS custom properties, mapped to Tailwind v4 utilities. Recolor the system by changing a handful of tokens.

The token block

Add this to src/app.css after @import 'tailwindcss';. Semantic tokens (--background, --primary, …) are mapped with @theme inline so utilities like bg-primary react to light and dark automatically.

:root {
	--background: #e9f2f8;
	--foreground: #14303f;
	--card: #ffffff;
	--muted: #d8e7f1;
	--muted-foreground: #587688;
	--primary: #01b2ff;          /* aqua hero */
	--primary-foreground: #ffffff;
	--border: #c3d9e7;
	--ring: #38bdf8;

	/* Glass + gloss materials */
	--glass: rgba(255, 255, 255, 0.6);
	--glass-border: rgba(255, 255, 255, 0.7);
	--sheen: rgba(255, 255, 255, 0.55);

	/* Glossy gradients + elevation (abbreviated) */
	--gradient-primary: linear-gradient(180deg, #5cd5ff, #01b2ff 48%, #0090d9);
	--elevation-aqua: inset 0 1px 0 rgba(255,255,255,.5), 0 4px 12px rgba(1,178,255,.35);
}

.dark {
	--background: #061520;       /* deep water */
	--foreground: #e3f1fa;
	--primary: #29c7ff;
	/* …each token gets a dark variant… */
}

The aqua ramp

mizu-50 through mizu-950. The hero is mizu-500. Swap these to re-tint the whole system.

50100200300400500600700800900950

Material utilities

Beyond colors, Mizu adds a small set of Frutiger Aero surface utilities you can use anywhere.

glass / glass-strong Frosted translucent surface + backdrop blur.

gloss The wet top sheen (a ::before highlight). Needs relative + overflow-hidden.

gradient-primary / -surface / … Glossy 180° gradients for fills.

shadow-aqua / -glass / -bevel / -pressed Layered elevation, from cyan glow to recessed wells.

Dark mode

Mizu uses a class strategy: add dark to <html>. The included theme store handles persistence and a no-flash inline script. Toggle it with the sun/moon button in the header.