Uploaded March 2022 | Updated September 2026, 2 hours ago

---

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.

🔗 Codepen demo: codepen.io/ZoranJambor/pen/rNpwjmd/d9ce35066e4b6c3b3e45993819ddfe5f

📖 Resources
color-scheme: developer.mozilla.org/en-US/docs/Web/CSS/color-scheme
prefers-color-scheme: developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme

Timestamps:
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
#css

Subscribe to CSS Weekly Newsletter:
💌 css-weekly.com

Keep up-to-date with CSS Weekly:
👉 Twitter: twitter.com/CSSWeekly
👉 Instagram: instagram.com/cssweekly
👉 Facebook: facebook.com/CSSWeekly

Keep up to date with what I'm up to:
🔗 Blog: zoranjambor.com
👉 Twitter: twitter.com/zoranjambor
👉 LinkedIn: linkedin.com/in/zoranjambor

- Zoran Jambor