bootstrap 5.3+ 按钮深色模式不生效的根本原因是 css 变量未重算，必须在设置 data-bs-theme="dark" 后立即调用 bootstrap.theme.getorcreateinstance().update()，否则 --bs-primary 等变量仍为亮色值，导致按钮背景、文字、边框及 hover/focus 状态均无法正确渲染。
为什么 data-bs-theme="dark" 对按钮没反应
不是按钮写错了，是 CSS 变量根本没重算。Bootstrap 5.3+ 的按钮（如 .btn-primary）依赖 var(--bs-primary) 渲染背景和文字色，而这个变量只在 [data-bs-theme="dark"] 规则块里被覆盖——但光加属性不调 bootstrap.Theme.getOrCreateInstance().update()，浏览器压根不会重新解析 :root 下的变量值。你在开发者工具里点开 :root 节点，切换后 --bs-primary 还是 #0d6efd？那说明这一步漏了。
.btn 在暗黑模式下文字看不见或边框消失
常见于直接复用 Bootstrap 默认分页、表单或自定义组件时：它们硬编码了浅色 class（如 .page-link），又没读 CSS 变量。例如默认 .btn-outline-secondary 的边框色是 var(--bs-border-color-translucent)，但在暗色背景下这个变量若没被 [data-bs-theme="dark"] 重新赋值，就会沿用亮色值（比如 rgba(0,0,0,.175)），导致深灰背景上几乎隐形。
解决要点：
- 确保你的自定义 CSS 在 Bootstrap 官方 CSS 之后 加载
- 所有颜色必须用
var(--bs-xxx)，不能写死#fff或rgb(255,255,255) - 检查
[data-bs-theme="dark"] { --bs-border-color-translucent: rgba(255,255,255,.15); }是否存在并生效 - 用“计算样式”面板确认按钮的
border-color最终解析值是否符合预期
手动切换后按钮悬停/焦点状态失效
Bootstrap 的 :hover 和 :focus 样式也靠变量驱动，比如 .btn:hover { background-color: var(--bs-btn-hover-bg); }。如果只改了 data-bs-theme 属性但没刷新变量，这些伪类仍会读取旧值，造成悬停无变化、焦点框不可见等问题。
必须同步做三件事：
- 执行
document.documentElement.setAttribute('data-bs-theme', 'dark') - 存入
localStorage.setItem('theme', 'dark') - 立刻调用
bootstrap.Theme.getOrCreateInstance(document.documentElement).update()
漏掉任意一项，按钮交互状态就可能卡在初始主题里。
WebView 或低版本 Safari 中按钮始终亮色
iOS WKWebView 和部分 Android WebView 不自动传递系统深色偏好，window.matchMedia('(prefers-color-scheme: dark)') 可能始终返回 false，导致初始化逻辑跳过暗色设置。此时仅靠媒体查询无法触发 data-bs-theme 切换。
应对方式：
- 不要依赖
prefers-color-scheme做首次判断，优先读localStorage.getItem('theme') - 在 WebView 容器层开启
UIUserInterfaceStyle（iOS）或forceDark（Android）支持 - 避免在
DOMContentLoaded之后才设置主题——闪屏就发生在这毫秒之间
最常被忽略的是：你以为按钮样式是 CSS 问题，其实根源在 JS 初始化时机和变量刷新链是否完整。变量不更新，再准的 CSS 也白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
