CSS变量+JS是唯一可靠方案，因dialog::backdrop不参与样式计算、不响应prefers-color-scheme媒体查询，需通过document.documentElement动态设置--backdrop-bg并配合requestAnimationFrame触发重绘。
dialog::backdrop 无法直接响应 @media (prefers-color-scheme)，所以用 CSS 变量是目前唯一可靠、可跨浏览器控制深浅色主题下遮罩颜色的方式。
为什么不能直接用 prefers-color-scheme
浏览器对 dialog::backdrop 的实现是隔离的：它不参与常规样式计算流程，@media 查询不会触发它的重绘。即使你写了：
dialog::backdrop { background: #0004; }
@media (prefers-color-scheme: dark) {
dialog::backdrop { background: #fff8; }
}这段 CSS 在 Safari 和旧版 Chrome 中根本不会生效——DevTools 里能看到规则被解析，但 backdrop 层始终用初始值渲染。
用 CSS 变量 + JS 切换才是正解
核心思路是把颜色值抽成自定义属性，在 JS 中根据系统主题或用户偏好动态更新，再让 dialog::backdrop 绑定该变量。
立即学习“前端免费学习笔记（深入）”；
- 先在 :root 定义默认值：
:root { --backdrop-bg: rgba(0, 0, 0, 0.4); } - 然后写 backdrop 样式：
dialog::backdrop { background: var(--backdrop-bg); } - 监听主题变化：
matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => { document.documentElement.style.setProperty('--backdrop-bg', e.matches ? 'rgba(255, 255, 255, 0.7)' : 'rgba(0, 0, 0, 0.4)'); }); - 关键一步：不要在
showModal()后立刻改变量——backdrop 渲染有延迟，稳妥做法是加requestAnimationFrame：
dialog.showModal();
requestAnimationFrame(() => {
document.documentElement.style.setProperty('--backdrop-bg', newValue);
});容易踩的坑
常见错误不是写错 CSS，而是时机或作用域问题：
-
document.body.style.setProperty→ 错！必须用document.documentElement，否则变量不可被 :root 下的伪元素读取 - 在
DOMContentLoaded之前就执行 theme 检测 → 可能拿不到初始matchMedia状态，建议用window.matchMedia?.('(prefers-color-scheme: dark)')?.matches初始化一次 - 多个 dialog 共用同一变量 → 没问题，但如果你需要每个弹窗独立配色，就得用 class 或 data-* 属性配合更细粒度的选择器，例如
.dialog-light::backdrop { background: var(--light-backdrop, #fff8); } - Safari 16.3 及更早版本不支持
dialog::backdrop→ 必须先检测：if (!('showModal' in HTMLDialogElement.prototype))，不支持时 fallback 到手动插入遮罩层
真正难的不是怎么写变量，而是得记住：backdrop 是浏览器在 dialog 外部“画出来”的一层，它不继承、不响应媒体查询、不自动重绘——你每次想动它，都得主动推一次新值，且确保它已存在。
