Dinachi

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.

#Motion

Five custom properties set the feel of every animated component. dinachi init writes them into :root:

css
:root {
  --motion-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --motion-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --motion-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --motion-duration-fast: 150ms;
  --motion-duration-base: 200ms;
}
TokenUsed by
--motion-ease-outAnything entering or leaving: popovers, menus, dialogs, tooltips, panels
--motion-ease-in-outMovement between two on-screen positions, such as the tabs indicator
--motion-ease-drawerSurfaces that slide in from an edge
--motion-duration-fastPopovers, tooltips, menus, selects, press feedback, and every exit
--motion-duration-baseDialogs, drawers, panels that change height, the tabs indicator

Lower both durations for a snappier product, or raise them for a calmer one. Nothing else needs to change.

#Reduced motion

Components respond to prefers-reduced-motion: reduce without any configuration. The handling is gentler rather than absent — popovers and dialogs keep the fade that signals arrival and drop the scale, drawers fade in place instead of sliding, and panels, indicators and chevrons cut straight to their end state.