[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-92241":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":8,"language":10,"languages":8,"totalLinesOfCode":8,"stars":11,"forks":12,"watchers":13,"openIssues":12,"contributorsCount":14,"subscribersCount":14,"size":14,"stars1d":14,"stars7d":14,"stars30d":15,"stars90d":14,"forks30d":14,"starsTrendScore":14,"compositeScore":16,"rankGlobal":8,"rankLanguage":8,"license":17,"archived":18,"fork":18,"defaultBranch":19,"hasWiki":20,"hasPages":18,"topics":21,"createdAt":8,"pushedAt":8,"updatedAt":22,"readmeContent":23,"aiSummary":24,"trendingCount":14,"starSnapshotCount":14,"syncStatus":25,"lastSyncTime":26,"discoverSource":27},92241,"env.style","QuadDepo\u002Fenv.style","QuadDepo",null,"https:\u002F\u002Fenv.style","TypeScript",172,3,55,0,66,45.41,"MIT License",false,"main",true,[],"2026-07-22 04:02:05","\u003Cpicture>\n  \u003Csource media=\"(prefers-color-scheme: dark)\" srcset=\"https:\u002F\u002Fshieldcn.dev\u002Fheader\u002Ftransparent.svg?title=env.style&subtitle=Environment-tinted+favicons+for+Next.js+and+Vite&align=left&border=false&font=geist-mono&mode=dark\" \u002F>\n  \u003Cimg alt=\"env.style — Environment-tinted favicons for Next.js and Vite\" src=\"https:\u002F\u002Fshieldcn.dev\u002Fheader\u002Ftransparent.svg?title=env.style&subtitle=Environment-tinted+favicons+for+Next.js+and+Vite&align=left&border=false&font=geist-mono&mode=light\" \u002F>\n\u003C\u002Fpicture>\n\n\u003Cp align=\"center\">\n  \u003Ca href=\"https:\u002F\u002Fgithub.com\u002FQuadDepo\u002Fenv.style\u002Fstargazers\">\u003Cimg alt=\"GitHub stars\" src=\"https:\u002F\u002Fshieldcn.dev\u002Fgithub\u002Fstars\u002FQuadDepo\u002Fenv.style.svg?variant=secondary&size=xs\" \u002F>\u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Fgithub.com\u002FQuadDepo\u002Fenv.style\u002Fblob\u002Fmain\u002FLICENSE\">\u003Cimg alt=\"License\" src=\"https:\u002F\u002Fshieldcn.dev\u002Fgithub\u002Flicense\u002FQuadDepo\u002Fenv.style.svg?variant=secondary&size=xs\" \u002F>\u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Fgithub.com\u002FQuadDepo\u002Fenv.style\u002Fcommits\u002Fmain\">\u003Cimg alt=\"Last commit\" src=\"https:\u002F\u002Fshieldcn.dev\u002Fgithub\u002Flast-commit\u002FQuadDepo\u002Fenv.style.svg?variant=secondary&size=xs\" \u002F>\u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Fenv.style\">\u003Cimg alt=\"Website\" src=\"https:\u002F\u002Fshieldcn.dev\u002Fbadge\u002Fvisit-env.style.svg?variant=secondary&size=xs&logo=lu:Globe&color=000000\" \u002F>\u003C\u002Fa>\n\u003C\u002Fp>\n\nFive browser tabs, all the same favicon: dev, preview, production.. and you keep\nediting the wrong one. **env.style** tints your existing favicon per environment at build\ntime, Vercel-style: same mark, different color. Production is never touched.\n\n\u003Cp align=\"center\">\n  \u003Cstrong>\u003Ca href=\"https:\u002F\u002Fenv.style\">env.style\u003C\u002Fa> · \u003Ca href=\".\u002Fexamples\">Examples\u003C\u002Fa>\u003C\u002Fstrong>\n\u003C\u002Fp>\n\n## Install\n\n```bash\npnpm add env.style\n# or: npm install env.style\n```\n\n## Usage\n\n### Next.js\n\n```ts\n\u002F\u002F next.config.ts\nimport { withEnvStyles } from 'env.style'\n\nexport default withEnvStyles(nextConfig)\n```\n\nThat's the only change needed. No layout edits, no manual favicon files.\n\n### Vite\n\n```ts\n\u002F\u002F vite.config.ts\nimport { defineConfig } from 'vite'\nimport react from '@vitejs\u002Fplugin-react'\nimport { envStyle } from 'env.style\u002Fvite'\n\nexport default defineConfig({\n  plugins: [react(), envStyle()],\n})\n```\n\n## Default colors\n\n| environment   | color              |\n|---------------|--------------------|\n| development   | `#3b82f6` blue     |\n| preview       | `#f59e0b` amber    |\n| anything else | `#6b7280` gray     |\n| production    | never touched      |\n\nEnvironment names are plain strings: whatever detection yields (e.g.\n`ENV_STYLES_ENV=staging`, or a Vercel custom environment via `VERCEL_TARGET_ENV`) is\nused as the `color` key. Any env without a color gets the gray fallback — except\n`production`, which is never touched.\n\n## Options\n\n- `enabled?: boolean` — kill switch for the whole tool. Default `true`.\n- `color?: Partial\u003CRecord\u003Cstring, string>>` — override the tint color per environment.\n- `environment?: string` — force the environment instead of detecting it.\n- `excludeColors?: string[]` — keep pixels near these colors untinted (e.g. white\n  backgrounds or marks in an icon that shouldn't shift).\n- `colorOpacity?: number` — env color opacity from `0` (original icon) to `1`\n  (solid environment color). Default `0.75`.\n- `icon?: string | Partial\u003CRecord\u003Cstring, string>>` — path to a ready-made icon, or a\n  per-environment map of paths (e.g. `{ staging: 'staging-icon.png' }`), served as-is\n  for styled environments. Tinting and `excludeColors` are skipped entirely. An env\n  missing from the map falls back to normal tinting.\n\n```ts\nexport default withEnvStyles(nextConfig, {\n  color: { staging: '#ff00ff' },\n  excludeColors: ['#fff'],\n  colorOpacity: 0.35,\n})\n```\n\n## How it works\n\n- Detects the environment: `environment` option → `ENV_STYLES_ENV` → `VERCEL_TARGET_ENV`\n  → `VERCEL_ENV`. If none is set, Next.js falls back to `NODE_ENV`; Vite falls back to\n  the command (dev server = development, `vite build` = production — set\n  `ENV_STYLES_ENV` to tint a build).\n- Tints your existing favicon with `sharp` and writes it to `public\u002F__envstyle\u002F`, which\n  self-gitignores.\n- Next.js: serves the tinted icon at your normal favicon URLs via `beforeFiles`\n  rewrites, with `Cache-Control: no-store` so stale icons don't linger after switching\n  envs.\n- Vite: rewrites `\u003Clink rel=\"icon\">` tags in `index.html` to point at the tinted icon\n  (injecting one if none exists) and serves it with `no-store` from dev-server\n  middleware.\n\n## Known limits\n\n- Environment is resolved at build time — a single build promoted across environments\n  won't restyle.\n- CDN-only favicons aren't intercepted; on Next.js, custom metadata `icons` paths\n  aren't either.\n- Icon source changes need a dev server or build restart to pick up.\n\n## Development\n\n- `pnpm test` — unit tests (vitest); `pnpm typecheck` — TypeScript.\n- `pnpm test:visual` — fetches real brand favicons and writes a before\u002Fafter tint\n  gallery to `.tmp\u002Fvisual\u002Findex.html` (needs network; Node >= 22.18 to run the `.ts`\n  script directly).\n- Runnable examples: `cd examples\u002Fnextjs && pnpm install && pnpm dev` (same for\n  `examples\u002Fvite-react`) — the tab favicon should render tinted green.\n\n## Contributors\n\n\u003Ca href=\"https:\u002F\u002Fgithub.com\u002FQuadDepo\u002Fenv.style\u002Fgraphs\u002Fcontributors\">\n  \u003Cimg alt=\"Contributors\" src=\"https:\u002F\u002Fshieldcn.dev\u002Fcontributors\u002FQuadDepo\u002Fenv.style.svg?limit=12&theme=zinc&bg=transparent&border=false&title=false\" \u002F>\n\u003C\u002Fa>\n\n## License\n\nMIT\n","env.style 是一个为 Next.js 和 Vite 项目在构建时自动按环境（如 development、preview）动态着色 favicon 的轻量工具。它通过 CSS 滤镜或 SVG 颜色替换技术，在不修改原始图标文件的前提下，为不同部署环境生成带颜色标识的 favicon，生产环境默认保持原图不变。支持自定义环境名映射与颜色配置，并提供启用开关和色彩排除功能。适用于多环境并行开发与部署场景，帮助开发者快速区分浏览器标签页中的不同环境实例。",2,"2026-07-08 04:29:55","CREATED_QUERY"]