CSS Theming and Custom Properties Quiz
Three drills on theming with CSS custom properties: declaring a token set, switching themes at runtime, and respecting the OS prefers-color-scheme setting.
Question Bank
Medium
CSS
3 questions
quiz
css-variables
css-responsive-design
accessibility
1,011 views
18
Define a light theme as CSS custom properties scoped to :root, and consume them in a .card rule. Why is this better than hardcoding colors in every component?
Build a runtime theme switcher: override the same custom properties under [data-theme="dark"] so toggling an attribute on <html> flips the whole app.
Respect the OS-level dark mode preference automatically with prefers-color-scheme, but still let the user override with an explicit data-theme attribute. Show the rule order.