DEV Community

with Pyaar
with Pyaar

Posted on

Go Dark mode with CSS Filter

There are a plethora of plugins to use and JS to write to achieve dark mode on your website. A straightforward and single-layered way of doing this is by adding the CSS rule filter:(invert). An example is below.

<section> This is some text. </section>

<a href = "#'> a Link </a>
Enter fullscreen mode Exit fullscreen mode
html { 
       background: black;
       filter: invert(1); /* This will flip the contents on the page, from black to its inverted color*/
}

a {
    color: green; /* This will render as a light pink or purple*/
}

Enter fullscreen mode Exit fullscreen mode

To have the link render as green, add the hue-rotate()function to the filter property.


html { 
       background: black;
       filter: invert(1) hue-rotate(180deg); /* This will flip the color back to its original value.*/
}
Enter fullscreen mode Exit fullscreen mode

Inspiration for this post is by Dev Ed on YT https://www.youtube.com/watch?v=CxC925yUxSI&feature=youtu.be
Timestamp: 17:29

Happy Coding! ๐Ÿ˜Š

Top comments (14)

Collapse
 
astrit profile image
Astrit • Edited

I would not encourage any one to do this specially at this level, on component level maybe.
I get it is a neat simple trick but what is this really doing ?

The idea behind dark-mode is to provide a comfortable experience, even saving* some energy but mostly is for the experience and this method is just a no go.

I would strongly suggest to use CSS variables & prefers-color-scheme in order to achieve dark-mode.

Just imagine some sites who have images and doing this.
Dark mode with filter

Collapse
 
withpyaar profile image
with Pyaar • Edited

The beginning of the post states that itโ€™s a straightforward or quick and single-layered way to achieve dark mode. Itโ€™s meant to be built upon.

Collapse
 
ajmalhassan profile image
Ajmal Hassan • Edited

Honestly, No! Inverting colors using filter isn't a good base to build upon under any circumstances.

Thread Thread
 
ionline247 profile image
Matthew Bramer

When am I to put the lime in the coconut?

Thread Thread
 
withpyaar profile image
with Pyaar

๐Ÿ˜‚๐Ÿ˜ฉ

Collapse
 
ionline247 profile image
Matthew Bramer

When I get bored, I like to open up the dev tools and use this:

developer.mozilla.org/en-US/docs/W...

We all should feel free to fiddle and let the browser be our canvas. โ˜บ

Collapse
 
withpyaar profile image
with Pyaar

Exactly, some people donโ€™t see that right away. I think my next post will be about creative coding ๐Ÿ˜Š

Collapse
 
ionline247 profile image
Matthew Bramer

That would be cool! There's so many options now to create digital art using JavaScript and CSS. I say title it as: HTML6 Boilerplate; so everyone knows it's now the new standard way of doing things.

Thread Thread
 
withpyaar profile image
with Pyaar

I think Iโ€™ll do that. I know all the head honchos at the W3C, so Iโ€™ll breeze past recommendations in no time. Youโ€™ve inspired me and evolved the future of the web in one day. Wow. a hero...

Thread Thread
 
ionline247 profile image
Matthew Bramer

I'm waiting for the comment: A practical example use case for filter: invert(1) hue-rotate(180deg); is...

main.barf {
  im-on-my-phone: totes not writing css;
}
Collapse
 
iamschulz profile image
Daniel 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.

Collapse
 
withpyaar profile image
with Pyaar

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.

Collapse
 
airbr profile image
Morgan Murrah

i was looking for a few line solution to flip the color scheme on pinboard.in . This was exactly what I was looking for. Fun times !

Collapse
 
sed_sajjadhosinianzade_a profile image
sed sajjad hosinianzade

Thanks a lot, you really helped me out!