Theming

CSS Variables

radk uses CSS custom properties scoped to :root and .dark. All components reference semantic variable names, never hardcoded colors. Colors are defined in the OKLCH color space for perceptual uniformity across hues.

:root {
  --background: oklch(0.98 0.012 90);
  --foreground: oklch(0.07 0 0);
  --primary: oklch(0.76 0.2 350);       /* pink — default */
  --primary-foreground: oklch(0.07 0 0);
  --border: oklch(0.07 0 0);
  --radius: 0px;                         /* sharp corners */
  --neo-shadow-color: oklch(0.07 0 0);   /* neobrutalism offset shadow */
}

Dark Mode

radk uses next-themes with the class strategy. The RootProvider from fumadocs-ui handles this automatically in the docs. For your own app:

import { ThemeProvider } from "next-themes"

export default function Layout({ children }) {
  return (
    <ThemeProvider attribute="class" defaultTheme="system" disableTransitionOnChange>
      {children}
    </ThemeProvider>
  )
}

Color Themes

radk ships 5 ready-made color themes. Each theme replaces --primary, --accent, and --ring while leaving the rest of the design system untouched.

Copy any of the blocks below into your globals.css to change the primary color.

Pink (default)

The default theme — no extra CSS needed. The :root block already sets this.

:root {
  --primary: oklch(0.76 0.2 350);
  --primary-foreground: oklch(0.07 0 0);
  --accent: oklch(0.76 0.2 350);
  --accent-foreground: oklch(0.07 0 0);
  --ring: oklch(0.76 0.2 350);
}

Green

[data-theme-color="green"] {
  --primary: oklch(0.72 0.26 140);
  --primary-foreground: oklch(0.07 0 0);
  --accent: oklch(0.72 0.26 140);
  --accent-foreground: oklch(0.07 0 0);
  --ring: oklch(0.72 0.26 140);
}

Blue

[data-theme-color="blue"] {
  --primary: oklch(0.64 0.26 250);
  --primary-foreground: oklch(1 0 0);
  --accent: oklch(0.64 0.26 250);
  --accent-foreground: oklch(1 0 0);
  --ring: oklch(0.64 0.26 250);
}

Orange

[data-theme-color="orange"] {
  --primary: oklch(0.78 0.22 52);
  --primary-foreground: oklch(0.07 0 0);
  --accent: oklch(0.78 0.22 52);
  --accent-foreground: oklch(0.07 0 0);
  --ring: oklch(0.78 0.22 52);
}

Purple

[data-theme-color="purple"] {
  --primary: oklch(0.62 0.28 295);
  --primary-foreground: oklch(1 0 0);
  --accent: oklch(0.62 0.28 295);
  --accent-foreground: oklch(1 0 0);
  --ring: oklch(0.62 0.28 295);
}

To activate a theme at runtime, set data-theme-color on your <html> element:

document.documentElement.setAttribute("data-theme-color", "green")
// remove the attribute to go back to pink (default)
document.documentElement.removeAttribute("data-theme-color")

Border Radius

radk uses --radius: 0px globally — sharp corners are core to the neobrutalism aesthetic. You can override this:

:root {
  --radius: 0.375rem; /* softer corners */
}

Neobrutalism Shadows

The offset box shadow is driven by --neo-shadow-color:

:root {
  --neo-shadow-color: oklch(0.07 0 0); /* dark shadow in light mode */
}
.dark {
  --neo-shadow-color: oklch(0.95 0.01 90); /* light shadow in dark mode */
}

Usage in components: shadow-[4px_4px_0_0_var(--neo-shadow-color)]

On this page