色温滑块需用 input[type="range"] 配 min="2000" max="6500" value="4000" step="100"，结合 CSS 变量与 filter（如 sepia+brightness）模拟暖冷效果，无法原生实现物理色温调节。
怎么用 input[type="range"] 控制色温值
直接用滑块控制色温（比如 2000K–6500K），不需要 JS 就能显示初始值，但必须手动绑定到 CSS 变量或样式上才能生效。纯 HTML 滑块本身不改变页面颜色，它只是个输入控件。
-
input的min、max、value要和色温范围一致，比如min="2000"max="6500"value="4000" - 别用
step="100"以外的值——色温变化对人眼敏感，步进太大（如step="500"）会跳变明显，太小（step="1"）又没必要且拖动卡顿 - 滑块默认无标签，得配
label[for]或 aria-label，否则无障碍支持失效
为什么 filter: warm-filter() 不行而得用 filter: url(#warm)
没有 warm-filter() 这个 CSS 函数，浏览器根本不识别。真要调色温，得靠 SVG 滤镜或 CSS filter: adjust-hue() + brightness() 组合模拟，但效果有限——它调的是“视觉暖感”，不是物理色温。
- 真实色温调节本质是调整 RGB 白点，CSS 原生不提供
color-temperature属性 - 用
filter: sepia(0.3) brightness(0.95) saturate(1.1)是常见折中，但 2000K 和 6500K 之间无法线性映射 - 若需较准色温响应，必须用 Canvas 或 WebGL 渲染，HTML+CSS 只能做到“大致偏暖/偏冷”
prefers-color-scheme 和色温滑块冲突怎么办
系统级暗色模式（prefers-color-scheme: dark）和手动滑块是两套逻辑，不会自动同步。用户开了暗色模式又拉滑块到暖色，CSS 里没处理好就会覆盖或失效。
- 别把滑块逻辑写在
@media (prefers-color-scheme: dark)内部——那只会让滑块在暗色下才生效 - 正确做法：滑块始终生效，用 JS 把值写入
:root变量，再在各主题里引用该变量，例如background: hsl(var(--hue), 10%, 95%) - 记得监听
change和input两个事件：前者保证拖完才触发，后者实现实时预览（但别频繁重绘）
静态结构里怎么让滑块默认值“看起来像开了护眼模式”
用户一打开页面就该感知到暖色已启用，不能等他们动手拖。这靠三件事：HTML 的 value、CSS 的初始 filter、以及可选的 JS 初始化。
立即学习“前端免费学习笔记（深入）”；
- HTML 中设
value="3500"（比标准 6500K 明显偏暖），同时加aria-valuetext="护眼模式已启用" - CSS 里给根元素写默认滤镜：
:root { --warm-factor: 0.25; filter: brightness(0.98) sepia(var(--warm-factor)); } - 如果后续用 JS 更新，记得首次加载时也调一次更新函数，避免首屏闪回标准色温
色温不是非黑即白的开关，滑块值和视觉反馈之间没有标准换算表，每次调都要靠人眼校验——设备屏幕差异、环境光、甚至用户年龄都会影响判断。别迷信数值，信你的眼睛。
