A theme customizer with four controls — theme preset, font, radius and colour mode. Settings persist in a cookie, are read on the server so there is no flash on first paint, and sync across open tabs.
pnpm install
pnpm devOpen http://localhost:3000.
Click the palette icon in the header to open the customizer. Press d anywhere outside a text field to toggle light and dark.
pnpm dev # development server
pnpm build # production build
pnpm start # serve the production build
pnpm typecheck # tsc --noEmit
pnpm lint # eslint
pnpm format # prettierGenerate one at shadcn studio — Copy → CSS Variables gives you a :root and a .dark block.
Add a key to themePresets in utils/theme-presets.ts with a label and a styles object containing a light and a dark palette. Drop the leading -- from each variable name, and leave out --radius and the --shadow-* lines. It appears in the dropdown automatically.
Every variable a preset sets must also be listed in PRESET_CSS_VARS in contexts/settingsContext.tsx, or it will not be cleared when the user switches back to Default.
A font has to be in three places in utils/fonts.ts: the loader call, the allFonts array, and the FONT_CONFIG registry. Miss allFonts and the font renders as the browser fallback with no error.