Theming
Use CSS variables and ThemeProvider to control appearance.
Surface
Foreground and background from tokens
Primary color
Theme Provider
app/layout.tsx
import { ThemeProvider } from 'next-themes'
<ThemeProvider attribute="class" defaultTheme="light">{children}</ThemeProvider>Override Tokens
Override via CSS variables; avoid hardcoded colors.
globals.css
:root{ --primary: 260 90% 64% }
.dark{ --background: 220 14% 6% }