env.style | Environment favicons<br>Your environments at a glance<br>Style every environment with colors or custom icons. Never lose track of where you are.<br>svg]:size-full" aria-hidden="true">pnpmsvg]:size-full" aria-hidden="true">yarnsvg]:size-full" aria-hidden="true">npmsvg]:size-full" aria-hidden="true">bun<br>CopiedCopy<br>$ pnpm add env.style

Color each environment<br>Choose a color for each environment. The preview updates live as you edit.

Acme IncAcme IncAcme IncAcme Inc

next.config.ts<br>Next.jsCopiedCopy

import { withEnvStyles } from 'env.style'

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

Use custom icons<br>Set a custom icon for any environment. Missing icons fall back to color tints.

Acme IncAcme IncAcme IncAcme Inc

next.config.ts<br>Next.jsCopiedCopy

import { withEnvStyles } from 'env.style'

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

Acme IncAcme IncAcme IncAcme Inc

Tune the details<br>next.config.tsNext.js<br>export default withEnvStyles(nextConfig, {<br>enabled: true, environment: 'staging', color: { staging: '#ff00ff' }, icon: { staging: './flask.svg' }, excludeColors: ['#e94435'],});

enabledboolean, default trueTurn env.style off for a specific environment or CI job.

environmentstringSet the environment yourself. Otherwise env.style uses ENV_STYLES_ENV, then Vercel, then the framework default.

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

iconstring | Partial>Use one icon everywhere, or set icons per environment. Missing icons fall back to tinting.

excludeColorsstring[]Keep brand colors untouched while tinting.

Stop working in the wrong tab<br>One dependency. One wrapper. Every environment is easy to spot.<br>svg]:size-full" aria-hidden="true">pnpmsvg]:size-full" aria-hidden="true">yarnsvg]:size-full" aria-hidden="true">npmsvg]:size-full" aria-hidden="true">bun<br>CopiedCopy<br>$ pnpm add env.style