W3.CSSLesson 24Free preview

W3.CSS Dark Mode

This lesson is part of W3.CSS · All levels

Summary

Dark mode replaces light color schemes with darker colors that are more comfortable for the eyes, especially in minimally illuminated rooms. You can follow the system preferences through the media query preferences-color-scheme, or provide a diversion button that stores user preferences. The key is to keep the contrast sufficient to keep the text readable.

Key points

Media query preferences-color-scheme detects the system theme preferences
Dark themes can be applied through class to the parent element
User's choices are stored in localStorage to remember when reopened
The text and background contrast should remain adequate in the dark mode
Accent colors need to be adjusted so as not to blur on a dark background

Full lesson

Code examples and quizzes

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