Start Using color-scheme CSS Property When Working With Dark/Light Themes
An introduction to color-scheme CSS property (and meta tag) which can change how native browser elements are rendered—in light or dark mode.
An introduction to color-scheme CSS property (and meta tag) which can change how native browser elements are rendered—in light or dark mode.
I explain how color-scheme property works, why you should use it when you're offering a dark mode of your website, and I demonstrate what difference it makes if you apply it on Twitter, Linkedin, Netflix, and The Verge.
Chapters
- 00:00 Introduction
- 00:31 Setup
- 00:54 How color-scheme property works
- 02:19 How color-scheme meta tag works
- 03:22 Apply color-scheme only to a part of the UI
- 04:18 How to use it with prefers-color-scheme media query
- 05:23 How to use it with theme-switcher
- 06:09 Importance of testing when applying color-scheme on existing websites
- 07:06 Applying color-scheme to twitter.com
- 08:13 Applying color-scheme to linkedin.com
- 09:22 Applying color-scheme to netflix.com
- 09:54 Applying color-scheme to theverge.com
- 10:26 Conclusion
