Theming
Components read CSS variables, so a theme is a set of token values.
Tokens
Components use the same token names as shadcn/ui (--background, --muted-foreground, --accent…), so they drop into an existing shadcn project and pick up its theme. Charts read --chart-1 through --chart-6.
globals.css
:root {
--background: #f7f6f3;
--foreground: #18181a;
--card: #ffffff;
--popover: #ffffff;
--primary: #18181a;
--primary-foreground: #fafafa;
--secondary: #efeeea;
--muted: #ecebe7;
--muted-foreground: #6b6a67;
--accent: #e6e4df;
--destructive: #d93636;
--border: rgb(0 0 0 / 0.08);
--input: rgb(0 0 0 / 0.12);
--ring: rgb(0 0 0 / 0.28);
--chart-1: #4ea8ff;
/* ...chart-2 to chart-6 */
}
.dark {
--background: #111111;
--foreground: #ededed;
--card: #1a1a1a;
/* ... */
}Dark mode
Dark styles apply under a .dark class or a data-theme="dark" attribute. This site sets the attribute with an inline script before first paint, so there is no flash on load.
Lode222 doc pagesllms.txt