Easy Web Site Dark Mode Detection and Automatic Switching

You may of noticed that dark mode is all the thing these days, and you may also of noticed that not only is it expected to be supported in apps by users, but it’s also nice to see Web sites do the same thing so we do not go blind in the middle of the night when that massive White page opens up.

So how do you easily support dark mode on the Web?

Well, it is far easier than you might think, assuming that you are familiar with at least a few CSS statements.

You can add a CSS Media Query that will check for dark mode and then perform any overrides you have in the code. So start by defining the query

Now that we have that in place, we can put inside the curly braces anything we want to change when dark mode is detected. So in the case of one of my Web sites, CompileSwift.com I have this

If you are familiar with CSS you will know what’s going on here, I change the background color for the entire site to Black and the text to White in the body tag.

I then change the color of links to cornflowerblue and then I override some classes that I have defined for various components on the site.

The Wrap

See, I told you it was pretty straight forward to create a dark mode for the Web didn’t I?