Skip to main content

"If you’re looking to implement dark mode on your web site and you don’t have a huge amount of time on your hands to craft a separate stylesheet, CSS filters are your friend." 😃

Implementing dark mode in a handful of lines of CSS with CSS filters

I finally got round to implementing dark mode for this site (the cobbler’s children have no shoes and all that…) Here’s all the CSS I had to add: /* Dark mode. */ @media (prefers-color-scheme: dark) { /* Set an off-white - 1/2
background and invert all elements without altering their hue. */ html { background: #eee; filter: invert(100%) hue-rotate(180deg); } /* Optical adjustments. */ /* Do not invert media (revert the invert). */ img, video, iframe { filter: invert(100%) hue-rotate(180deg); } /* Improve contrast on icons. @media - 2/2