Themes
📌 Covered in this chapter:
Light Theme · Dark Theme · Theme Variables · prefers-color-scheme · Manual Switch · Data Attributes · Persistence · High Contrast · Component Themes · Accessibility
Welcome to Chapter 37: Themes — part of the CSS Complete Roadmap. This lesson covers all subtopics with clear explanations, code examples, and best practices used in professional web development.
1Light & Dark Theme Variables
CSS — Theme System▶ Try in Editor
:root {
--bg-primary: #ffffff;
--bg-secondary: #f9fafb;
--text-primary: #111827;
--text-secondary: #6b7280;
--border-color: #e5e7eb;
--color-primary: #2563eb;
}
@media (prefers-color-scheme: dark) {
:root {
--bg-primary: #111827;
--bg-secondary: #1f2937;
--text-primary: #f9fafb;
--text-secondary: #9ca3af;
--border-color: #374151;
--color-primary: #3b82f6;
}
}
body {
background: var(--bg-primary);
color: var(--text-primary);
}2Manual Theme Switch & Persistence
CSS — Data Attribute Theme
[data-theme="dark"] {
--bg-primary: #111827;
--text-primary: #f9fafb;
}
[data-theme="light"] {
--bg-primary: #ffffff;
--text-primary: #111827;
}JavaScript persistence: localStorage.setItem('theme', 'dark') + document.documentElement.dataset.theme = 'dark' on load.
3High Contrast & Theme Accessibility
CSS
@media (prefers-contrast: more) {
:root {
--text-primary: #000000;
--border-color: #000000;
}
}- Both themes lo WCAG contrast ratios maintain cheyandi
- Theme toggle button accessible —
aria-label, keyboard support - Component-level theme variables for nested theming (cards in dark sidebar)
- Respect system preference as default — manual override optional