根本原因是未用CSS变量统一控制文本色或媒体查询漏写label范围；浏览器不会自动适配，硬编码颜色如#333在暗色下仍保持灰黑，必须通过var(--text)调用并确保选择器覆盖有效。
label 文本颜色为什么在暗黑模式下没变
根本原因不是 label 标签本身有问题，而是你没用 CSS 变量统一控制文本色，或者媒体查询里漏写了对 label 的影响范围。浏览器不会自动给 label “加暗色”，它只按你写的 color 值渲染——如果这个值是硬编码的 #333，那无论系统多暗，它都保持灰黑。
常见错误现象：label 在暗色页面里文字发灰看不清、与 input 边框颜色不协调、焦点状态（:focus-within）下无视觉反馈。
- 所有文本相关属性（
color、caret-color、placeholder伪元素）必须通过var(--text)调用，不能写死 -
@media (prefers-color-scheme: dark)内只需重定义变量，比如:root { --text: #e0e0e0; }，别在媒体查询里单独写label { color: #e0e0e0; } - 确保
label没被更高优先级选择器覆盖，例如第三方 UI 库的.form-control label可能压过了你的label规则
label 与关联表单控件的颜色联动怎么做
label 很少孤立存在，它通常和 input、textarea、select 配合使用。用户点击 label 时，焦点会落到关联控件上，此时两者的颜色逻辑必须一致，否则会产生割裂感。
使用场景：表单验证失败时，label 和 input 都要变红；深色模式下，label 文字和 input 边框都要用同一套灰阶。
立即学习“前端免费学习笔记（深入）”；
- 把颜色变量挂到
:root，例如--border: #ccc; --text: #333; --error: #d32f2f; - 在
@media (prefers-color-scheme: dark)中批量更新：:root { --border: #444; --text: #e0e0e0; --error: #f44336; } - 为
label和表单控件共用变量：label, input, select, textarea { color: var(--text); border-color: var(--border); } - 避免用
label[for="xxx"]这类高权重选择器覆盖全局规则，容易导致维护困难
meta color-scheme 对 label 有影响吗
没有。<meta name="color-scheme" content="light dark"> 不控制 label 的文字颜色，它只影响浏览器原生控件的 UI 风格，比如 input 的边框圆角、滚动条颜色、焦点环样式、select 下拉箭头等。
也就是说，即使你写了正确的 meta 标签，label 还是白底黑字或黑底白字——完全取决于你 CSS 里怎么定义它的 color。
-
meta必须放在<head>最早位置，动态 JS 插入无效 - content 值必须是
"light dark"（空格分隔），只写"dark"会被 Chrome/Firefox 忽略 - 若想让
label在暗色模式下更柔和，可额外加opacity: 0.87，但要用变量控制：--label-opacity: 0.87;，方便在亮色模式下调回1
手动切换主题后 label 颜色不更新怎么办
典型表现：点了“切换暗色”按钮，input 变暗了，但 label 还是浅色——大概率是你只改了 data-theme 属性，但 CSS 选择器没覆盖到 label，或者变量没随主题重新计算。
关键点在于：CSS 变量作用域是全局的，但生效前提是选择器匹配且未被覆盖。
- 确保主题切换时，
html[data-theme="dark"]选择器确实存在，且优先级高于其他样式（比如不要写成.theme-dark label，而应写html[data-theme="dark"] label） - 不要在 JS 里直接操作
label.style.color，这会破坏变量体系，且无法响应后续系统偏好变化 - 检查 DevTools 的 Computed 面板，看
label的color值是否真的来自var(--text)，还是被某个!important或内联样式锁死了 - iOS Safari 无痕模式下
localStorage不可用，若 fallback 到matchMedia但没触发重绘，需手动调用document.documentElement.setAttribute("data-theme", ...)强制刷新
aria-labelledby 或 aria-describedby）在暗色模式下对对比度的要求更高。WCAG AA 级要求文本与背景对比度 ≥ 4.5:1，而很多“暗色灰”（如 #424242）配黑色背景根本达不到——别为了好看牺牲可读性。 
