Dark Mode for your Website

Monday, September 27, 2021 at 7:08 PM UTC

The amount of websites that adapt to your computer's preferred visual mode is increasing. Today I added this useful feature to my website.

If you use an operating system that changes colors and visuals according to the time of the day to make reading at night time more comfortable then you already benefit from this. I am using macOS and iOS and both can adapt their color scheme to the daylights or to a certain time slot. It's just better for your eyes at night time to not have to see light or too bright content.

It's quite easy with modern browsers as CSS already offers a @media directive for it:

@media (prefers-color-scheme: dark) {
...
}

You just have to add a new section like the above to your website's CSS and define different color options for your elements on your page. Just check out what the dark.css on this page contains and you will get the idea. Smile







Leave a comment right here