Theming

Customize the look and feel to match your brand.

CSS Variables

Chronos Picker uses CSS variables for easy customization. You can override these in your global CSS.

1:root {
2  /* Brand Colors */
3  --chronos-primary: #2563eb;
4  --chronos-primary-foreground: #ffffff;
5

6  /* Backgrounds */
7  --chronos-bg: #ffffff;
8  --chronos-bg-secondary: #f8fafc;
9

10  /* Text */
11  --chronos-text: #0f172a;
12  --chronos-text-secondary: #64748b;
13

14  /* Borders */
15  --chronos-border: #e2e8f0;
16

17  /* Layout */
18  --chronos-radius: 0.5rem;
19}

Dark Mode

The picker supports dark mode automatically when using the variable approach. Simply update the variables inside a dark theme media query or class.

1@media (prefers-color-scheme: dark) {
2  :root {
3    --chronos-bg: #1e293b;
4    --chronos-text: #f8fafc;
5    --chronos-border: #334155;
6    /* ... other overrides */
7  }
8}

Tailwind Integration

You can also pass custom class names to the picker components to style them using Tailwind utility classes.

1<DateTimePicker
2  className="shadow-lg border-2 border-indigo-500 rounded-xl"
3/>