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
Updating Gin to 5.0.11 makes the color for the environment not working anymore.
Release => https://www.drupal.org/project/gin/releases/5.0.11
Issue => https://www.drupal.org/project/gin/issues/3560487
Code change:
:is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) .admin-toolbar__logo svg rect {
fill: var(--gin-color-primary);
}
:is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) .admin-toolbar__logo svg path {
/* fill: var(--gin-bg-app); */
}
Steps to reproduce
- Update to Gin 5.0.11 or higher
- See the color not being applied anymore (overwritten)
Proposed resolution
Fix the issue.
Remaining tasks
Create MR with fixes
User interface changes
None.
API changes
None.
Data model changes
None.
| Comment | File | Size | Author |
|---|---|---|---|
| #8 | gin-change-on-drupal-10-6-5-with-claro.png | 305.26 KB | dtfabio |
| #8 | gin-change-on-drupal-10-3-14-with-gin.png | 351.01 KB | dtfabio |
| #5 | navigation_extra-3573191-not-working.png | 315.21 KB | tim-diels |
Issue fork navigation_extra-3573191
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 #4
nickolajFixed by using `:is()` with an ID selector to match Gin 5.0.11+ CSS specificity in `navigation_extra_version.css`, ensuring environment color overrides are no longer defeated by Gin's `#extra-specificity-hack` pattern.
Comment #5
tim-dielsTo me this is still not working.
We are on Drupal 11.2.10 and Gin 5.0.12
Comment #6
tim-dielsI'm not sure how you tested this change @nickolaj but I could not see how your code change would have worked. Feel free to explain to me if i'm doing a wrong assumption and change as I'm not a frontend developer. But also you should have looked further in the document to see what was extra there that maybe would not have worked.
I adjusted the code and made sure we don't break BC and fix everything inside the file and not only a small part.
Comment #7
tim-dielsTried letting this work with both Claro and Gin.
Comment #8
dtfabio commentedHi Tim,
I have tested the change on four different instances.
Drupal core versions: 10.3.14, 10.6.3, 11.2.10 and 11.3.3
PHP versions: 8.3.30 (10.3) and 8.4.18 for the newer core versions.
Database version: MariaDB 11.8.6 and MySQL 8.4.5
On the Drupal 11 sites, the code worked as expected for both Claro and Gin, but on the Drupal 10 versions, the styling does not come through for Claro, or only the colour and not the background colour is taken for the Gin theme.
Specifically for the section of the navigation block below, it is not styled as expected.
Both Drupal 10 sites use version 4.1.3 of the Gin admin theme, which may help to determine the reason why this happens.
Greetings,
Fabio
Comment #9
tim-dielsAdded D10 support.
Comment #11
tim-diels