CSS变量实现LUT的核心限制是其无法进行逐像素颜色映射，仅能通过:root批量切换预设色值（如日间/夜间模式），本质是变量重赋值而非查表；真LUT需依赖filter: url(#lut)或WebGL。
什么是CSS变量实现LUT的核心限制
CSS变量本身不能直接做像素级颜色映射，filter: url(#lut) 或 WebGL 才是真LUT的载体；CSS变量只能模拟“有限调色预设切换”，比如日间/夜间/暖色/冷色模式。它不是逐像素查表，而是批量替换一组基础色值——本质是 :root 中定义的 --primary、--bg 等变量被整体重赋值。
用:root + color-scheme 切换LUT式主题
现代浏览器支持通过 color-scheme 触发系统级主题，并配合 @media (prefers-color-scheme: dark) 动态更新 CSS 变量。这不是“加载一张LUT图”，但效果接近：一次声明，全局响应。
常见错误是把变量写死在选择器里（如 .btn { --text: #fff; }），导致无法批量覆盖。正确做法是只在 :root 定义，再用属性继承或 var(--text) 引用：
:root {
--bg: #fff;
--text: #000;
--accent: #007bff;
}
@media (prefers-color-scheme: dark) {
:root {
--bg: #121212;
--text: #e0e0e0;
--accent: #4285f4;
}
}
- 必须用
:root而非html，确保最高优先级和继承性 -
color-scheme: light dark要加在:root上，否则媒体查询可能不触发 - 不要在变量值里用
rgb()或hsl()函数嵌套计算——CSS变量不解析函数，只存字符串
用custom-property-set 实现多套LUT预设（Chrome 115+）
Chrome 115起支持实验性特性 custom-property-set，允许定义命名变量集，再用 property-set 切换——这才是最接近“加载不同LUT配置文件”的方式。
立即学习“前端免费学习笔记（深入）”；
目前需开启 chrome://flags/#enable-experimental-web-platform-features，且仅限 Chromium。示例：
@property-set --summer-lut {
--bg: #fdf6e3;
--text: #657b83;
--accent: #b58900;
}
@property-set --ocean-lut {
--bg: #002b36;
--text: #839496;
--accent: #2aa198;
}
:root {
property-set: --summer-lut;
}
.theme-ocean { property-set: --ocean-lut; }
-
property-set是可继承的，所以只需在body或根容器上设置一次 - 不支持动态 JS 修改
property-set值（element.style.setProperty('property-set', '...')无效） - 当前无法 fallback 到 CSS 变量降级，务必搭配 JS 检测
CSS.supports('property-set', '...')
为什么不用filter: url(#svg-lut)？它才是真LUT
如果真要复现 Photoshop 的 .cube 文件效果，必须走 SVG <feColorMatrix> 或 Canvas/WebGL。CSS变量在这里只是“开关”，不是“引擎”。
典型 SVG LUT 写法（简化版）：
<svg xmlns="http://www.w3.org/2000/svg">
<filter id="lut">
<feColorMatrix type="matrix" values="
0.8 0.1 0.1 0 0
0.1 0.8 0.1 0 0
0.1 0.1 0.8 0 0
0 0 0 1 0" />
</filter>
</svg>
然后用 filter: url(#lut) 应用。但注意：
-
feColorMatrix是线性变换，无法表达非线性 LUT（如 sRGB → Rec.709 查找表） - 真 .cube 文件需 JS 解析后转为 WebGL shader，CSS 无能力读取二进制文件
- 移动端 Safari 对
filter: url()支持不稳定，常触发渲染异常
真正复杂的色彩映射，别硬套 CSS 变量——它只适合主题切换，不适合图像处理。该上 WebGL 的时候，就别在 :root 里卷矩阵了。
