color-scheme 对 table 元素无效，仅控制 input、select 等 ua 控件主题；表格深色适配需手动通过 @media (prefers-color-scheme: dark) 和 css 变量实现，并注意 border-collapse、focus 样式及 background-image 处理。
color-scheme 对 table 元素本身没作用
color-scheme 是控制浏览器 UA 控件（如 <input>、<select></select>、滚动条）主题渲染的声明，不是 CSS 颜色开关。它对 <table>、<code><td>、<code><th> 这类纯容器元素完全无影响——这些标签没有内置系统语义色，浏览器不会替你改背景或文字色。
<h3>真正起效的是 @media (prefers-color-scheme: dark) + CSS 变量</h3>
<p>表格适配深色模式必须靠手动定义样式，核心路径是：用变量设默认浅色，再在媒体查询中覆盖为深色值。</p>
<ul>
<li>
<code>:root 中先定义：--table-bg: #fff、--table-text: #333、--table-border: #ddd
@media (prefers-color-scheme: dark) 里重写：--table-bg: #1a1a1a、--table-text: #e0e0e0、--table-border: #444
table { background: var(--table-bg); color: var(--table-text); border: 1px solid var(--table-border) }
th 和 td 的 background 和 border —— 它们不会继承 table 的背景色为什么加了 meta color-scheme 表格还是白的
常见错觉：以为加了 <meta name="color-scheme" content="light dark"> 就万事大吉。其实它只管 <input type="range"> 的滑块、<progress></progress> 轨道、滚动条 thumb 等 UA 组件，和表格毫无关系。
- 该
<meta>必须存在，否则<input>在表格里仍卡在浅色边框，但表格自身颜色仍需你手写 - iOS Safari 下若
html没设显式background-color，连 UA 控件都可能不响应color-scheme，更别说表格 -
@media (prefers-color-scheme: dark)规则必须放在全局 CSS 里，不能嵌套在其他媒体查询内（旧版 Safari 会跳过）
容易被忽略的细节：border-collapse 和 focus 样式
表格在深色下常出现“边框断开”或“焦点环看不见”，问题不在主题逻辑，而在样式细节。
-
border-collapse: collapse下，border值必须明确指定颜色变量，否则回退到浏览器默认（可能是浅灰，在深背景上不可见） -
th:focus或可聚焦的td（比如含tabindex），需单独定义outline或box-shadow，且颜色要用var(--focus-ring)，不能写死#007bff - 如果表格用了
background-image或渐变，记得在深色媒体查询中禁用或替换，否则可能在暗背景下透出亮纹 -
th的background建议用Canvas系统色（如background: Canvas），比硬编码#2a2a2a更稳，但注意它不支持透明
color-scheme 和 <meta> 只负责让表格里的原生控件（比如 <select></select> 单元格）跟系统一致，别指望它们帮你填满 <td> 的背景。</td>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
