> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/yogendrarana/craftdotui/llms.txt
> Use this file to discover all available pages before exploring further.
# Theming and Styling
> Learn how to customize the look and feel of Craft UI components using Tailwind CSS, CSS variables, and theme configuration.
Craft UI is built with Tailwind CSS and uses a comprehensive theming system based on CSS variables. This approach provides flexibility and makes it easy to customize colors, spacing, typography, and more.
## Overview
The theming system consists of three layers:
1. **CSS Variables** - Semantic color tokens defined in your global stylesheet
2. **Tailwind Configuration** - Extended with custom design tokens
3. **Component Classes** - Applied using Tailwind utilities
## CSS Variables
Craft UI uses CSS variables (custom properties) to define semantic color tokens that automatically adapt to light and dark modes.
### Color System
All colors are defined using the OKLCH color space for perceptually uniform color manipulation:
```css title="globals.css" theme={null}
:root {
--background: oklch(0.99 0 0);
--foreground: oklch(0 0 0);
--primary: oklch(0 0 0);
--primary-foreground: oklch(1 0 0);
--secondary: oklch(0.94 0 0);
--secondary-foreground: oklch(0 0 0);
--muted: oklch(0.97 0 0);
--muted-foreground: oklch(0.44 0 0);
--accent: oklch(0.94 0 0);
--accent-foreground: oklch(0 0 0);
--destructive: oklch(0.63 0.19 23.03);
--destructive-foreground: oklch(1 0 0);
--border: oklch(0.92 0 0);
--input: oklch(0.94 0 0);
--ring: oklch(0 0 0);
}
```
### Available Color Tokens
Craft UI provides the following semantic color tokens:
* `background` / `foreground` - Base colors for your application
* `primary` / `primary-foreground` - Primary brand colors
* `secondary` / `secondary-foreground` - Secondary accent colors
* `muted` / `muted-foreground` - Muted backgrounds and text
* `accent` / `accent-foreground` - Accent highlights
* `destructive` / `destructive-foreground` - Error and danger states
* `border` - Border colors
* `input` - Input field backgrounds
* `ring` - Focus ring colors
* `card` / `card-foreground` - Card backgrounds
* `popover` / `popover-foreground` - Popover backgrounds
## Dark Mode
Dark mode is implemented using a `.dark` class that overrides the CSS variables:
```css title="globals.css" theme={null}
.dark {
--background: oklch(0 0 0);
--foreground: oklch(1 0 0);
--primary: oklch(1 0 0);
--primary-foreground: oklch(0 0 0);
--secondary: oklch(0.25 0 0);
--secondary-foreground: oklch(1 0 0);
/* ... */
}
```
To enable dark mode, add the `dark` class to your root element:
```tsx theme={null}
{children}
```
Use the `@custom-variant dark (&:is(.dark *));` directive in your CSS to create a custom dark mode variant that works with nested dark mode contexts.
## Customizing Colors
Update the color values in your `globals.css` file to match your brand:
```css title="globals.css" theme={null}
:root {
--primary: oklch(0.45 0.26 262.52); /* Your brand color */
--primary-foreground: oklch(1 0 0);
}
```
Don't forget to update dark mode variants:
```css title="globals.css" theme={null}
.dark {
--primary: oklch(0.65 0.26 262.52); /* Lighter for dark mode */
--primary-foreground: oklch(0 0 0);
}
```
Components automatically pick up your custom colors:
```tsx theme={null}
```
## Typography
Customize fonts using CSS variables:
```css title="globals.css" theme={null}
:root {
--font-sans: Geist, sans-serif;
--font-serif: Georgia, serif;
--font-mono: Geist Mono, monospace;
}
```
These are automatically mapped to Tailwind's font utilities:
```tsx theme={null}
);
}
```
## Overriding Component Styles
All components accept a `className` prop that merges with default styles using the `cn()` utility:
```tsx theme={null}
import { Button } from "@craftdotui/baseui/components/button";
```
The `cn()` utility is built with `tailwind-merge` and `clsx`, ensuring that Tailwind classes are properly merged and duplicates are resolved.
Later classes in the `className` prop will override earlier classes, allowing you to customize any aspect of a component's appearance.
## Per-Component Theming
For more granular control, use Tailwind's arbitrary value syntax with CSS variables:
```tsx theme={null}
Custom background using OKLCH
```
Or reference your theme variables directly:
```tsx theme={null}
Uses theme colors
```
## Next Steps
* [Customization](/guides/customization) - Learn how to extend components with custom variants
* [Accessibility](/guides/accessibility) - Ensure your themed components remain accessible