品牌色在暗黑模式下变灰发虚是因srgb与人眼感知脱节，需用oklch或color-mix重算感知亮度，并确保color-scheme声明、变量覆盖及第三方库主题控制权统一。
品牌色在暗黑模式下变灰、发虚、撞色，不是配色师偷懒，是sRGB坐标系和人眼感知脱节了
直接把亮色模式的#4A90E2照搬到暗色背景上，它大概率会“融化”——不是颜色值错了，而是这个十六进制在深色上下文里失去了原本的视觉重量。HSL里的L（Lightness）参数在明/暗背景下对人眼的刺激强度完全不同，同一hsl(210, 70%, 55%)在#ffffff上鲜明，在#121212上却像蒙了层雾。
更麻烦的是OLED屏：纯白文字边缘辉光、子像素混色让细线图标发虚，而品牌蓝这类中高频色在低亮度下本就敏感度下降，实测对比度常跌破4.5:1。这不是浏览器bug，是生理事实。
- 别用
filter: brightness()或opacity压暗品牌色——它只改数值，不重算感知亮度，越调越灰 - 优先改用
oklch(60% 0.32 250)：L通道直连人眼感知亮度，同一L值在明/暗模式下视觉分量更稳 - 若需兼容旧浏览器，用
color-mix(in srgb, var(--brand-primary) 70%, black 30%)替代硬调hsl()，保留色相骨架
@media (prefers-color-scheme: dark)里重定义品牌色变量，但没生效？检查这三处
写了@media (prefers-color-scheme: dark) { :root { --brand-primary: #2563eb; } }却没变色，大概率卡在这三个地方：
-
:root里必须先有基础定义：--brand-primary: #4A90E2;，否则媒体查询里的覆盖根本没目标可覆 - 所有使用处必须带fallback：
color: var(--brand-primary, #4A90E2);，否则变量未定义时直接退成透明或继承色 - 第三方组件库（如Element Plus、MUI）会自己往
:root写--el-color-primary等变量，和你的媒体查询冲突——得手动覆盖它的变量，或禁用其自动检测
第三方组件里的品牌色错乱，本质是主题控制权被抢了
系统切暗色，<el-button></el-button>还是亮蓝，不是你CSS漏写了，是Element Plus的JS在mounted阶段读取window.matchMedia并注入了自己的--el-color-primary，把你媒体查询里的--brand-primary完全绕开了。
- 方案一：在媒体查询里同步覆盖库变量，例如
@media (prefers-color-scheme: dark) { :root { --el-color-primary: #3b82f6; } } - 方案二：禁用库的自动探测，用
colorModeManager: false（Element Plus）或useSystemColorMode={false}（Chakra），全由你用data-theme="dark"统一控 - 方案三：别依赖
@media，改用JS同步读取window.matchMedia('(prefers-color-scheme: dark)').matches，首屏前就给加data-theme="dark"类，再用[data-theme="dark"] { --brand-primary: ... }覆盖——避开媒体查询执行时机问题
color-scheme: light dark缺失时，品牌色“看起来正常”，其实原生控件已失控
即使你所有div、button都按暗色重绘了，<input>边框、<select></select>下拉箭头、滚动条thumb仍可能是亮色——因为浏览器根本没“认出”你支持暗色模式。color-scheme才是开关，不是装饰。
- 必须显式声明：
:root { color-scheme: light dark; }或<meta name="color-scheme" content="light dark"> - 如果用CSS-in-JS（如Emotion），
<meta>必须是HTML静态注入，动态插入会被忽略 - 这个声明不改变你写的任何CSS，但它决定了原生控件是否启用系统级暗色渲染逻辑——品牌色要贯穿全界面，这点不能跳过
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
