🎨 Color Scheme Settings

Personalize the theme’s appearance with your own brand colors and adjust how elements appear in light and dark mode.

🌞 Light Mode Colors

Show Light Mode Colors

Setting	Default	Description
`primary`	`hsl(340, 85%, 55%)`	Main brand color used across buttons and highlights
`secondary`	`hsl(45, 90%, 60%)`	Secondary accent color used for emphasis
`neutral`	`hsl(210, 20%, 80%)`	Neutral color for borders and UI elements
`base`	`hsl(0, 0%, 10%)`	Primary text color on light background
`muted`	`hsl(200, 25%, 35%)`	Subdued text, used for descriptions or less important elements
`inverted`	`hsl(0, 0%, 100%)`	Text color on primary backgrounds (e.g., buttons)
`background`	`hsl(0, 0%, 98%)`	Default background color for the page
`background-secondary`	`hsl(0, 0%, 95%)`	Slightly darker secondary background (e.g., cards, sections)

Show Dark Mode Colors

Setting	Default	Description
`dark-primary`	`hsl(340, 85%, 55%)`	Primary brand color for dark theme
`dark-secondary`	`hsl(45, 90%, 60%)`	Secondary accent for dark mode
`dark-neutral`	`hsl(210, 20%, 25%)`	Neutral color for borders and accents
`dark-base`	`hsl(0, 0%, 95%)`	Base text color on dark backgrounds
`dark-muted`	`hsl(200, 25%, 40%)`	Less prominent text color on dark mode
`dark-inverted`	`hsl(0, 0%, 20%)`	Inverted text color on bright buttons or elements
`dark-background`	`hsl(220, 30%, 10%)`	Primary dark background color
`dark-background-secondary`	`hsl(220, 25%, 15%)`	Secondary background shade for sections and containers

🎨 Pro Tip: Try to keep brand colors consistent across both light and dark themes for visual harmony.