Getting Started
Theming
Customize theme colors through global CSS variables and apply a unified style across your components.
Contextual Colors
Preview TOUI's contextual colors fully compatible with Shadcn UI, globally applied across all components to maintain a uniform design system.
Base Colors
Preview TOUI's base colors, fully compatible with Shadcn UI, globally applied across base components to maintain a uniform design system.
Loading
Base Styles
Preview TOUI's base styles, fully compatible with Shadcn UI, globally applied across base components to maintain a uniform design system.
Loading
Customization
Customize component styles using CSS variables for both light and dark modes in your Tailwind entry CSS file styles/globals.scss:
:root {
--font-sans: var(--font-sans);
--font-mono: var(--font-mono);
--background: var(--color-white);
--foreground: var(--color-zinc-950);
--card: var(--color-white);
--card-foreground: var(--color-zinc-950);
--popover: var(--color-white);
--popover-foreground: var(--color-zinc-950);
--primary: var(--color-blue-500);
--primary-foreground: var(--color-white);
--secondary: var(--color-zinc-100);
--secondary-foreground: var(--color-zinc-900);
--muted: var(--color-zinc-100);
--muted-foreground: var(--color-zinc-500);
--accent: var(--color-zinc-100);
--accent-foreground: var(--color-zinc-900);
--destructive: var(--color-red-600);
--destructive-foreground: var(--color-white);
--chart-1: var(--color-blue-500);
--chart-2: var(--color-green-500);
--chart-3: var(--color-yellow-500);
--chart-4: var(--color-red-500);
--chart-5: var(--color-purple-500);
--border: oklch(94% 0.004 286.32); /* between --color-zinc-100 and --color-zinc-200 */
--input: var(--color-zinc-200);
--ring: var(--color-zinc-400);
--radius: 0.5rem;
}
.dark {
--background: var(--color-zinc-950);
--foreground: var(--color-zinc-50);
--card: var(--color-zinc-950);
--card-foreground: var(--color-zinc-50);
--popover: var(--color-zinc-950);
--popover-foreground: var(--color-zinc-50);
--primary: var(--color-blue-600);
--primary-foreground: var(--color-white);
--secondary: var(--color-zinc-800);
--secondary-foreground: var(--color-zinc-50);
--muted: var(--color-zinc-900);
--muted-foreground: var(--color-zinc-500);
--accent: var(--color-zinc-900);
--accent-foreground: var(--color-zinc-50);
--destructive: var(--color-red-600);
--destructive-foreground: var(--color-white);
--chart-1: var(--color-blue-500);
--chart-2: var(--color-green-500);
--chart-3: var(--color-yellow-500);
--chart-4: var(--color-red-500);
--chart-5: var(--color-purple-500);
--border: var(--color-zinc-800);
--input: var(--color-zinc-800);
--ring: var(--color-zinc-600);
}