Bootstrap 5.2.3表格在浏览器暗黑模式下黑底黑字问题求助

问题根源：浏览器开启暗黑模式时，Bootstrap 5.2.3默认的table类未适配系统暗黑模式的文字颜色，再加上你引入的后台管理风格CSS未处理该场景，导致文字与背景均为深色，出现黑底黑字的显示异常。

以下是几个可行的解决方式：

1. 利用Bootstrap内置暗黑主题适配 #

Bootstrap 5.2+支持通过data-bs-theme属性切换主题，给表格容器或全局body添加该属性，即可自动套用暗黑模式下的表格样式：

• 全局启用暗黑主题（整个页面适配）：
  修改<body>标签：

<body data-bs-theme="dark">

• 仅给表格单独启用暗黑主题：
  将表格包裹在带属性的div中：

<div data-bs-theme="dark">
  <table class="table table-responsive table-bordered">
    <!-- 表格内容 -->
  </table>
</div>

2. 自定义CSS强制覆盖颜色 #

若不想使用Bootstrap内置暗黑主题，可直接通过媒体查询针对暗黑模式设置表格文字颜色：
在<head>标签内添加自定义样式：

<style>
/* 检测系统暗黑模式状态 */
@media (prefers-color-scheme: dark) {
  /* 为所有带table类的表格设置浅色文字 */
  .table td, .table th {
    color: #ffffff;
    /* 若需要调整背景色可添加此行：background-color: #212529; */
  }
}
</style>

3. 排查后台CSS的冲突问题 #

你引入了base.css、dashboard.css等后台管理样式，这些样式可能在暗黑模式下给表格设置了黑色文字。可通过浏览器开发者工具，选中表格单元格查看color属性被哪个CSS规则覆盖，再用更高优先级的样式修正：

例如，若冲突来自base.css，可编写如下样式：

@media (prefers-color-scheme: dark) {
  body .table td, body .table th {
    color: #fff !important;
  }
}

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