Decision Environment Indicator

accepted

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.

Decision

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

Environment colors will be configured as follows:

Environment	Colors	Suggested `fg_color`	Suggested `bg_color`
Live	White on Red	`#fff`	█ `#e7131a`
Staging	White on Orange	`#fff`	█ `#b85c00`
Development	White on Green	`#fff`	█ `#307b24`
Branch Preview	White on Blue	`#fff`	█ `#20688C`
Local	White on Grey	`#fff`	█ `#505050`

Consequences

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

<?php

// Environment indicator.
// See: https://pantheon.io/docs/environment-indicator#d8tab-id
if (isset($_ENV['PANTHEON_ENVIRONMENT'])) {
  switch ($_ENV['PANTHEON_ENVIRONMENT']) {
    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';
      break;

    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';
      break;

    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';
      break;

    default:
      $config['environment_indicator.indicator']['name'] = 'Multidev';
      // Blue background.
      $config['environment_indicator.indicator']['bg_color'] = '##20688C';
      // White text.
      $config['environment_indicator.indicator']['fg_color'] = '#fff';
      break;
  }
}

// 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';
}