PureKit UI logoPureKit UI

Theming

Learn how to customize the appearance of PureKit UI components using our flexible theming system.

Theme System Overview

CSS Variables

All colors are defined as CSS variables, making customization simple and consistent.

Light & Dark

Built-in support for light and dark modes with automatic system detection.

Customizable

Easy to customize with your brand colors and create multiple theme variants.

CSS Variables

PureKit UI uses HSL color values defined as CSS variables. Here are the core variables:

Core Theme Variables
These variables define the main colors used throughout the components
:root {
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
  --primary: 221.2 83.2% 53.3%;
  --primary-foreground: 210 40% 98%;
  --secondary: 210 40% 96%;
  --secondary-foreground: 222.2 84% 4.9%;
  --muted: 210 40% 96%;
  --muted-foreground: 215.4 16.3% 46.9%;
  --border: 214.3 31.8% 91.4%;
  --radius: 0.75rem;
}

.dark {
  --background: 222.2 84% 4.9%;
  --foreground: 210 40% 98%;
  --primary: 217.2 91.2% 59.8%;
  --primary-foreground: 222.2 84% 4.9%;
  --secondary: 217.2 32.6% 17.5%;
  --secondary-foreground: 210 40% 98%;
  --muted: 217.2 32.6% 17.5%;
  --muted-foreground: 215 20.2% 65.1%;
  --border: 217.2 32.6% 17.5%;
}

Dark Mode Setup

Setup Theme Provider
Configure the theme provider in your app
"use client"

import { ThemeProvider as NextThemesProvider } from "next-themes"
import type { ThemeProviderProps } from "next-themes"

export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
}

// In your layout.tsx
import { ThemeProvider } from "@/components/theme-provider"

export default function RootLayout({ children }) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body>
        <ThemeProvider
          attribute="class"
          defaultTheme="system"
          enableSystem
          disableTransitionOnChange
        >
          {children}
        </ThemeProvider>
      </body>
    </html>
  )
}

Custom Themes

Create your own theme by overriding the CSS variables with your brand colors:

Custom Color Scheme
Example of a custom green theme
:root {
  --primary: 142 76% 36%;        /* Green primary */
  --primary-foreground: 355 100% 97%;
  --secondary: 210 40% 96%;
  --secondary-foreground: 222.2 84% 4.9%;
  --accent: 142 76% 36%;
  --accent-foreground: 355 100% 97%;
}

Theme Examples

Themed Components

See how components look with different themes

Default
Secondary
Outline

Themed Card

This card adapts to your theme colors automatically.

Best Practices