UX & accessibility suggestion: use darker shades for the metadata header in task details view mode while running the automatic dark theme

[nekohayo]

With the default/official Kanboard theme, the stylesheet automatically switches to dark mode when the Operating System requests it. It's fantastic, and I'm very grateful for this, it helps a lot with tired eyes at night.

There's just one glaring (so to speak) issue with it: in the details view page of an individual task, the metadata header area's background color is very much an outlier among the rest of that page. Kanboard's light pastel tasks cards color palette, while still fairly functional in the board's view (because the colors are used to distinguish between different task colors, and because they basically fill the screen), does not fit well within the individual task's details page, it just jumps at you and "blinds" you with its brightness relative to the rest:

P.S.: On that note, you can also notice in the screenshot above that the task title <h2> has a gray color that is too dark, even compared to the body text, so it is barely readable. It should be a bit brighter.

I can imagine three ways to solve this issue with the background color:

• Not using a colored background for the metadata header in that particular page, or;
• Using a bespoke dark variant of all the colors in the palette app-wide (i.e. the palette would have corresponding light/dark colors; this would have the advantage of also improving the board's view and other views, too), or;
• Just doing a CSS filter trick of some kind on that metadata header, maybe? (perhaps as an stopgap solution if solution no2 is too complex to be quickly implemented) by lowering the lightness (or brightness?) and saturation. I don't know if/how that translates exactly in CSS, but in case it helps picture how it could look like approximatively, here's a proof of concept with GIMP:

This simulation is not 100% accurate because I just did the color shift over the entire metadata area without taking care of the text, whereas in reality the text foreground color might need to be adapted. Also, the "dotted lines" border is just GIMP's selection area, not meant to be in Kanboard :)

There might be other possible tricks, such as this one that is used for photographic images.

---

This is not a showstopper, but would be a really nice accessibility enhancement for people using the app at night (or who have issues with bright light in general). It would also make the app's colors look more polished and intentional overall.

[nekohayo]

While I don't really have the technical knowledge to implement this myself, I tried git grepping around a little bit and it seems to me, if I am not mistaken, that Kanboard uses Bootstrap in some areas, though I am not sure which version.

I asked around a bit regarding the dual color palette idea, and people from the Tiki project pointed out to me that Bootstrap 5.3+ provides for that usecase, "with foreground and background color variables that are defined for light and dark color modes." So this could allow you to have a global CSS rule like:

some_class {
    color: var(--bs-secondary-color);
    background: var(--bs-secondary-bg);
}

...and then the theme provides definitions for these colors for light and dark contexts, to cover all instances of secondary background for a consistent color palette. So the set of variables is hardcoded (as a CSS rule) but each theme specifies what particular colors are used.