Work with the design system, theming, and CSS variables. Use when the user asks to add colors, modify the theme, update styling tokens, create a new color variant, adjust the design system, or customize the look and feel.
Use this skill when the user asks to modify the design system, add new colors, adjust theme tokens, or work with the CSS variable system.
light-dark() CSS function for automatic light/dark modesrc/styles/global.css - All CSS variables and design tokenssrc/hooks/useTheme.ts - Theme toggle hooksrc/components/theme/ThemeToggle.tsx - Theme toggle componentsrc/stores/preferences.ts - Theme preference persistencesrc/app/layout.tsx - Inline script to prevent FOUClocalStorage('app-theme') before React hydratesdata-theme="light|dark" on <html> element (or removes for system)color-scheme: light dark + light-dark() function[data-theme="light"] forces color-scheme: light[data-theme="dark"] forces color-scheme: darkIn src/styles/global.css, add to the :root block:
:root {
/* New semantic color */
--color-accent: light-dark(#7c3aed, #a78bfa);
--color-accent-hover: light-dark(#6d28d9, #c4b5fd);
--color-accent-muted: light-dark(#ede9fe, #2e1065);
--color-accent-fg: light-dark(#ffffff, #ffffff);
}
Then register it in the @theme block for Tailwind:
@theme {
--color-accent-default: var(--color-accent);
--color-accent-hover: var(--color-accent-hover);
--color-accent-muted: var(--color-accent-muted);
--color-accent-foreground: var(--color-accent-fg);
}
| Variable | Usage |
|---|---|
--color-bg | Main content background |
--color-bg-subtle | Page-level background |
--color-bg-muted | Subdued backgrounds |
--color-bg-elevated | Elevated surfaces (cards) |
--color-bg-hover | Hover state backgrounds |
--color-bg-active | Active/pressed state |
| Variable | Usage |
|---|---|
--color-fg | Primary text |
--color-fg-muted | Secondary text |
--color-fg-subtle | Tertiary/disabled text |
| Variable | Usage |
|---|---|
--color-border | Default borders |
--color-border-muted | Subtle borders |
Each semantic color has 4 variants: base, hover, muted, fg
--color-primary-* (FALP Blue #003876)--color-secondary-* (FALP Gold #FDB913)--color-success-* (Green)--color-warning-* (Amber)--color-error-* (Red)--color-info-* (Blue)| Variable | Usage |
|---|---|
--shadow-xs | Subtle depth |
--shadow-sm | Cards, buttons |
--shadow-md | Dropdowns |
--shadow-lg | Modals |
--shadow-xl | Popovers |
Dark mode overrides shadow opacity automatically in [data-theme="dark"].
--spacing-xs (0.25rem) through --spacing-2xl (3rem)
--radius-sm (0.5rem) through --radius-full (9999px)
--font-sans - System sans-serif stack--font-mono - Monospace stack--transition-fast (150ms)--transition-normal (200ms)--transition-slow (300ms)--z-dropdown (1000) through --z-tooltip (1070)
// Correct - Tailwind v4 CSS variable syntax
className = 'bg-(--color-bg) text-(--color-fg)';
className = 'hover:bg-(--color-bg-hover)';
className = 'border border-(--color-border)';
// Wrong - old bracket syntax
className = 'bg-[var(--color-bg)]'; // Don't use this
.my-class {
background-color: var(--color-bg);
color: var(--color-fg);
border: 1px solid var(--color-border);
}
light-dark() so they auto-switch[data-theme="dark"] for more contrast