Générez des tokens sémantiques clairs et sombres, visualisez une page d’exemple et copiez le CSS.
Actualiser le thème ↓Ajoutez les déclarations sous les imports existants. Conservez la configuration et les plugins de votre projet.
Une page d’exemple avec vos fonds, surfaces et accents. Changez la palette pour actualiser chaque section.
Valeurs initiales générées, pas une certification d’accessibilité. Vérifiez texte, fonds, focus et graphiques dans votre interface.
Graphique illustratif, pas des statistiques. La couleur seule ne rend pas un graphique 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);
}Valeurs initiales générées, pas une certification d’accessibilité. Vérifiez texte, fonds, focus et graphiques dans votre interface.