表格文字在暗黑模式下看不见，主因是color与background-color对比度不足；应查computed值、用语义化css变量统一控制、避免硬编码，并确保媒体查询或data-theme类正确覆盖变量。
表格文字颜色在暗黑模式下看不见？先查 computed color 和 background-color 是否冲突
最常见的现象是：设了 color: white，但表格文字还是看不见。这不是 CSS 没生效，而是 background-color 也是白色（或接近），对比度崩了。深色模式下尤其容易踩这个坑——比如父容器用了 background: #ffffff，子表格没重置背景，文字就“融”进去了。
解决方法不是加更多样式，而是盯住两点：
- 打开 DevTools → Elements → 选中
th或td元素，在 Styles 面板看「Computed」标签页里的color和background-color实际值 - 用浏览器的无障碍检查工具（如 Chrome 的 Lighthouse → 「Accessibility」）跑一次对比度检测，确认是否 ≥ 4.5:1
- 别依赖
color: black/color: white这类硬编码值；改用语义化关键词，比如color: CanvasText、background-color: Canvas，让系统决定实际渲染色
@media (prefers-color-scheme: dark) 对 table 不生效？检查 HTML 结构和继承链
表格本身不阻断媒体查询，但常见结构问题会让规则失效：
<table> 外层套了带内联 <code>style="background: white"的<div>，直接覆盖了媒体查询的背景设置 <li>用了 <code><div class="table-wrapper"> 替代语义化 <code><section></section>或<article></article>，导致媒体查询里写的section table th根本不匹配<thead> 或 <code><tbody> 上写了 <code>bgcolor（已废弃但仍有遗留），会强制覆盖 CSS- 第三方 UI 库的表格组件（如 Ant Design 的
<table>）自带 class，而你写的 <code>@media (prefers-color-scheme: dark) table th权重不够，被库样式压住对策：删掉所有
bgcolor属性；把媒体查询选择器写得更具体，例如@media (prefers-color-scheme: dark) .my-table th；对第三方组件，用!important是下策，优先加前缀类或用html[data-theme="dark"] .ant-table th提升权重。如何用 CSS 变量统一控制表格颜色，避免重复写 dark 规则
核心是把变量定义在
:root，再用媒体查询只覆盖变量值，而不是整套样式。这样维护成本低，也防漏。错误写法（难维护、易漏）：
table { background: #ffffff; } @media (prefers-color-scheme: dark) { table { background: #121212; } th { color: #e0e0e0; } td { color: #cccccc; } }推荐写法（变量驱动、可扩展）：
:root { --table-bg: #ffffff; --table-th-color: #333333; --table-td-color: #666666; --table-border: #e0e0e0; } @media (prefers-color-scheme: dark) { :root { --table-bg: #121212; --table-th-color: #e0e0e0; --table-td-color: #bbbbbb; --table-border: #333333; } } table { background-color: var(--table-bg); border-collapse: collapse; } th, td { color: var(--table-td-color); } th { color: var(--table-th-color); }注意：变量必须在
:root中有默认值，否则媒体查询不匹配时var(--table-bg)会退化为initial（透明），导致表格背景消失。表格边框、悬停、选中态在暗黑模式下怎么保持可用性
边框和交互反馈最容易在暗色背景下“消失”，因为开发者常沿用亮色模式下的 rgba 值，比如
box-shadow: 0 1px 2px rgba(0,0,0,0.1)在深色底上几乎不可见。- 边框别用
border: 1px solid #ccc，改用border: 1px solid var(--table-border)，并确保变量在暗色模式下是浅灰（如#333333）而非深灰 -
:hover态别只改背景色，加一点 border 或 subtle shadow，比如box-shadow: inset 0 0 0 1px var(--table-border) - 选中行（
tr.selected）避免纯黑背景（#000000），OLED 屏会烧屏；用#1e1e1e或color-mix(in srgb, currentColor 15%, transparent)（支持浏览器有限，慎用） -
<input type="checkbox">在表格中要单独处理：系统深色模式下原生复选框可能发灰，加<meta name="color-scheme" content="light dark">到让浏览器优化
真正卡住人的，从来不是“怎么写暗色样式”，而是忘了表格里那些非文本元素——
<input>、<select></select>、<svg></svg>、甚至<canvas></canvas>渲染的图表——它们不会自动响应prefers-color-scheme，得一个个手动接住。 - 边框别用
