Improvements when using Gin theme

Using the patch mentioned in #4, can confirm that everything works with Drupal 9.3.0 and that the additional spacing is indeed quite nice.

+1 to the patch, it's much easier to understand the enviroment.

+1 to this. Works perfect with 4.x-dev branch.

FYI, you can also change the entire Gin color scheme in a settings.local.php file along with (or instead of) this patch. For example, we use something like this for our local dev environments:

$config['environment_indicator.indicator']['bg_color'] = '#114502';
$config['environment_indicator.indicator']['name'] = 'Local';

To also change the Gin color scheme locally, you could add this:

$config['gin.settings']['preset_accent_color'] = 'custom';
$config['gin.settings']['accent_color'] = '#114502';

The preset_accent_color color options are:

• blue
• light_blue
• dark_purple
• purple
• teal
• green
• pink
• red
• orange
• yellow
• neutral
• custom

So, in production, you could use the red scheme like this:

$config['gin.settings']['preset_accent_color'] = 'red';

While on a staging server, you could use blue:

$config['gin.settings']['preset_accent_color'] = 'blue';

Sorry to say the problem is back with latest Gin 3.x-dev version

I've created a MR that integrates the solution from patch #4 and slightly modifies the logic. The backgroundColor joins the text and will be only used when GIN is not active:

        // Only apply text and background color color if not using gin_toolbar
        if (!$('body').hasClass('gin--vertical-toolbar') && !$('body').hasClass('gin--horizontal-toolbar')) {
          $('#toolbar-bar', context).css('background-color', settings.environmentIndicator.bgColor);
          $('#toolbar-bar .toolbar-item, #toolbar-bar .toolbar-item a', context).css('color', settings.environmentIndicator.fgColor);
        }

This works as a quick-and-easy solution.

For a perfect solution, I think including all of this logic inside "environment-indicator.js" should be avoided. If every admin theme will need to add its own lines of code inside that file order to support their quirks, we will end up with an unmaintainable file prone to bugs.

Also, checking the body classes ($('body').hasClass('gin--vertical-toolbar') && !$('body').hasClass('gin--horizontal-toolbar')) is prone to regressions as gin maintaniners could change them anytime.

I think a better solution could be to check for the admin theme name on a hook_preprocess_page or hook_attachments_alter or similar and conditionally load a custom library (environment_indicator/gin) that will include just the CSS and JS needed for Gin to work with Environment Indicator. This way, we could:

1. 1 - Avoid loading unneded javascript on non-gin themes, as they will not use the library at all
2. 2 - Move some overrides to the CSS, where they belong, instead of solving everything on the JS side

Thanks @idiaz.roncero!
I can confirm that the new MR5 works just fine with the latest releases of Gin, Gin Toolbar and Environment Indicator.
Adding a patch file in case that the MR would get updated.