Version: latest

Theming

prokodo UI is built on a CSS custom property (design token) system. Theming means overriding --pk-* variables — no JavaScript required, no build step, no theme provider.

How tokens work

All design decisions — color, spacing, typography, border-radius, shadow — are expressed as --pk-* CSS variables. Components consume these variables directly from their CSS Modules.

Tokens are defined in two files:

File	Contents	Size
`@prokodo/ui/theme-tokens.css`	Design tokens only (`--pk-*` variables)	Small
`@prokodo/ui/theme.css`	Tokens + all component styles	~288 KB

For best performance, use theme-tokens.css and load component CSS per component (see Installation).

Override any token in your global stylesheet after the token import:

app/globals.css
@import "@prokodo/ui/theme-tokens.css";

:root {
  /* Brand colours */
  --pk-color-primary: #7c3aed;
  --pk-color-primary-100: #ede9fe;
  --pk-color-primary-500: #7c3aed;
  --pk-color-primary-900: #2e1065;

  /* Typography scale */
  --pk-font-family-base: "Inter", sans-serif;
  --pk-font-size-base: 1rem;

  /* Border radius */
  --pk-radius-sm: 4px;
  --pk-radius-md: 8px;
  --pk-radius-lg: 16px;

  /* Spacing */
  --pk-spacing-1: 4px;
  --pk-spacing-2: 8px;
  --pk-spacing-4: 16px;
  --pk-spacing-8: 32px;
}

Dark mode

prokodo UI supports dark mode via the data-theme="dark" attribute on <html> (or via prefers-color-scheme media query):

:root[data-theme="dark"] {
  --pk-color-background: #0f0f0f;
  --pk-color-surface: #1a1a1a;
  --pk-color-text: #f5f5f5;
}

Toggle dark mode by setting document.documentElement.dataset.theme = 'dark' in your client code.

Token reference

See Design Tokens for a full listing of all available --pk-* custom properties.

Scoped theming

Tokens can be scoped to a subtree by applying overrides to a wrapper element instead of :root:

.marketing-section {
  --pk-color-primary: #f97316; /* orange for this section only */
}

Font loading

prokodo UI does not bundle fonts. Import your typeface in the root layout and set --pk-font-family-base:

app/layout.tsx
import { Inter } from "next/font/google"
import "@prokodo/ui/theme-tokens.css"
import "./globals.css" /* contains --pk-font-family-base override */

const inter = Inter({ subsets: ["latin"], variable: "--font-inter" })

export default function RootLayout({ children }) {
  return (
    <html lang="en" className={inter.variable}>
      <body>{children}</body>
    </html>
  )
}

app/globals.css
:root {
  --pk-font-family-base: var(--font-inter), sans-serif;
}