- Issue created by @enchufe
- 🇪🇸Spain enchufe Spain
It is not the perfect solution, but it is complicated to change the color of images defined as background in a
::before, often the colors#000000and#FFFFFFFFare set frontally, so if it detects these colors it applies an inversion filter (the same as when the menu item is active), thus keeping the color for the front color#000000and inverting the color to black for the front color#000000. - 🇺🇸United States trackleft2 Tucson, AZ 🇺🇸
As of the 4.0.22 release, the toolbar integration that was previously included in this module has been deprecated and will not receive further improvements.
That said, we are actively working to improve the implementation found in the environment_indicator_toolbar module.
One of the goals of the environment_indicator_toolbar module is to improve the performance of the toolbar indicator by relying solely on server-side rendering and CSS, with no JavaScript required.
There are a couple of issues open about this too if you are interested at:
- 🐛 Gin Compatibility: Account for "open" vertical toolbar Active
- 📌 Update module to use CSS variables instead of adding inline CSS. ActiveTo support this approach, we can take advantage of CSS’s ability to target
data-*attributes. This allows us to set environment-specific values as attributes on the<body>tag, which can then be used by CSS to dynamically apply styles.Here’s an example of how you might set these values in a
hook_preprocess_html()implementation:/** * Implements hook_preprocess_HOOK() for page templates. */ function environment_indicator_toolbar_preprocess_html(&$variables) { $active_environment = \Drupal::config('environment_indicator.indicator'); // Add data attribute for foreground color. $fg_color = strtolower($active_environment->get('fg_color') ?? ''); if (preg_match('/^#[0-9a-f]{6}$/i', $fg_color)) { $variables['attributes']['data-environment-indicator-fg'] = $fg_color; } // Optionally add more for background or other styles $bg_color = strtolower($active_environment->get('bg_color') ?? ''); if (preg_match('/^#[0-9a-f]{6}$/i', $bg_color)) { $variables['attributes']['data-environment-indicator-bg'] = $bg_color; } }Then, in your CSS, you can apply conditional styling based on those attributes:
body[data-environment-indicator-fg="#000000"] { --environment-indicator-icon-filter: invert(100%); } body[data-environment-indicator-fg="#ffffff"] { --environment-indicator-icon-filter: invert(0%); } .toolbar .toolbar-bar .toolbar-tab>.toolbar-icon.is-active::before { filter: var(--environment-indicator-icon-filter, none); }I hope that makes sense. We'd be happy to accept a merge request that satisfies these requirements.
- 🇮🇳India divyansh.gupta Jaipur
Since there hasn't been any update from @enchufe in a while, I'm picking this up and working on the issue.
- 🇮🇳India divyansh.gupta Jaipur
Now the admin toolbar menu is working as expected,
Please review!!