CSS无color-temperature属性，需用filter组合（如brightness/contrast/hue-rotate）或CSS变量分层控制色温预设，并优先响应用户手动选择再fallback系统偏好。
怎么用 color-temperature 模拟色温调节（实际没有这个 CSS 属性）
HTML 本身不支持色温调节，color-temperature 不是标准 CSS 属性，浏览器完全不识别。所谓“日出/日落/夜间模式”的色温效果，必须靠手动控制 filter: url()、filter: custom()（已废弃）、或更现实的 filter: brightness() contrast() saturate() hue-rotate() 组合模拟，或者用 CSS 变量 + background/color 分层覆盖。
- 别在 CSS 里写
color-temperature: 4500K——会静默失效，开发者工具里都看不到解析痕迹 - 真要逼近暖黄光（如日落），常用
filter: brightness(0.92) saturate(0.85) hue-rotate(-8deg)，数值需实机调试，不同屏幕偏差大 - 纯靠
filter调色温，文字可读性容易下降，尤其浅灰字配暖背景时，建议同步调color和background-color
用 CSS custom properties 实现预设切换（推荐方案）
把“日出/日落/夜间”抽象成几组颜色变量，比硬编码 filter 更可控、易维护、支持动画。
- 定义三套
:root变量，例如：--bg-base、--text-primary、--accent-warm - 用
class="mode-sunrise"/"mode-sunset"/"mode-night"切换根节点 class，触发变量重载 - 避免用 JS 直接改
style.setProperty，否则无法利用 CSS 过渡动画；class 切换 +transition: background-color 0.3s, color 0.3s更稳 - 注意：CSS 变量不继承 filter，所以如果用了全局
filter，得在每个 mode class 里重复声明整套 filter 值
matchMedia('(prefers-color-scheme: dark)') 怎么和色温预设联动
系统级暗色模式只分明/暗两态，不提供色温维度。想自动匹配“夜间模式=低色温”，得自己加判断逻辑。
- 监听
matchMedia变化后，不能直接设document.documentElement.classList.add('mode-night')就完事——用户可能手动切回“日落”预设，需保留优先级：用户手动选择 > 系统偏好 - 建议用 localStorage 记录用户最后主动选的模式，初始化时优先读它；仅当未设置时，才 fallback 到
prefers-color-scheme -
matchMedia不触发色温变化，它只告诉你“系统倾向暗色”，具体怎么映射成 5000K 还是 3500K，全靠你定规则
为什么不用 WebkitAppearance 或 color-scheme 控制色温
color-scheme: light dark 仅影响表单控件、滚动条等 UA 样式，默认值，不改变页面主体色温；-webkit-appearance 是渲染行为开关，和颜色无关。
- 写了
color-scheme: dark，不会让h1自动变暖黄，它只告诉浏览器：“请把input[type=range]的滑块画成暗色” - 试图用
color-scheme: normal或自定义值来绕过限制？无效——该属性只接受light、dark、normal（等价于未声明）三个字面量 - 真正影响色温感知的，是页面中
background-color、color、box-shadow的色相与饱和度组合，不是某个 magic 属性
色温不是开关，是连续谱；预设只是几个采样点。用户看到的“暖”或“冷”，取决于当前设备白点、环境光、甚至他刚看过的网页。做预设时，别只盯着数字（比如 6500K），先在 iPhone、MacBook、安卓平板上各看三分钟，再调。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
