Dark Mode

The dark theme is a .dark class on <html>. @kinetixui/tokens/css/dark redefines the semantic contract under that selector — primitives are unchanged.

The dark palette is currently generated, not hand-designed: color.dark.json is derived by walking each ramp toward its dark end and swapping foreground / background roles. It is production-usable and will be refined against a hand-tuned dark source.

Next.js#

// app/layout.tsx
import { ThemeProvider } from "next-themes";
 
export default function RootLayout({ children }) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body>
        <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
          {children}
        </ThemeProvider>
      </body>
    </html>
  );
}

This very site uses exactly that. Toggle it from the header — the whole page, including these code blocks, re-themes off the same contract.

Vanilla#

document.documentElement.classList.toggle("dark");

Any framework works; the contract is just CSS.

StylingTheming StylingRTL