Toggle dark mode automatically per system setting

[rugk]

There is a relatively new CSS media query feature called prefers-color-scheme. It allows you to detect whether the system/user wants a dark website, so you can adjust your CSS.

Anyway, it would be great, if you could make use of it.

BTW: I also have a Firefox add-on called “Dark Mode Website Switcher” (source code) that you can use to toggle this setting in Firefox directly – without needing to change the system option. Maybe that could be helpful e.g. for debugging.

I may look into implementing this by myself, if that is okay.

[elrido]

You can - the reason I went with the manual switch is that at the time Firefox would not detect dark mode of the UI on the window manager automatically on Linux, so I wanted the option to enable it. Also it was a ready made plugin for bootstrap 4 and I like giving users choices instead of forcing things on them. The widget will remember its state across session an keep showing you the dark mode if you previously selected it.

[rugk]

Yeah, I have nothing against such a widget, it certainly won't hurt. Maybe the default state should then just be determined by the preference. Also, this is then likely a contribution for that plugin we can make. 😃

[elrido]

That sounds like a great idea! I think the upstream project is this one: https://github.com/coliff/dark-mode-switch

[rugk]

Thanks, and yeah, here is the upstream issue: coliff/dark-mode-switch#2
I've already commented there…

[elrido]

FYI, I implemented the idea of https://github.com/coliff/dark-mode-switch/pull/20/files but ensured the user set preference takes priority.