env.style

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.

next.config.ts
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.

next.config.ts
import { withEnvStyles } from 'env.style'

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

Tune the details

next.config.ts

export default withEnvStyles(nextConfig, {

});

colorPartial<Record<string, string>>

Set tint colors by environment. Unset environments use the defaults.

Stop working in the wrong tab

One dependency. One wrapper. Every environment is easy to spot.

$ pnpm add env.style