Last update: February 12, 2021 | Reading time: < 1 minute

I love dark mode, especially if I’m looking at the screen in ambient light. But unfortunately, some of my clients’ websites are having issues when I view them in dark mode; dark text on dark background.

I tried a few methods but this one really seems to work in my case:

Meta tag

I add this metadata to the header tag:

<meta name="color-scheme" content="light only">

The meta tag above indicates that the color palette is only supported in light mode.

Another option is the light mode preferred scheme, but it also supports dark mode:

<meta name="color-scheme" content="light dark">

The first color palette indicates which one you prefer. Tested on Safari, Chrome and Firefox.

Source:
Standard Metadata Names – HTML: HyperText Markup Language | MDN (mozilla.org)
Dark mode support in WebKit | Web Kit

CSS

Another method is to use CSS:

:root {
         color-scheme: light only;
       }

The code above indicates that the style only uses the lightweight version.

source:
What does the dark mode “color scheme” actually do? 🤔 | by Thomas Steiner | Development channel | AVERAGE

Hope this helps!