Support dark mode for further energy savings

[tomayac]

First: awesome idea and initiative, I was made aware through an article in Süddeutsche Zeitung. Second, studies by the Google Android team have shown that dark mode reduces power consumption up to 60% on AMOLED screens.

Here is a diff from the current (unminified) CSS to a new proposed dark mode CSS that proposes 19 changes, so that the site would look like in the screenshot below:

I realize that the original CSS file uses SCSS (that I am not familiar with), but I hope with the diff the changes are straight-forward enough to translate.

The idea would be to apply a prefers-color-scheme dependent loading strategy, so that only the corresponding CSS would be loaded. Happy to help with that.

[tomayac]

Needless to say, the energy savings would be client side, not server side, but still fits the overall theme.

[Dorson]

Coded a flexible and working solution for the Dark Mode on websites.

Try demo in here: https://dorson.github.io/CSS-Dark-Mode-and-color-switch/

Works with basic CSS variables + short JavaScript.

Can be used inside existing CSS style files. Can be used to define multiple color themes in one CSS file, or any other possible dynamic CSS style setting options like text size, etc... No user logins or profiles or tracking required.

Let's save our eyesight at night, and battery too :-)

Have fun using my code !

[rscmbbng]

Darkmode will require a more thoughtful redesign of the theme, which currently we don't have the resources for but we are open to suggestions!

[nels83]

A redesign of the theme is a good idea ! I'm currently testing WebP instead of dithered PNG and it takes a lot of time using currently available html files. I read you converted all articles to Markdown, are these articles available somewhere ? It would be useful for testing the design/plugin changes.

Congrats on all of your work so far !