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.

[Steven Mayo (stmayo)]

So excited about this!!!!!

Had to pull it down right after seeing it in UI interest group. One thing I noticed - the :host blocks on the holdings and grid components don't work, so those are currently unstyled.
The first round of googling makes me think that's because they have ViewEncapsulation.None set in their component definitions. I don't know what else that does, so I'm not touching it yet.

[Stephanie Leary (stephanieleary)]

oh, good catch! Does :root work in those components?

[Steven Mayo (stmayo)]

Unfortunately not.

[Stephanie Leary (stephanieleary)]

Ah, we just use the selector name when the component styles are not encapsulated. Pushed an update!

[Stephanie Leary (stephanieleary)]

Steven Mayo and I have been batting the collab branch back and forth all summer, and at last we have a squashed dark mode branch ready for you all to look at (9 commits):
https://git.evergreen-ils.org/?p=working/Evergreen.git;a=shortlog;h=refs/heads/user/sleary/LP1740529-dark_mode_rebase

There are dependency changes involved, so this branch won't play well with others on the larger testing servers. Jason Boyer has put it on Butternut for us. Thanks, Jason!
https://butternut.evergreencatalog.com/eg2/en-US/staff
admin / demo123

If you normally use dark mode on your computer, you should see darkness as soon as you visit the login page. If not, you can use the brightness icon in the nav bar to switch modes manually.

This is not totally complete; we have a short list of things we know need more work. Help us make that list longer!

TODO:
- Angular doesn't respond immediately if you change your OS dark/light mode (AngularJS does)
- Disabled combobox list items are too dark
- MARC editor in light mode has lost its pizzazz
- (your suggestions here)

Huge thanks to Steven, who did a ton of work to get all our colors defined as variables throughout both interfaces, got the AngularJS mode working, and also did the heavy lifting yesterday to get this several-months-old branch rebased against main.

[Susan Morrison (smorrison425)]

Here are a few things I found. Please excuse my ignorance on any of the terminology, or if any of these are repeating what's on the current to-do list. I think most of these are based on whether the interface is in Angular or AngularJS.

AngularJS interfaces:
- Grid dropdowns in some interfaces, like in Patron Search, display in light mode. Another example is the Checkin Modifiers dropdown on the Check In screen.
- Popup windows are very light; examples: User Buckets > New Bucket and Hold Groups > New.
- Calendars are a bit hard to see; example: Local Administration > Transit List

Angular interfaces:
- Print preview displays in a light gray instead of in black; example: Hold Pull List > Print Full List; Library Settings Editor > Print Full Grid.
- Expand/Collapse arrows are not appearing; examples: Reports; Permissions Groups. The Holdings View arrows are fine, though.

General contrast notes:

- The header of the popup windows are a little hard to see. Not sure if the contrast could be increased.
- The keys in the Keyboard Shortcuts when accessed through the hamburger menu aren't visible.
- It's difficult to tell which row is selected in a grid.

Here is a link to a Google Drive folder with a bunch of screenshots: https://drive.google.com/drive/folders/1BPjE_dgkKXohMMt6DXQdOI3sqBgDDKn7?usp=sharing

[Steven Mayo (stmayo)]

I've got a branch addressing ~most~ of your feedback, Susan.
https://git.evergreen-ils.org/?p=working/Evergreen.git;a=shortlog;h=refs/heads/user/smayo/lp1740529-dark_mode_rebase

Things changed:
-Angular should update immediately when you change your OS color mode if you're set to 'auto'
-Angular expand/collapse arrows are visible in dark mode
-Keyboard Shortcut keys are visible in dark mode
-Popup window (which are apparently called 'modals') headers are dark text on a light blue background in dark mode
-Grid selected row color is slightly brighter blue in dark mode
-AngularJS grid dropdowns are dark in dark mode
-AngularJS popup windows are dark in dark mode
-AngularJS calendars are dark in dark mode.

TODO:
- Disabled combobox list items are too dark
- MARC editor in light mode has lost its pizzazz
- Print preview displays in a light gray instead of in black; example: Hold Pull List > Print Full List; Library Settings Editor > Print Full Grid.
This one is tricky - The document is using some of bootstrap's grays when trying to print if the document is in dark mode. We CAN add css stylings that only take effect while printing to override Bootstrap's grays, but then we'd have to redefine every color again, which is redundant with the work we've already done. I think the best fix is to always print in light mode, so we guarantee the style we're used to, no matter what we're printing.

The problem is light mode isn't sticking right. I've tried giving the print-div data-bs-theme="light" so it ignores the base document, but that doesn't work. I've tried setting the page itself into light mode for a moment while printing, but that's visible as long as the print dialog is open and very distracting.
The least offensive method I've found so far is to remove the data-bs-theme from the document entirely while printing, but that still leaves some of the bootstrap specific elements briefly going the color of your OS while the print dialog is up. If someone had a light mode computer and Evergreen in dark mode they'd get partially flashbanged, and it would look very ugly.
Still though - progress!

[Steven Mayo (stmayo)]

And of course, less than a week after I say that printing in light mode is hard, I find out it's super simple. Isn't learning a silly thing.
https://git.evergreen-ils.org/?p=working/Evergreen.git;a=shortlog;h=refs/heads/user/smayo/lp1740529-dark_mode_rebase
Things Changed:
- Added css rule to force Evergreen to always print in light mode. (The print preview will be black instead of faded gray)
- Fixed loss of styling for Angular grid right click menus.

TODO:
- Disabled combobox list items are too dark
- MARC editor in light mode has lost its pizzazz

[Jane Sandberg (sandbergja)]

Amazing work Steven and Stephanie, and many thanks to all testers along the way. Based on our testing in today's collaborative code review, I've squashed this and pushed it to main so that everyone can enjoy it in 3.14.

Terran kindly opened a few follow up bugs: bug 2080884, bug 2080885, bug 2080886, and bug 2080887. We didn't consider them to be release blockers, but it would be nice to get some of those finishing touches in before 3.14.0.