Theming
Theming is essential for creating visually appealing and accessible applications. RizzUI 2.0 uses Tailwind CSS v4 with the modern OKLCH color space to provide perceptually uniform colors that look consistent across different screens and lighting conditions.
Why OKLCH Color Space?
OKLCH (Lightness, Chroma, Hue) offers several advantages over traditional RGB/HEX:
- Perceptual Uniformity - Colors with the same lightness value appear equally bright to human eyes
- Better Accessibility - Easier to create color palettes that meet WCAG contrast requirements
- Predictable Color Manipulation - Adjusting lightness values produces intuitive results
- Future-Proof - Native browser support with automatic fallbacks for older browsers
Theme Tokens
Customize your color tokens for both light and dark modes. Click on any color box below to select a new color, then copy the generated CSS variable to your globals.css file.
| Color | Name | Value (OKLCH) | Description |
|---|---|---|---|
--background | oklch(100% 0 0) | Main background color for body, drawer, modal, dropdown, and popover components. | |
--foreground | oklch(40.17% 0 0) | Primary text color used throughout the application. | |
--muted | oklch(91.58% 0 0) | Muted backgrounds and borders for subtle UI elements, tabs, and hover states. | |
--muted-foreground | oklch(66% 0 0) | Secondary text color for disabled states and less prominent text. | |
--border-radius | 0.5rem | Default border radius (8px) for components. Customize for rounded corners. | |
--border-width | 0.0625rem | Default border width (1px) for bordered components. | |
--border-color | oklch(90.37% 0 0) | Default border color for inputs, cards, and other bordered elements. | |
--text-primary | oklch(0% 0 0) | Primary text color for headings and emphasized content. | |
--text-secondary | oklch(40.17% 0 0) | Secondary text color for body content and descriptions. | |
--primary-lighter | oklch(91.58% 0 0) | Light background color for primary flat variants in buttons and badges. | |
--primary | oklch(17.76% 0 0) | Primary brand color for buttons, badges, avatars, input focus states, and active tabs. | |
--primary-dark | oklch(0% 0 0) | Darker shade for primary button hover and focus states. | |
--primary-foreground | oklch(100% 0 0) | Text color on primary colored backgrounds. | |
--secondary-lighter | oklch(91.99% 0.0386 276.02) | Light background color for secondary flat variants in buttons and badges. | |
--secondary | oklch(50.51% 0.2633 276.95) | Secondary accent color for buttons, badges, and avatars. | |
--secondary-dark | oklch(45.41% 0.2431 277.06) | Darker shade for secondary button hover and focus states. | |
--secondary-foreground | oklch(100% 0 0) | Text color on secondary colored backgrounds. | |
--red-lighter | oklch(89.99% 0.0393 14) | Light background color for error/danger alerts, buttons, and badges. | |
--red | oklch(59.6% 0.2445 29.23) | Error/danger color for alerts, buttons, badges, and destructive actions. | |
--red-dark | oklch(51.71% 0.2121 29.2338) | Darker shade for error button hover states and badge text. | |
--orange-lighter | oklch(95.67% 0.0452 84.5695) | Light background color for warning alerts and badges. | |
--orange | oklch(78.37% 0.1587 72.99) | Warning color for alerts, avatars, and badges indicating caution. | |
--orange-dark | oklch(54.83% 0.1339 53.95) | Darker shade for warning badge text and hover states. | |
--blue-lighter | oklch(91.66% 0.0404 257.5078) | Light background color for info alerts and badges. | |
--blue | oklch(57.31% 0.2144 258.25) | Info color for alerts, avatars, loaders, progress bars, tooltips, and badges. | |
--blue-dark | oklch(51.58% 0.1888 258.27) | Darker shade for info badge text and progress bars. | |
--green-lighter | oklch(92.79% 0.086 155.61) | Light background color for success alerts and badges. | |
--green | oklch(64.01% 0.1776 148.74) | Success color for alerts, avatars, loaders, progress bars, tooltips, and badges. | |
--green-dark | oklch(53.79% 0.1441 149.52) | Darker shade for success badge text and progress bars. |
Live Preview
Try changing the colors above and see how they affect the components below in real-time. This preview demonstrates how theme tokens control colors, borders, backgrounds, and typography across different component types:
Buttons
Status Badges
Form Inputs
Typography
Heading 1 - Primary Text
Body text using secondary text color. This demonstrates how text-secondary token affects readability.
Muted text for less prominent information.
Cards & Containers
Default Card
Uses background, border-color, and text tokens for a clean card design.
Muted Card
Demonstrates muted background with border-radius token for rounded corners.
Alerts & Feedback
Info alert using info color tokens.
Success alert using success color tokens.
Warning alert using warning color tokens.
Danger alert using danger color tokens.
User Interface
User Profile
Border Radius
Radius
Button-like
Bordered
Customization Tips
To customize your brand colors, update the CSS variables in your globals.css:
:root {
/* Change primary brand color */
--primary: oklch(50% 0.2 250); /* Your custom color */
/* Adjust secondary accent color */
--secondary: oklch(60% 0.25 300);
}
Creating Custom Color Schemes
Use the OKLCH color picker to generate consistent color palettes. Keep these guidelines in mind:
- Lightness (L): 0% (black) to 100% (white) - controls brightness
- Chroma (C): 0 (gray) to 0.4+ (vibrant) - controls color intensity
- Hue (H): 0-360 degrees - controls the color itself
For accessible designs, maintain at least a 4.5:1 contrast ratio between text and backgrounds.