Environment Indicator
Adds visual cues to indicate which environment you are currently viewing (Development, Staging, Production, etc.).
environment_indicator
Install
composer require 'drupal/environment_indicator:^4.0'
Overview
Environment Indicator helps developers and site administrators stay aware of which environment they are working in by adding visual cues throughout the site interface. This is especially useful when managing multiple copies of a site such as Development, Staging, and Production environments.
The module displays a colored bar at the top of the page with the environment name and optional release version information. It can also change the background color of Drupal's admin toolbar and add a colored overlay to the site's favicon. These visual indicators help prevent accidental changes to production sites by making the current environment immediately obvious.
Environment Indicator also provides an environment switcher feature that allows users to quickly jump to the same page on a different environment (e.g., from staging to production). Each environment's colors and URL can be configured as a switchable destination.
Configuration is typically done via settings.local.php, allowing each environment to have its own color scheme without storing environment-specific settings in the database. This follows Drupal best practices for environment-specific configuration.
Features
- Displays a colored indicator bar at the top of the page showing the environment name
- Changes toolbar background and text color to match the environment (requires Toolbar Integration submodule)
- Adds a colored overlay to the site's favicon using Tinycon library
- Displays version/release identifier from multiple sources (Environment Indicator state, Deployment Identifier, or Drupal version)
- Environment Switcher functionality to quickly navigate to the same page on different environments
- Configurable foreground and background colors for each environment
- Dynamic permissions for individual environment indicators
- Full integration with Gin admin theme including horizontal and vertical toolbar modes
- Configuration via settings.local.php for environment-specific settings outside version control
Use Cases
Multi-environment Development Workflow
When working with Development, Staging, and Production environments, configure each with distinct 'stoplight' colors: green for Development (changes are safe), yellow for Staging (exercise caution), and red for Production (be very careful). This visual system immediately alerts developers to which environment they're viewing, preventing accidental changes to production.
Quick Environment Switching
Configure environment switcher entities for all your environments. When viewing content on staging and need to check the same page on production, click the environment indicator to reveal the switcher menu and jump directly to the same path on the target environment.
Release Version Tracking
Display the current deployment version in the indicator using Drush: drush state:set environment_indicator.current_release v1.2.44. This helps team members verify which version is deployed to each environment without checking server files or deployment logs.
Client Presentation Mode
Use the Environment Indicator UI submodule to configure environment settings through the admin interface. This is useful when presenting to clients on staging environments where you want them to see a clear 'Staging' indicator without requiring PHP file access.
Tips
- Use different colored favicon overlays to distinguish browser tabs when multiple environments are open simultaneously
- Set the current release via deployment scripts: drush state:set environment_indicator.current_release $GIT_TAG
- Export environment switcher entities via config management so all environments have links to switch between each other
- For accessibility, ensure foreground and background colors have sufficient contrast ratio (WCAG 2.0 AA requires 4.5:1 for normal text)
- Consider using the UI submodule on environments where you cannot edit settings.local.php directly
Technical Details
Admin Pages 4
/admin/config/development/environment-indicator
Configure global settings for the Environment Indicator module, including favicon overlay and version identifier source.
/admin/config/development/environment-indicator/switcher
Manage environment switcher destinations. Create entries for each environment you want to be able to switch to. Each environment can have its own name, URL, and color scheme.
/admin/config/development/environment-indicator/switcher/add
Create a new environment switcher entry to allow jumping to another environment.
/admin/config/development/environment-indicator/current
Configure the current environment's display settings through the admin UI instead of settings.local.php. Provided by the Environment Indicator UI submodule.
Permissions 4
Troubleshooting 5
Ensure the user has the 'See all environment indicators' permission. Check that environment_indicator.indicator config has a 'name' value set either via settings.local.php or the UI submodule.
Verify settings.local.php is being loaded by uncommenting the include lines at the bottom of settings.php. Check for PHP syntax errors using: php -l settings.local.php
Enable the Environment Indicator - Toolbar Integration submodule (environment_indicator_toolbar). The main module only shows a colored bar; toolbar integration requires the separate submodule.
Grant the 'View environment indicator current release' permission to the user role. Verify the version identifier source is set correctly in settings and the source has a value (e.g., state set via Drush, deployment_identifier in settings.php, etc.)
Ensure 'Show favicon' is enabled in the module settings. Check that the Tinycon library is loading properly in browser developer tools. Some browsers may block favicon modifications.
Security Notes 3
- Environment switcher URLs should use HTTPS to prevent information leakage about internal environment URLs
- Consider restricting 'See all environment indicators' permission to authenticated users only to avoid revealing environment information to anonymous visitors
- The 'administer environment indicator settings' permission allows full configuration access and should be restricted to trusted administrators