深色模式下警告对话框需手动重设样式：文字与背景对比度须≥4.5:1，CSS变量配合prefers-color-scheme媒体查询统一管理；Bootstrap需覆盖.alert-link和.btn-close悬停态；.btn-close应重写SVG fill色或改用字符并清除background；dialog::backdrop需增强遮罩强度并设深色本体背景；所有交互状态均须成对适配。
深色背景模式下警告对话框默认样式会失效——文字看不清、边框消失、关闭图标变透明，根本不是“换个背景色”就能解决的事。
警告框文字和背景对比度不足
浅色主题下 .alert-warning 用 #fff 文字 + #fff3cd 背景，对比度约 1.2:1；切到深色模式后若不重置，同一组颜色在深灰背景上几乎不可读。WCAG 要求正文对比度 ≥ 4.5:1，必须手动覆盖。
- 别依赖
color-scheme: dark自动适配，它只影响表单控件和滚动条，对自定义警告框无效 - 用 CSS 变量统一管理：定义
--alert-warning-bg: #664d03、--alert-warning-text: #fff，再通过@media (prefers-color-scheme: dark)重设值 - 如果用 Bootstrap，不能只改
.alert-warning，还要同步覆盖.alert .alert-link和.btn-close的 hover 状态色（否则鼠标悬停时图标消失）
关闭图标（.btn-close）在深色模式下不可见
Bootstrap 5.3+ 默认用 SVG base64 作 background-image，其 fill 颜色写死为 %23dc3545（浅红），在深色背景上对比度极低，且 opacity 默认 0.5，双重削弱可见性。
- 最稳方案是重写
background-image，把 fill 值换成深色模式适配的亮色，例如%23ffcc00（琥珀黄） - 禁用原生 SVG 改用字符时，必须清除
background并显式设置font-size和line-height，否则字符上下偏移、居中失准 - 千万别只加
color: white——.btn-close的伪元素默认不渲染文字，只靠 background 图形，改 color 没用
原生 的 ::backdrop 默认是半透明白色（rgba(0,0,0,0.2)），在深色页面上变成“灰蒙蒙一层雾”，遮罩感弱、焦点引导失效。
- 必须显式重写
dialog::backdrop：用background-color: rgba(0, 0, 0, 0.7)加强遮罩强度 - 如果页面已启用深色模式，建议配合
@media (prefers-color-scheme: dark)把 backdrop 调得更暗（rgba(30, 30, 30, 0.85)），避免与背景色趋同 -
本体也要设深色背景（如background: #2d2d2d），否则内边距区域仍露白
真正麻烦的不是改几行 CSS，而是所有状态都要成对处理：正常态、hover、focus、disabled、高对比度模式（@media (forced-colors: active)）——漏掉任意一个，用户在特定系统设置下就会遇到文字消失或按钮失活的问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
