How to Prevent the Website Color Change in Dark Mode

Share This Post

Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp
Fast Hosting as low as $2 per month

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!

Any idea? Fill the comment below

This site uses Akismet to reduce spam. Learn how your comment data is processed.

More To Explore