MoreLesson 224Free preview

Toggle Dark Mode

This lesson is part of How To · All levels

Summary

Dark mode is a dark theme that users can activate according to their preferences. Modern implementations use CSS variables for colors, then change their values when dark classes are added to an html or body element. The user's choices can be saved in localStorage to remain valid when the page is reopened.

Key points

Define the theme color as CSS variables on the root
Add a class .dark to an html or body to overlay the variable
Save your preferences with localStorage and read them when the page loads
Respect system preferences through media query preferences-color-schemes

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.