原生 alert/confirm/prompt 无法样式化，因其是系统级阻塞组件，不参与 CSSOM 和 DOM 流程；深色模式下必须用自定义 modal（如 ）替代，并通过 CSS 变量、showModal() 和 aria 属性确保主题同步与可访问性。
原生 alert()、confirm()、prompt() 无法用 CSS 或 JS 控制样式，深色模式下它们永远是系统默认外观，改不了。 所有试图用 CSS 覆盖或 JS 注入样式的方法都无效——浏览器禁止干预这些模态框的渲染。
为什么不能直接改 alert 的颜色？
这是浏览器安全策略强制限定的行为：alert 是阻塞式、系统级 UI 组件，其样式由操作系统和浏览器内核直接控制，不参与页面 CSSOM 或 JavaScript DOM 操作流程。即使你在 :root 里定义了 --bg-surface，或给 html[data-theme="dark"] 写了规则，它也完全不读取。
常见错误包括：
- 在 CSS 里写
dialog, alert { background: #121212; }—— 无效，alert不是标准 HTML 元素，不匹配任何选择器 - 试图用
document.querySelector('alert')获取并修改 —— 返回null，它根本不在 DOM 树中 - 用
matchMedia('(prefers-color-scheme: dark)')监听后调用alert()—— 弹窗外观仍取决于系统设置，与监听无关
替代方案：用自定义 modal 替换原生弹窗
真正可行的做法是彻底放弃 alert，改用可样式化的 HTML + CSS + JS 实现的轻量 modal。关键点在于：
立即学习“前端免费学习笔记（深入）”；
- 结构必须用
<dialog></dialog>或<div role="dialog">，确保语义正确和可访问性 <li>样式全部基于 <code>:root变量，例如background-color: var(--bg-surface); color: var(--text-primary); - JS 初始化时同步当前
data-theme值，避免首次打开仍是浅色 - 按钮需支持
aria-label和aria-pressed，尤其确认/取消按钮要明确反馈状态
示例核心逻辑：
function showAlert(message) {
const modal = document.getElementById('custom-alert');
const textEl = modal.querySelector('.alert-text');
textEl.textContent = message;
// 确保 theme 已生效
modal.showModal();
}
<dialog></dialog> 在深色模式下的兼容性注意点
<dialog></dialog> 元素本身支持 open 属性和 showModal() 方法，但它的 backdrop（遮罩层）默认是半透明黑，和深色模式冲突。必须显式重置：
- 加 CSS：
dialog::backdrop { background: rgba(0, 0, 0, 0.5); }→ 改为rgba(0, 0, 0, 0.65)或用变量rgba(0, 0, 0, var(--backdrop-opacity, 0.65)) - 不要依赖
@media (prefers-color-scheme: dark)单独写 backdrop 规则，它不会自动响应data-theme切换 - Safari 15.4+ 才完整支持
<dialog></dialog>，旧版需 fallback 到position: fixed实现 - 务必设置
tabindex="-1"并在打开时focus()到首个可交互元素，否则键盘用户无法操作
最易被忽略的是：modal 内部所有颜色值（包括 border、shadow、button hover）都必须继承自 :root 变量，而不是硬编码；否则切换主题后，弹窗颜色会卡在旧状态不动。
