| name | add-theme-colors |
| description | Add or customize theme colors in the CSS custom properties system |
When adding or customizing theme colors in this Next.js dashboard:
-
Locate the theme definitions in src/app/globals.css:
- Light theme:
:root selector
- Dark theme:
.dark selector
- Chart colors are defined in both themes
-
Color format: Use HSL values without the hsl() wrapper:
--color-name: 220 10% 50%;
This allows using hsl(var(--color-name)) in components.
-
Available color categories:
- Layout: background, foreground, card, popover, border
- Elements: primary, secondary, muted, accent, destructive
- Text: foreground, muted-foreground, popover-foreground
- Charts: chart-1 through chart-5
-
Adding a new theme color:
:root {
--new-color: 210 100% 50%;
}
.dark {
--new-color: 210 50% 40%;
}
-
Using the color in components:
className="text-new-color"
color: "hsl(var(--new-color))"
backgroundColor: "hsl(var(--new-color))"
-
Chart colors (predefined: chart-1 through chart-5):
- Used automatically by the
useChartColors hook
- Ensure both light and dark modes have distinct, accessible colors
- Test visibility in both themes
-
Best practices:
- Maintain color harmony across themes
- Ensure sufficient contrast for accessibility (WCAG AA)
- Test colors in both light and dark modes
- Document custom colors if they serve specific purposes
-
Color palette consistency:
- Light theme: Use higher lightness values (50-90%)
- Dark theme: Use lower lightness values (10-40%)
- Keep saturation similar for color harmony
Examples
Add a success color
:root {
--success: 142 76% 36%;
--success-foreground: 0 0% 100%;
}
.dark {
--success: 142 69% 58%;
--success-foreground: 0 0% 0%;
}
<div className="bg-success text-success-foreground">
Success message
</div>
Add a new chart color
:root {
--chart-6: 280 80% 60%;
}
.dark {
--chart-6: 280 70% 50%;
}
const colors = {
...useChartColors(),
chart6: "hsl(var(--chart-6))"
};
Tips
- Use an HSL color picker for easy value adjustment
- Test accessibility with tools like WebAIM Contrast Checker
- Keep the HSL format consistent (no hsl() wrapper in CSS)
- Chart colors should be visually distinct from each other
- Theme colors automatically apply to shadcn/ui components
Related Files
src/app/globals.css
src/components/DashboardCharts.tsx
Related Skills
add-chart
add-shadcn-component