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.

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!

A quick update for those who are interested in this and may not have noticed: the latest versions of Kanboard, since 1.2.29, now have implemented an API for themes to support light vs dark vs automatic themes, and the “default” theme supports already supports it.

I had to search through the commit’s diffs to know for sure that the default theme supports it, and to figure out where the setting is located, so here it is in case it helps somebody: you won’t find it in the global/administrative settings, the setting is located in each user’s “Edit profile” page.

If Fred ever sees this post: thank you! This is amazing to have for people like me who work both in daylight and at night :smiling_face:

1 Like