How Would You Implement Light and Dark Themes?
How would you implement light and dark themes?
Answer out loud in under a minute: a definition, one concrete example, and one pitfall or trade-off.
Hints
Hint 1
Where do the colors live, what decides the default, and how do you stop the wrong theme flashing on load?
Solution
Show the approach
Answer
Colors as CSS custom properties on the root. Follow prefers-color-scheme by default, and let a data-theme attribute on <html> override it. Store the choice, and set the attribute from an inline script in <head>, so the wrong theme never flashes before the stylesheet applies.