Last Updated: February 12, 2021 | Reading Time: < 1 minutes
I love dark mode, especially if I look at the screen in ambient light. But unfortunately, some of my client’s websites are having issues when I view them in dark mode; dark text on dark background.
I’ve tried few methods but seems this one is really work in my case:
Meta Tag
I add this meta data to the header tag:
<meta name="color-scheme" content="light only">
The meta tag above indicates that the color scheme is only supported light mode.
Another option is the scheme preferred in light mode, but it supports dark mode as well:
<meta name="color-scheme" content="light dark">
The first color scheme indicates the preferred one. Tested on Safari, Chrome, and Firefox.
Source:
Standard metadata names – HTML: HyperText Markup Language | MDN (mozilla.org)
Dark Mode Support in WebKit | WebKit
CSS
Another method is to use CSS:
:root {
color-scheme: light only;
}
The code above indicate that the styling only use the light version only.
source:
What Does Dark Mode’s “color-scheme” Actually Do? 🤔 | by Thomas Steiner | Dev Channel | Medium
Hopefully it helps!
5 Responses
This was so helpful. Thank you so much for posting!
You’re Welcome!
As of November of 2022, none of the solutions here work on the latest update on Chrome. Just to let you know
Thank you, I will review the code and research for new solution.
This also does not work on the BRAVE browser.