Theming

Customize the look and feel of d12-ui components to match your brand.

CSS Variables

d12-ui uses CSS variables for theming. You can customize the default theme by overriding these variables:

:root {
  --d12-primary: 221.2 83.2% 53.3%;
  --d12-primary-foreground: 210 40% 98%;
  --d12-secondary: 210 40% 96%;
  --d12-secondary-foreground: 222.2 84% 4.9%;
  --d12-background: 0 0% 100%;
  --d12-foreground: 222.2 84% 4.9%;
  --d12-muted: 210 40% 96%;
  --d12-muted-foreground: 215.4 16.3% 46.9%;
  --d12-border: 214.3 31.8% 91.4%;
  --d12-radius: 0.5rem;
}

Dark Mode

d12-ui supports dark mode out of the box. Add dark mode variables:

.dark {
  --d12-primary: 217.2 91.2% 59.8%;
  --d12-primary-foreground: 222.2 84% 4.9%;
  --d12-secondary: 217.2 32.6% 17.5%;
  --d12-secondary-foreground: 210 40% 98%;
  --d12-background: 222.2 84% 4.9%;
  --d12-foreground: 210 40% 98%;
  --d12-muted: 217.2 32.6% 17.5%;
  --d12-muted-foreground: 215 20.2% 65.1%;
  --d12-border: 217.2 32.6% 17.5%;
}

Custom Themes

Create custom themes by defining your own color palette:

/* Custom theme example */
.theme-ocean {
  --d12-primary: 199 89% 48%;
  --d12-primary-foreground: 210 40% 98%;
  --d12-secondary: 199 20% 90%;
  --d12-secondary-foreground: 199 89% 20%;
}

.theme-forest {
  --d12-primary: 142 76% 36%;
  --d12-primary-foreground: 210 40% 98%;
  --d12-secondary: 142 20% 90%;
  --d12-secondary-foreground: 142 76% 20%;
}

Component Customization

Override component styles using Tailwind CSS classes:

import { Button } from 'd12-ui'

// Custom button with your own styles
<Button className="bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600">
  Gradient Button
</Button>

Tailwind Configuration

Extend your Tailwind configuration to use d12-ui theme variables:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: 'hsl(var(--d12-primary))',
        'primary-foreground': 'hsl(var(--d12-primary-foreground))',
        secondary: 'hsl(var(--d12-secondary))',
        'secondary-foreground': 'hsl(var(--d12-secondary-foreground))',
      },
      borderRadius: {
        lg: 'var(--d12-radius)',
        md: 'calc(var(--d12-radius) - 2px)',
        sm: 'calc(var(--d12-radius) - 4px)',
      },
    },
  },
}