DecisionEnvironment Indicator


All Drupal websites our team works on have one or more environments. At a minimum, there will be a production and a local development environment. Most projects will have production, staging, development preview, and local environments. Developers and QA often access different environments at the same time. Since making content or configuration changes on the wrong environment can have unintended consequences, it is important to be able to distinguish environments easily.


All client sites will have the Environment Indicator module installed and configured.

Environment colors will be configured as follows:

EnvironmentColorsSuggested fg_colorSuggested bg_color
LiveWhite on Red#fff#e7131a
StagingWhite on Orange#fff#b85c00
DevelopmentWhite on Green#fff#307b24
Branch PreviewWhite on Purple#fff#905
LocalWhite on Grey#fff#505050


Errors will be reduced as all screenshots by authenticated users will indicate the environment. Standard environment colors may conflict with existing site configuration, so each team will need to decide if colors should be changed on existing sites or not. Sites with blue / green deployments will need to determine their own color scheme. Teams deviating from the recommended colours will need to check the accessibility of their custom colors.

Example Implementation


// Environment indicator.
// See:
    case 'dev':
      $config['environment_indicator.indicator']['name'] = 'Dev';
      // Green-ish background.
      $config['environment_indicator.indicator']['bg_color'] = '#307b24';
      // White text.
      $config['environment_indicator.indicator']['fg_color'] = '#fff';

    case 'test':
      $config['environment_indicator.indicator']['name'] = 'Test';
      // Orange-ish background.
      $config['environment_indicator.indicator']['bg_color'] = '#b85c00';
      // White text.
      $config['environment_indicator.indicator']['fg_color'] = '#fff';

    case 'live':
      $config['environment_indicator.indicator']['name'] = 'Live';
      // Red-ish background.
      $config['environment_indicator.indicator']['bg_color'] = '#e7131a';
      // White text.
      $config['environment_indicator.indicator']['fg_color'] = '#fff';

      $config['environment_indicator.indicator']['name'] = 'Multidev';
      // Purple-ish background.
      $config['environment_indicator.indicator']['bg_color'] = '#905';
      // White text.
      $config['environment_indicator.indicator']['fg_color'] = '#fff';

// Replace this with however locals are detected.
if (getenv('IS_DDEV_PROJECT') == 'true') {
  $config['environment_indicator.indicator']['name'] = 'Local';
  // Grey-ish background.
  $config['environment_indicator.indicator']['bg_color'] = '#505050';
  // White text.
  $config['environment_indicator.indicator']['fg_color'] = '#fff';

Andrew Berry, David Burns, Mateu Aguiló Bosch

Decided on