Theming & Colors

DinachiUI's semantic color system and how to customize it.

#Color System

DinachiUI uses CSS custom properties in OKLCH format, mapped to Tailwind utilities via @theme. Components reference semantic tokens like bg-primary and text-muted-foreground that automatically adapt to dark mode.

#Semantic Colors

#Background and Foreground

Background

--background

Foreground

--foreground

#Primary

Primary

--primary

Primary Foreground

--primary-foreground

#Secondary

Secondary

--secondary

Secondary Foreground

--secondary-foreground

#Accent

Accent

--accent

Accent Foreground

--accent-foreground

#Destructive

Destructive

--destructive

Destructive Foreground

--destructive-foreground

#Muted

Muted

--muted

Muted Foreground

--muted-foreground

#Border, Input, and Ring

Border

--border

Input

--input

Ring

--ring

#Customization

Override CSS custom properties in your globals.css to apply your own brand:

css

:root {
  --primary: oklch(0.55 0.22 260);
  --primary-foreground: oklch(0.98 0.01 260);
}
 
.dark {
  --primary: oklch(0.70 0.18 260);
  --primary-foreground: oklch(0.15 0.01 260);
}

All components using bg-primary, text-primary-foreground, etc. will update automatically. Dark mode is handled by the .dark class — override the same variables inside .dark for dark-mode colors.