Discussion on: Go Dark mode with CSS Filter

iamschulz profile image
I am Schulz

This is cool as a party trick or a little experiment, but has some drawbacks. Some of which can be improved, but also some of which are by design.
You invert all the colors including, images, videos, etc. In order to preserve critical elements, you could expand your invert-selector like

html:not(img):not(video):not(.all-color-critical-elements) { 
       background: black;
       filter: invert(1) hue-rotate(180deg);

Also, while you hue-rotate your accents, brand colors, etc. back to their original hue, their lightness is reduced. This may be a good thing for most elements, but can get you into trouble with your marketing department. I'd include brand colors into .all-color-critical-elements.

What can't be fixed easily though is the hierarchy of lightness on elements. As an example, look at the DEV header. In its default light theme, it's slightly lighter than the content, but has a search field that's darker than its own background. It creates a hierarchy in which it is less important than the main content and below the search field. By simply inverting this, you'd put jank that hierarchy up.
This is why most dark modes use a set of variables that are simply being changed to new values.

jamiepo profile image
Jamie Author

That function doesn’t just have to have the intention to change a site to dark mode in the way we see it being used today. Its potential goes beyond a party trick especially in design or creating digital art.