Come together with the global Drupal community in Rotterdam, 28 Sept – 1 Oct 2026. Sessions, contribution, connection, and Early Bird savings until 8 June.Problem/Motivation
In recent versions of the module (not just the alpha), there were some changes to the "is-active" CSS which is causing massive contrast conflicts - but not just "contrast" because it's treating it as black, hard-coded, but our environment indicator background color is black!
Steps to reproduce
Using Claro admin theme, Admin Toolbar, and the Environment Indicator Toolbar module. Set environment indicator background to black, foreground to white. Notice the .toolbar-item.is-active color is black.
Proposed resolution
Don't hard-code the color: #000 in toolbar.theme.css, use the CSS variable.
I'm not sure if this should be included in one of the other open issues, because it is CSS related but I didn't see anything specifically calling out the black.
| Comment | File | Size | Author |
|---|---|---|---|
| #4 | Screenshot 2025-07-29 at 4.24.00 PM.png | 60.54 KB | jennypanighetti |
| Screenshot 2025-07-29 at 12.27.19 PM.png | 72.96 KB | jennypanighetti |
Issue fork environment_indicator-3538625
Show commands
Start within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
changes
Comments
Comment #2
jennypanighetti commentedComment #3
trackleft2Hi @jennypanighetti,
Thank you for opening this issue, the hard-coded color setting actually lives in the Claro theme, however as you can see in this file https://git.drupalcode.org/project/drupal/-/blob/11.x/core/themes/claro/... and your screenshot, the background color is also set there, and the environment_indicator module overrides that.
With that being said, I wonder if we could do something similar for the color that this module is doing for background color.
Comment #4
jennypanighetti commentedThanks @trackleft2, you're right that the black is hard-coded in claro's toolbar.theme.css. However, the background-color with the variable is set in the toolbar.css CSS, but color is not specified. The color property is only specified in toolbar.css when
a:not(.is-active).Comment #6
trackleft2OK, I've updated the CSS in https://git.drupalcode.org/project/environment_indicator/-/merge_request.... Let me know what you think.
This build also has https://mr136-nkwkojheiiaxhjrcmu386j2ip3ssuwcy.tugboatqa.com/
username: admin
password: admin
Comment #7
jennypanighetti commentedPatch applies and my color is not lost! Thank you! :)
Comment #8
trackleft2Comment #10
trackleft2