Quick and dirty dark mode

To provide basic dark mode support for the blog, I added the following lines of CSS:

@media (prefers-color-scheme: dark) {
    html { filter: invert(1) hue-rotate(180deg); }
    img, video, iframe { filter: invert(1) hue-rotate(180deg); }
}

If the browser/OS has dark mode enabled it will invert the colors and rotate the hue to achieve the dark mode effect.
The whole operation is applied a second time on images, videos and frames to avoid that they have their colors distorted.

You can get a preview by using the developer tools of your browser to enable dark mode :-)

The code is inspired by the post here, and then extended to provide a CSS-only solution by leveraging the color-scheme CSS property.

blog comments powered by Disqus