Generate light and dark semantic tokens, preview them on a sample website, then copy the CSS.
Update theme ↓Add generated declarations below your existing framework imports. Keep the setup and plugins your project already uses.
A sample page with your background, surfaces and accents. Change the palette to see every section update.
Generated defaults, not an accessibility certificate. Check the actual text, backgrounds, focus states and charts in your interface.
Illustrative chart, not analytics. Colors alone do not make a chart accessible.
/* shadcn/ui + Tailwind CSS v4. Keep your existing imports. */
@custom-variant dark (&:is(.dark *));
@theme inline {
--color-background: var(--background);
--color-foreground: var(--foreground);
--color-card: var(--card);
--color-card-foreground: var(--card-foreground);
--color-popover: var(--popover);
--color-popover-foreground: var(--popover-foreground);
--color-primary: var(--primary);
--color-primary-foreground: var(--primary-foreground);
--color-secondary: var(--secondary);
--color-secondary-foreground: var(--secondary-foreground);
--color-muted: var(--muted);
--color-muted-foreground: var(--muted-foreground);
--color-accent: var(--accent);
--color-accent-foreground: var(--accent-foreground);
--color-destructive: var(--destructive);
--color-destructive-foreground: var(--destructive-foreground);
--color-success: var(--success);
--color-success-foreground: var(--success-foreground);
--color-warning: var(--warning);
--color-warning-foreground: var(--warning-foreground);
--color-info: var(--info);
--color-info-foreground: var(--info-foreground);
--color-border: var(--border);
--color-input: var(--input);
--color-ring: var(--ring);
--color-chart-1: var(--chart-1);
--color-chart-2: var(--chart-2);
--color-chart-3: var(--chart-3);
--color-chart-4: var(--chart-4);
--color-chart-5: var(--chart-5);
--color-sidebar: var(--sidebar);
--color-sidebar-foreground: var(--sidebar-foreground);
--color-sidebar-primary: var(--sidebar-primary);
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
--color-sidebar-accent: var(--sidebar-accent);
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
--color-sidebar-border: var(--sidebar-border);
--color-sidebar-ring: var(--sidebar-ring);
--radius-sm: calc(var(--radius) * 0.6);
--radius-md: calc(var(--radius) * 0.8);
--radius-lg: var(--radius);
--radius-xl: calc(var(--radius) * 1.4);
}
:root {
--radius: 0.625rem;
--background: oklch(96.995% 0.00287 264.54);
--foreground: oklch(13.972% 0.01666 263.51);
--card: oklch(93.061% 0.00581 264.53);
--card-foreground: oklch(13.972% 0.01666 263.51);
--popover: oklch(93.061% 0.00581 264.53);
--popover-foreground: oklch(13.972% 0.01666 263.51);
--primary: oklch(54.615% 0.21521 262.88);
--primary-foreground: oklch(100% 0 0);
--secondary: oklch(47.724% 0.21124 294.63);
--secondary-foreground: oklch(100% 0 0);
--muted: oklch(93.061% 0.00581 264.53);
--muted-foreground: oklch(33.999% 0.02267 264.21);
--accent: oklch(92.6% 0.03683 250.75);
--accent-foreground: oklch(17.764% 0 0);
--destructive: oklch(57.71% 0.21516 27.33);
--destructive-foreground: oklch(100% 0 0);
--success: oklch(47.066% 0.13066 144.94);
--success-foreground: oklch(100% 0 0);
--warning: oklch(46.896% 0.09725 79.6);
--warning-foreground: oklch(100% 0 0);
--info: oklch(47.046% 0.12992 249.9);
--info-foreground: oklch(100% 0 0);
--border: oklch(75.95% 0.01533 264.48);
--input: oklch(75.95% 0.01533 264.48);
--ring: oklch(54.615% 0.21521 262.88);
--chart-1: oklch(54.615% 0.21521 262.88);
--chart-2: oklch(47.724% 0.21124 294.63);
--chart-3: oklch(57.009% 0.21281 10.86);
--chart-4: oklch(84.533% 0.1801 111.09);
--chart-5: oklch(76.939% 0.19838 151.44);
--sidebar: oklch(93.061% 0.00581 264.53);
--sidebar-foreground: oklch(13.972% 0.01666 263.51);
--sidebar-primary: oklch(54.615% 0.21521 262.88);
--sidebar-primary-foreground: oklch(100% 0 0);
--sidebar-accent: oklch(92.6% 0.03683 250.75);
--sidebar-accent-foreground: oklch(17.764% 0 0);
--sidebar-border: oklch(75.95% 0.01533 264.48);
--sidebar-ring: oklch(54.615% 0.21521 262.88);
}
.dark {
--radius: 0.625rem;
--background: oklch(13.972% 0.01666 263.51);
--foreground: oklch(96.995% 0.00287 264.54);
--card: oklch(19.096% 0.01749 264.03);
--card-foreground: oklch(96.995% 0.00287 264.54);
--popover: oklch(19.096% 0.01749 264.03);
--popover-foreground: oklch(96.995% 0.00287 264.54);
--primary: oklch(54.615% 0.21521 262.88);
--primary-foreground: oklch(100% 0 0);
--secondary: oklch(47.724% 0.21124 294.63);
--secondary-foreground: oklch(100% 0 0);
--muted: oklch(19.096% 0.01749 264.03);
--muted-foreground: oklch(85.965% 0.01061 261.79);
--accent: oklch(26.656% 0.18471 264.05);
--accent-foreground: oklch(100% 0 0);
--destructive: oklch(71.063% 0.16615 22.22);
--destructive-foreground: oklch(17.764% 0 0);
--success: oklch(77.942% 0.12981 144.77);
--success-foreground: oklch(17.764% 0 0);
--warning: oklch(77.965% 0.12987 79.58);
--warning-foreground: oklch(17.764% 0 0);
--info: oklch(78.068% 0.11597 249.87);
--info-foreground: oklch(17.764% 0 0);
--border: oklch(41.979% 0.02303 265.74);
--input: oklch(41.979% 0.02303 265.74);
--ring: oklch(54.615% 0.21521 262.88);
--chart-1: oklch(54.615% 0.21521 262.88);
--chart-2: oklch(47.724% 0.21124 294.63);
--chart-3: oklch(57.009% 0.21281 10.86);
--chart-4: oklch(84.533% 0.1801 111.09);
--chart-5: oklch(76.939% 0.19838 151.44);
--sidebar: oklch(19.096% 0.01749 264.03);
--sidebar-foreground: oklch(96.995% 0.00287 264.54);
--sidebar-primary: oklch(54.615% 0.21521 262.88);
--sidebar-primary-foreground: oklch(100% 0 0);
--sidebar-accent: oklch(26.656% 0.18471 264.05);
--sidebar-accent-foreground: oklch(100% 0 0);
--sidebar-border: oklch(41.979% 0.02303 265.74);
--sidebar-ring: oklch(54.615% 0.21521 262.88);
}Generated defaults, not an accessibility certificate. Check the actual text, backgrounds, focus states and charts in your interface.