Your environments at a glance

Style every environment with colors or custom icons. Never lose track of where you are.

$ pnpm add env.style

Color each environment

Choose a color for each environment. The preview updates live as you edit.

import { withEnvStyles } from 'env.style'

export default withEnvStyles(nextConfig, {
  color: {
    development: '#3b82f6',
    preview: '#f59e0b',
    staging: '#6b7280',
  },
})

Use custom icons

Set a custom icon for any environment. Missing icons fall back to color tints.

import { withEnvStyles } from 'env.style'

export default withEnvStyles(nextConfig, {
  icon: {
    development: './acme-favicon.png',
    preview: './triangle-favicon.png',
    staging: './acme-favicon-1.png',
  },
})