Last Updated: February 12, 2021 | Reading Time: < 1 minute
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!