Suggestion for the main theme (& 3rd-parties): automatic dark/light mode (using the browser's "prefers-color-scheme: dark" CSS mediaqueries)

I realize that Frédéric isn’t really developing new features (vs just essential/compatibility/security maintenance, unless stylesheet tweaking counts as compatibility…), so I’m throwing this idea out here in the forums in case someone reading this someday contributes a patch for the main kanboard theme (or their own 3rd-party themes).


I often use Kanboard late at night. It burns my eyes. Yet I would still want it to be light during the day for use in a very bright sunlit room.

Therefore I would like the interface to automatically switch to a dark variant of its stylesheet at nighttime. My operating system (Fedora Linux with GNOME) does the switch for me everyday at the correct times, and my web browser (Firefox) follows suit, telling webpages’ CSS mediaqueries that dark is now “preferred” or not. I believe MacOS and Windows have also been able to do this for a while now.

Note that I don’t want a manual dark/light switch toggle in the UI, I would want it to happen automatically “based on browser/OS setting”. You can detect this condition using this simple piece of CSS, for example:

@media (prefers-color-scheme: dark) { blah blah }


GitHub, Matrix, Twitter/LinkedIn/FB, Discourse (the forums you’re on!), and even my own personal website are prime examples of this automatic support working really well :wink:

it would be a cake walk to add that option to customizer. could even be toggled on off per user.

For the option yes (if you actually want an option; personally I would just go with automated behavior by default that matches the user browser’s stated preference/intent), but each theme (especially, ideally, the main/official theme) would still need to be designed in both and dark variant, I wouldn’t expect the app to blanket-apply this to themes because only the theme knows how it’s supposed to look…

you already can add custom css in your kanboard instance’s application settins.
?controller=ConfigController&action=application

this might work just out of the box

Yeah sure I could spend time trying to hack stuff on my side with tacked-on custom CSS, but:

  1. that would be less clean than a “designed solution that is part of the theme(s)”;
  2. that wouldn’t help other users… the reason why I’m bringing up this discussion here is to advocate for a “works automagically, by default” solution so that everyone can benefit from it, not just me :slight_smile:

If I had enough time and focus I could theoretically make such an improvement to the main theme (presuming it’s only CSS instead of needing to touch PHP), but the big question for me would be whether @Fred would be interested in merging that if it was proposed for the main theme? In any case, I don’t foresee having enough spare time to be doing that myself in the coming months (if ever, knowing how I can be very detail/quality-oriented…), so if someone reading this wants to do it, please don’t wait for me, feel free to go ahead and beat me to it!