color-mode-and-theme

# Color Mode and Theme ## The Decision: Light, Dark, or Both Color mode is a brand and context decision, not a personal preference. Make it deliberately. ### Light (white design) **Tone:** Open, trustworthy, content-forward, accessible, professional **Fits:** Marketing sites, e-commerce, editorial, SaaS with mixed audiences, consumer products, B2B tools where the content is the focus Light mode is the safer default for most products. It performs better in bright environments and has broader accessibility coverage out of the box. ### Dark (dark design) **Tone:** Premium, focused, immersive, technical, high-contrast data **Fits:** Trading platforms, developer tools, creative tools (video/audio editors), data dashboards with dense visualisations, entertainment, gaming Dark mode reduces eye strain during extended use in low-light environments. It also makes colourful data visualisations (charts, heatmaps) pop more clearly against a dark surface. **Caution:** Dark mode is harder to get right. Low-contrast text, over-saturated brand colours, and insufficient surface differentiation are common failures. If the team cannot maintain it properly, light mode is better than a broken dark mode. ### Combined (system-default + manual override) Respect `prefers-color-scheme` and let the OS set the default. Offer a toggle for users who want to override. This is the modern standard for most products with a returning user base. ```css @media (prefers-color-scheme: dark) { :root {...