htmlcssdarkmode

Force light mode when browser is set to dark mode

When the browser is set to dark mode a filter is set which makes my sections darker. I don't want that to happen. I tried forcing light mode with:

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

but this doesn't work on all browsers. I don't know how to work around or fix this.

Dark mode on: Dark mode on

Dark mode off: Dark mode off

Solution

  • I tried this, and it worked for me:

    html {
    color-scheme: light;
  }
  
  @media (prefers-color-scheme: dark) {
    html {
      background-color: white;
      color: black;
    }
}