Comment 6 for bug 1740529
Revision history for this message
| Stephanie Leary (stephanieleary) wrote | #6 |
© 2004
Canonical Ltd.
•
Terms of use
•
Data privacy
•
Contact Launchpad Support
•
Blog
•
Careers
•
System status
•
bbfa235
(Get the code!)
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:/
* Bootstrap 5.3 toggle button (see the JavaScript section): https:/
* Functional variables defined using light-dark(), referencing the color variables https:/
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:/