Theming

Darwin UI uses CSS custom properties (variables) for theming, making it easy to customize colors while maintaining the dark theme aesthetic.

Default Theme

The default Darwin UI theme features a near-black background with subtle glass-morphism effects:

:root {
  --background: 0 0% 4%;      /* Near black */
  --foreground: 0 0% 95%;     /* Near white */
  --card: 0 0% 6%;            /* Slightly lighter */
  --card-foreground: 0 0% 95%;
  --border: 0 0% 15%;         /* Subtle borders */
  --ring: 217.2 91.2% 59.8%;  /* Blue focus ring */
  --muted: 0 0% 15%;
  --muted-foreground: 0 0% 65%;
}

Customizing Colors

Override CSS variables in your stylesheet:

/* Custom purple accent theme */
:root {
  --background: 270 50% 4%;
  --foreground: 270 10% 95%;
  --card: 270 50% 6%;
  --ring: 270 91% 60%;       /* Purple focus ring */
}

Component-Specific Styling

Button Variants

Darwin UI buttons support 11 variants with predefined colors:

Variant	Background	Use Case
default	bg-white/10	Neutral actions
primary	bg-blue-600	Main CTAs
secondary	bg-white/5	Secondary actions
success	bg-green-600	Positive actions
warning	bg-amber-500	Caution actions
destructive	bg-red-500/80	Delete/remove
outline	Transparent + border	Subtle actions
ghost	Transparent	Minimal UI
link	Text only	Inline links
accent	bg-purple-600	Highlighted actions

Badge Variants

Badges have 13 status variants:

<Badge variant="success">Active</Badge>
<Badge variant="warning">Pending</Badge>
<Badge variant="destructive">Error</Badge>
<Badge variant="published">Published</Badge>
<Badge variant="draft">Draft</Badge>
<Badge variant="archived">Archived</Badge>

Glass Morphism Effects

To maintain the glass-morphism aesthetic, use these utility classes:

// Semi-transparent background with blur
<div className="bg-white/10 backdrop-blur-sm border border-white/5">
  Content
</div>

// Glass card effect
<div className="bg-white/5 backdrop-blur-md rounded-lg border border-white/10">
  Card content
</div>

Chart Colors

The charts component uses a predefined color palette:

const chartColors = {
  blue: '#60a5fa',
  green: '#34d399',
  yellow: '#fbbf24',
  red: '#f87171',
  purple: '#a78bfa',
  pink: '#f472b6',
  orange: '#fb923c',
  teal: '#2dd4bf',
};

Customize chart colors via props:

<AreaChart
  data={data}
  dataKey="revenue"
  color="#your-custom-color"
/>

Dark Mode Only

Darwin UI is designed exclusively for dark themes. The color system assumes a dark background and uses light foreground colors for text and icons.

If you need light mode support, you’ll need to implement your own theme switching logic and override the CSS variables accordingly.