Web client: Wishlist: Customized color scheme for staff client interface - default bootstrap can be difficult on the eyes

[Blake GH]

EG 3.0.2

Maybe there is a way to do this already but we have requests for the Web client to have different colors for the headings and background and text. At first it seemed like something we could do with the template toolkit overrides but these things are controlled with bootstrap.css.

Is this getting warm?

https://getbootstrap.com/docs/4.0/getting-started/theming/

Any discussion/guidance would be useful.

[Blake GH (bmagic)]

Looping back to this. Bump

[Jane Sandberg (sandbergja)]

It seems like this could be a really nice feature to have as a workstation setting. Not only would some staff members get really excited about being able to create their own color scheme, but different users have issues with different colors and color combos, and it would be great if they could adjust according to their individual needs.

I think it would be worth a discussion of what Evergreen branding has to remain and is not up for customization.

[Stephanie Leary (stephanieleary)]

I'm all in favor of dark and light color modes, as well as a couple of other accessibility-related choices. Bootstrap 5's color schemes are designed for this.

However, we would need to configure the project to use SASS instead of plain CSS. (Although there's no need to rewrite all the existing files.) It's not practical to maintain multiple color schemes without mixins.

[Stephanie Leary (stephanieleary)]

For roadmap planning purposes, here are the dominoes that have to fall into place for us to have a dark mode (or multiple color schemes).

Bootstrap 5.3 includes a color scheme toggle feature: https://getbootstrap.com/docs/5.3/customize/color-modes/

We will get 5.3 as part of ng-bootstrap 16, which depends on Angular 17. It's not out yet; here's the roadmap: https://github.com/ng-bootstrap/ng-bootstrap/milestone/134

In addition to those upgrades, we will need to move all our colors to variables (bug 2023449) and switch from CSS to Sass (bug 2030516).

[Christine Morgan (cmorgan-z)]

Confirmed based on comments.

[Stephanie Leary (stephanieleary)]

I have started a collab branch for this feature, based on my forced colors mode work (bug 2049657) and Steven Mayo's color variable definitions (bug 2023449).

Bootstrap 5.3's approach has evolved somewhat over the last few months, and while some things will be easier when we upgrade to that version, their current implementation is simple enough that we can implement it now with 5.2 and a little elbow grease. They were using a fancy custom toggle element before, but now it's just a dropdown menu that sets a data attribute on the HTML element.

This feature works by setting the :root CSS color-scheme property based on the toggle settings. If not set, or set to 'auto', we use color-scheme: light dark. This tells the browser to pick the appropriate color from any definitions that use the light-dark() function based on the user's OS-level color mode. If the toggle is set to one mode or the other, we set color-scheme to that value alone. Any colors that are not defined using light-dark() are consistent across both schemes.

For reference:
* Color variables based on the Bootstrap spectrum: https://getbootstrap.com/docs/5.3/customize/color/
* Bootstrap 5.3 toggle button (see the JavaScript section): https://getbootstrap.com/docs/5.3/customize/color-modes
* Functional variables defined using light-dark(), referencing the color variables https://web.dev/articles/light-dark

Since the color definitions are now over 200 lines long and extremely dense, I have moved them to a separate file. There is an inelegant section at the end of styles.css that redefines some built-in Bootstrap styles to use var(), since theirs use Sass and are effectively hard-coded in the generated CSS files we use. This will need to be cleaned up a bit; I may have stomped on some things in light mode unintentionally.

I have temporarily put in variables for *all* the Bootstrap color scales we use. When we're close to being finished with this, we should remove any shades we're not using. It's a fairly long list. For now, it's handy to have the entire spectrum available while we tweak things.

This does not yet incorporate any of the colors from the new branches on the 3.13 roadmap or the Acq line item status colors, which I am redoing separately. It also does not yet work in AngularJS--the toggle button appears in the nav bar, but the attributes on <html> are not set and I haven't yet copied the color stylesheet into the AngularJS directories. I don't work with AngularJS much, and I'd appreciate a hand getting this to work.

Collab branch here, contributions welcome:
https://git.evergreen-ils.org/?p=working/Evergreen.git;a=shortlog;h=refs/heads/collab/sleary/dark-mode

[Stephanie Leary (stephanieleary)]

Just realized that the commit history (which I deliberately left un-squashed) is so messy that it's not clear where this branch begins. The first relevant commit is be54c63a1979fc4db587bb21cb8c15cd44ec594e, which is borrowed from the SVG logo and high contrast mode support work in bug 2049657.