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.
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.
