原生 alert() 无法修改颜色或样式，因其调用系统级 UI 而非 DOM；可行方案是用 div+CSS 变量+Promise 封装自定义弹窗，确保主题切换与键盘可用性。
原生 alert() 无法修改颜色或样式，任何尝试用 CSS 选中、JS 注入样式或覆盖 document.write 的做法都无效——浏览器直接绕过 DOM 渲染，走的是系统级 UI 调用。
为什么不能直接改 alert() 的颜色
这不是兼容性问题，而是规范限制：alert() 属于“模态阻塞式 API”，由浏览器引擎在渲染树之外调用 OS 原生对话框（Windows MessageBox / macOS NSAlert）。它不生成任何可选中的 DOM 元素，document.querySelectorAll('dialog') 查不到，getComputedStyle 也拿不到。所有 CSS 变量、:root 声明、style 属性对它完全透明。
- 试图给
alert()加 class 或内联 style：无效果，语法错误或静默忽略 - 用
document.body.style.cssText强刷主题后调用alert()：颜色依然不变 - 在 Shadow DOM 或 Web Components 中重写
window.alert：函数能被替换，但底层弹窗仍走原生路径，样式不可控
真正可行的自定义方案：用 div + CSS + Promise 重写
必须放弃“改造原生函数”的思路，转为封装一个行为一致、视觉可控的替代函数。核心是模拟阻塞语义（用户必须操作后才继续执行），同时把样式完全交由 CSS 变量管理。
- HTML 结构只需一个
<div class="alert-modal">，里面含遮罩层、内容区、确认按钮 <li>CSS 中所有颜色必须用 <code>var(--alert-bg)、var(--alert-text)等语义化变量，声明在:root - JS 返回
Promise，点击按钮后resolve()，保持与原生alert()的调用链兼容（比如await customAlert('xxx')） - 禁止在 JS 里写死颜色值，例如
btn.style.backgroundColor = '#3b82f6'—— 这会切断主题切换能力 - 正确写法：
:root { --alert-bg: #ffffff; --alert-text: #1f2937; }+.alert-modal { background-color: var(--alert-bg); color: var(--alert-text); } - 错误写法：
.alert-modal { background-color: #ffffff; }（硬编码）、.theme-dark .alert-modal { background-color: #111827; }（选择器优先级高但无法响应动态切换） - JS 切换主题时，用
document.documentElement.style.setProperty('--alert-bg', '#111827')，别碰cssText—— 它会清空其他动态注入的样式 -
::before/::after里的图标颜色、边框、阴影也必须用var()，否则暗色模式下可能看不见
:root 变量声明与主题切换的关键细节
颜色变量必须挂载在 :root，且每个用到的地方都显式调用 var()，漏一处就断链。深色模式切换时，仅改 --alert-bg 不够，--alert-border 和 --alert-icon-color 也要同步更新，否则对比度不合规。
立即学习“前端免费学习笔记（深入）”；
最易被忽略的一点：自定义 alert 的焦点管理。原生 alert() 自动聚焦确认按钮并支持 Enter 键关闭，重写时若没加 btn.focus() 和 keydown 监听，键盘用户就卡住了——这不属于“颜色”范畴，但直接影响可用性，且常被跳过。
