CSS color属性仅控制可继承的文本颜色，无法统一全局色调；真正实现需通过:root定义CSS变量（如--color-text）并显式引用，同时兼顾background-color、border-color等多属性协同。
color属性不能设置全局默认色调
color 是文本颜色的声明，只作用于它所应用的元素及其继承上下文，不是“全局色调控制器”。网页没有 CSS 原生的「默认色调」开关——所谓“全局色调”，实际是靠设计系统层面的约定+可维护的变量体系来实现的。
常见错误现象：body { color: #333; } 看似设了“全局文字色”，但一旦遇到 button、input、svg 或第三方组件，它们可能自带 color、fill 或内联样式，直接覆盖继承值；更别说伪元素（如 ::placeholder）默认根本不继承 color。
- 真正影响“整体色调感”的，往往是
background-color、border-color、fill、stroke、outline-color等多个属性的组合 -
color仅控制可继承的文本/光标/部分 SVG 文本颜色，不控制按钮背景、输入框边框、链接下划线等 - 想靠单个
color声明统一整站视觉基调，注定漏掉大量节点
用CSS自定义属性（CSS variables）模拟“色调主题”
把主色、辅色、文字层级色等抽成 --color-primary、--color-text-primary 这类自定义属性，挂载在 :root 上，再在各组件中按需引用，才是可控的“全局色调”实践方式。
使用场景：深色模式切换、品牌色一键替换、灰度调试、无障碍对比度调整。
立即学习“前端免费学习笔记（深入）”；
- 必须写在
:root或明确作用域选择器下，例如:root { --color-text: #212121; } - 所有用到的地方都得显式写
color: var(--color-text);，不会自动“感染”已有规则 - 注意 fallback 值写法：
color: var(--color-text, #333);，避免变量未定义时彻底失色 - 不要在
var()里嵌套另一个var()（如var(--color-text, var(--fallback))），部分旧版 Safari 不支持
code>:root {
--color-primary: #4285f4;
--color-text-primary: #212121;
--color-bg: #ffffff;
}
<p>h1, p, li {
color: var(--color-text-primary);
}</p><p>a {
color: var(--color-primary);
}</p><p>main {
background-color: var(--color-bg);
}为什么不能依赖继承链统一所有颜色
CSS 继承有明确边界。很多基础元素天生不继承 color，比如 input、textarea、button 的默认样式由 UA stylesheet 控制，它们的 color 是硬编码的，且优先级高于普通继承。
性能与兼容性影响：强行用 * { color: ... !important; } 覆盖，会导致样式计算开销上升，且破坏原生控件可访问性（如高对比度模式下系统配色被强制覆盖）。
-
input::placeholder默认不继承color，必须单独设color: var(--color-text-placeholder); -
svg中的text元素继承color，但path、circle默认用fill: currentColor才能联动，否则要手动赋值 - Firefox 对
button的color继承支持较晚（v96+），旧版本仍需重置
深色模式下 color 属性容易失效的几个点
当用 @media (prefers-color-scheme: dark) 切换主题时，只改 color 远不够。用户看到的“色调反差”崩坏，往往是因为其他颜色属性没同步更新。
常见错误现象：“开了深色模式，文字变白了，但按钮还是蓝底白字，背景却黑了，整个按钮看不见”。
- 必须同时重置
background-color、border-color、outline-color，否则出现文字与背景同色 -
color-scheme: light dark;要加在:root或html上，否则表单控件不会自动适配系统色板 - 不要只依赖媒体查询改变量，有些框架（如 Tailwind）需要配合
data-theme属性 + JS 切换才可靠 -
currentColor在深色模式下会随color变，但若某处用了固定色值（如fill: #000），就不会响应变化
实际项目里，“色调”从来不是某个属性的事。它是一组命名一致、作用范围清晰、有 fallback 且被各组件显式消费的变量集合。漏掉一个 svg 的 fill，或忘了重置 input 的 border-color，用户一眼就能感觉到“这里没跟上主题”。
