Featherweb Blog

Blog index

A dark mode...

I've been searching for the easiest way to add a dark mode or "night mode" to the site. Just like many people , I usually end my desk days with tearful, fatigued eyes. I already have "eye saver mode" on: my Samsung screen diminishes the amount of blue light being emitted. That helps and a nice byproduct is that everything on screen now looks warmer and more romantic... But even with that protection on, the amount of bright light coming from the screen seems to be too much for human eyes. That's why many people using a monitor professionally prefer it to be in dark mode.

So yesterday I looked at existing ways to add dark mode to a website. I compared several methods, they always involve the use of JavaScript, some are easy, some are getting complex. I did not find a solution that I really liked, so decided to call it a day and went to sleep.

This morning I woke up at 6 o'clock with a smile on my face: I could see my super dark mode method and it was JavaScript free! It only involved making a copy of the whole site and placing it in a new folder "d". In that folder, the only thing needing changing were some colors in the CSS file. A little button on top of the home page would open the home page in folder "d" and voila, the website in dark mode... By 6.10 am, that smile was gone as by then I remembered my vow never to take any idea serious, when it arrived before the first sip of coffee...

Hmm, some coffee later: I concluded it could work, but not so nicely. It would double the website's weight, it would double the amount of work and maintenance. Updating a page: there would be a real risk of forgetting to update its twin in folder "d"...the site would become obese exponentially fast. I quickly decided to forget the whole idea and to never speak to anyone about it!
At moments like this I've learned to take a deep breath and go back to square one: Duckduckgo, usually.

And that's how I discovered I had been having a tunnel vision, again..The first article I opened gave me exactly what I needed to know: all major browsers now offer a dark mode and have at least one add-on for it. The article concluded: "you cannot expect all websites to offer a light and a dark mode. Let the browser take care of that." I use Firefox and installed "Dark Reader" and "Midnight Lizard". Both are recommended by Firefox. I downloaded those two, to see which one I would prefer. (too early to say) Everything solved... I'm smiling again.