CSS变量更新后页面颜色不变，是因为浏览器仅在样式计算阶段读取一次var()，后续不自动重绘；正确解法是通过class或data-theme切换触发整页样式树重建，而非仅调用setProperty。
不是 Safari 17 的 bug，而是变量更新后浏览器没触发样式重计算——style.setProperty() 改了值，但依赖它的 background-color: var(--bg) 不会自动重绘，这是所有现代浏览器的共性行为，Safari 只是表现得更“保守”。
为什么 setProperty 后页面颜色不变
浏览器在样式计算阶段读取一次 var(--bg)，之后除非元素属性显式变化（比如 class 切换、display 改变），否则不会重新求值。直接调用 document.documentElement.style.setProperty('--bg', '#121212') 只改了变量存储，没告诉 CSS 引擎“该重跑一遍了”。
- 常见现象：JS 执行完 setProperty，DevTools 里能看到变量值已更新，但按钮背景、文字颜色毫无反应
- 错误归因：以为是 Safari 解析慢或兼容性问题，其实 Chrome/Firefox 同样不重绘
- 真解法不是等“渲染完成”，而是主动触发重解析：加一个无视觉影响的 class 切换，比如
document.documentElement.classList.toggle('theme-refresh')
data-theme 切换比 setProperty 更可靠
用 dataset.theme = 'dark' 配合 [data-theme="dark"] :root 规则，本质是靠选择器权重变化强制整页样式树重建，比反复 setProperty 更稳，尤其在 Safari 17 的 WebKit 渲染路径下。
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- 必须把 class 或 data 属性加在
document.documentElement上，写在body上无效 - 规则要写成
html[data-theme="dark"] :root { --bg: #121212; }，不能漏掉:root，否则变量作用域不对 - 如果用了
color-scheme: light dark，记得同步设置document.documentElement.style.colorScheme = 'dark'，否则原生控件（如input、滚动条）不响应
Safari 17 对伪元素和动画里的 var() 仍有隐性限制
即使在 Safari 17，::before、@keyframes 中的 var(--x) 仍可能被延迟一帧读取，或首次渲染时取空值——这不是报错，是 WebKit 对变量求值时机的保守策略。
立即学习“前端免费学习笔记（深入）”；
- 伪元素必须加兜底：
.card::before { background: #f0f0f0; background: var(--card-bg, #f0f0f0); } - @keyframes 里禁用
var()：Safari 17 虽支持，但动画启动瞬间若变量未就绪，整段关键帧会被跳过，表现为“不动” - 需要 JS 控制动画参数时，改用
element.animate()API，它在 Safari 12.1+ 全链路可控
真正容易被忽略的是：Safari 不等 JS 设置完变量就走完首屏样式计算，所以靠 setProperty + setTimeout 模拟“等渲染”的做法，在 Safari 17 下大概率失败；必须用 class/data-theme 切换这种声明式方式，把重绘控制权交还给 CSS 引擎。
