Dark mode is all the rage now, and I’ve been using dark themes, since at least 2010, when I became aware that such a thing exists. I remember how joyful I was when IntelliJ IDEA created their own dark theme (darcula). I spent most of my time in that IDE and getting rid of that nasty white color was a great relief. I’m pretty excited that the number of apps and websites supporting dark mode grows at such a fast pace now, and I’ve decided to support dark mode for my websites and the Android app I’m working on now. Doing that can be a bit tricky but dev tools are getting better, and it actually turned out to be simpler than I expected.

Dark Mode for Web

There are many ways to skin a cat but I’m lazy and here is how I did it with Bootstrap:

<link rel="stylesheet" href="/css/main-light-e3d44f0b.css">
<link rel="stylesheet" href="/css/main-dark-5de66a3d.css" media="(prefers-color-scheme: dark)">

Essentially, I just generated two different CSS files with different Bootstrap color definitions. That way, it’s easy to implement dark mode without changing the existing styles. Those styles are not aware that comething has changed, which is quite good. Maybe dark mode will be supported natively in newer versions of Bootstrap and, when it happens, it will be really easy to undo this “hack” and implement dark mode support without generating two different CSS files. We have to be aware that prefers-color-scheme: dark does not stop browsers from loading the “light” CSS variants (although they won’t use them) which is obviously not optimal.

Dark Mode for Android

It’s really easy to add dark mode support on Android, especially if you’re using Material Design UI components. The only thing that needs to be done is to create a values-night resource folder and override all of the main colors. You may also need to override a few styles but the overall amount of changes is small and it’s a laughable price to pay for the satisfaction many dark mode lovers would get if you implement it.