Reflections on Optimizing Dark Mode
-
I really like the native dark mode integrated into Vivaldi.
However, this invasive dark mode has a few issues:
Complex effects (shadow effects, complex elements, borders, etc.) have a poor visual experience;
The color conversion algorithm is not suitable for specific color contrast web designs, resulting in a discordant mismatch.
Solution ideas:Disable CSS effects that have an impact, such as borders and shadows, simplifying the display of page elements;
The algorithm needs to have a universal fallback designed by designers, falling back to a unified color for related colors that are difficult to match or have low contrast.
Currently, the dark mode often affects the visual experience and lacks usability. So after trying it, I turned it off. -
You can't get a good result from code similar to this:
*:not(img) {filter: invert(1) !important;}
Try Dark Reader extension:
https://github.com/darkreader/darkreader
https://chromewebstore.google.com/detail/dark-reader/eimadpbcbfnmbkopoojfekhnkhdbieeh
Look at this post for more details:
-
One of Dark Reader's features is that you can set the color of the text and the background of the pages.
You can also define the font used in the pages.
What is the benefit of these 2 features?
That your eyes get used to the colors of the text, the background, and the font, and therefore in the end your eyes rest more, because it is not necessary an additional effort of the eyes to "recognize" each different font used by the pages, in different color environments.