Update module to use CSS variables instead of adding inline CSS via Javascript.

Thanks for creating the issue! For anyone interested, I put some of this in ✨ Support for core navigation experimental module Needs work .

Specifically:
https://git.drupalcode.org/issue/environment_indicator-3457688/-/blob/3457688-support-for-core/environment_indicator.module#L144

However, I stopped short of adding it for non-active environments. Was looking for more feedback!

@michaellander I think your idea definitely has merit and should be implemented across the board. +1 from me.

In my initial merge request I eliminate the need for Javascript to set the background-color and color style properties of the toolbar nav element.

This is done by adding a data-attribute to the toolbar nav element if the toolbar integration is enabled, and then targeting that element via CSS in a new toolbar specific library.

This fixes the Flash before js issue.
It also inadvertently fixes the issue where the toolbar is colored even if the toolbar integration is disabled.

Next we can work on how those switchers work.

Nice work! For the switchers, we could probably just use Drupal\Component\Utility\Html::getClass() on the environment label to generate a wrapper class name, and use that class to switch the variable values in a given context. Could always wrap the name generation in a utility function/method?

:root {
  --environment-indicator-bg-color: blue;
}
.environment-indicator--production {
  --environment-indicator-bg-color: red;
}
.environment-indicator--develop {
  --environment-indicator-bg-color: green;
}

Thoughts?

I was able to style the environment switchers using CSS variables in the most recent version of the open merge request.
I think there is still an issue with the non-toolbar version of the indicator's environment indicator switcher dropdown.