design systempackages/design/theme
theme package
CSS-only multi-theme engine — six oklch presets toggled by data-theme attribute. No JavaScript on the critical path.
- Stability
- Stable
- Scope
- Global
- Boundary
- packages/design/theme
themepackages/design/theme
Design systembrand-primary
brand-accent
brand-gradient
radius-sm
radius-md
radius-lg
Tokens shipped
441
Components
106
Coverage
94%
Sync status
OK
packages/design/themedesign supply chain
Usagetheme.tsx
typescripttheme.tsx
1import { ThemeProvider } from "@nebutra/tokens";
2
3export function RootLayout({ children }: { children: React.ReactNode }) {
4 return (
5 <html suppressHydrationWarning>
6 <body>
7 <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
8 {children}
9 </ThemeProvider>
10 </body>
11 </html>
12 );
13}