Bootstrap4深色模式下浅色纹理背景的文字颜色可访问性问题

这个问题的核心原因是现代浏览器会对未明确声明主题适配规则的站点，自动根据系统主题调整文字、背景等元素颜色，导致预设的浅色背景和自动切换的浅色文字冲突。可通过以下方法强制固定站点配色：

方案1：CSS全局覆盖（适用于直接引用Bootstrap编译后CSS的场景） #

在你自定义的CSS文件最顶部添加以下代码：

/* 告知浏览器本站仅适配浅色主题，禁用自动深色主题样式转换 */
:root {
  color-scheme: light only;
}

/* 全局默认文字固定为黑色 */
body {
  color: #000;
}

/* 导航栏文字固定为黑色 */
.navbar, .navbar a {
  color: #000;
}

/* 页脚区域文字固定为米白色，可替换为你实际使用的色值 */
footer, footer a {
  color: #f5f5dc;
}

如果修改后还有个别元素颜色被自动调整，可以给对应样式添加!important提升优先级。

方案2：Sass变量配置（适用于通过Sass源码编译Bootstrap的场景） #

在引入Bootstrap Sass源码前，先配置以下变量：

// 禁用深色模式适配
$enable-dark-mode: false;
// 全局默认文字颜色
$body-color: #000;
// 导航栏文字颜色
$navbar-light-color: #000;
$navbar-light-link-color: #000;
// 页脚文字颜色可单独定义
$footer-color: #f5f5dc;

@import "bootstrap/scss/bootstrap";

配置完成后重新编译Bootstrap即可全局生效。

两种方案都可以让站点文字、组件颜色完全不受用户系统主题影响，始终保持预设的配色规则。

内容的提问来源于stack exchange，提问作者Sunmean