Convert any HTML to Dark Mode

Issue

I'm building an app where I display emails on it. I have no control over those emails, so I don't know what their CSS looks like.

Is there any "easy" way to automatically switch the whole HTML to dark mode, whenever possible?

Just like Gmail does when your device has Dark Mode enabled.

I'm using React Native and Expo, displaying the HTML through WebView, in case it's of any help. Thanks!

Solution

I personally tend to respect the email's CSS and keep them as-is.

There's no easy way to get perfect result, since the "dark mode" is not well defined concept, and depends on the actual CSS of specific content.

But a rough solution is quite cheap. Just apply the CSS filter: invert(100%) to whole HTML.

@media (prefers-color-scheme: dark) {
  html {
    filter: invert(100%);
  }

  /* double apply invert filter to cancel out effect on images */
  img {
    filter: invert(100%);
  }
}

Answered By - hackape