Convert Your Website to Dark Mode with CSS filter

Have you ever been in the position where your screen brightness is so low that it becomes difficult to see what’s on the screen? If this sounds like you, then dark mode might be something worth looking into. Dark mode is a feature that can be enabled for devices with OLED screens. It changes the display of light and dark colors, which allows users to adjust their display settings based on how much light they want coming from their screen.

Dark mode has become the new desired visual trend for both mobile apps and websites. Dark mode is the best way to keep your eyes from getting burnt out after a long day of coding and reading tutorials. I never imagined that I would be one of those people who like to browse the web, but it turns out dark mode is so much easier on my eyes.

There is a simple hack in CSS to make a fake Dark Mode. We can use CSS’ filter property to create dark mode.

filter: invert(1);

If you are using a light-themed website, you can invert the colors of the whole document with the 1 value. It will be more comfortable for your eyes.

Here is how this site looks like with that one line of code

There are some developers who might think that this is a long-term solution, but it’s not. This is a quick fix if you need the Dark Mode in short term. A website needs to be carefully designed with coordinated colors.

Leave a Comment

Your email address will not be published. Required fields are marked *

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close