color-scheme对table无效，仅作用于原生表单控件和系统语义色；表格深色适配需四步协同：meta声明、CSS变量、媒体查询、控件级accent-color。
单独给 <table> 或 <tr> 加 color-scheme 属性没用——它不作用于表格元素，只影响原生表单控件和系统语义色渲染逻辑。
为什么 table 上写 color-scheme 没反应
color-scheme 是 CSS 属性，但它的生效范围非常明确：仅控制浏览器内置的「系统级渲染行为」，比如 <input> 边框、<select> 下拉箭头、滚动条 thumb、<progress> 轨道、Canvas 文本色等。表格不是系统控件，<table> 元素本身没有默认的「深色/浅色外观」可切换，所以加了也白加。
- 写了
table { color-scheme: dark; }→ 浏览器直接忽略 - 写了
html { color-scheme: light dark; }但没配<meta name="color-scheme">→ 表格内容不变，且<input>在<td>里依然亮底 - 以为加了就能自动翻转
background-color或color→ 实际上它完全不管你的自定义 CSS
真正让表格适配深色模式的三步法
表格深色适配靠的是组合策略：声明支持 + 系统语义色 + 媒体查询覆盖。缺一不可。
- 必须在
<head>里放<meta name="color-scheme" content="light dark">（越靠前越好），否则<input>、<select>嵌在表格里时仍为浅色外观 - 表格内若有表单控件（如
<input type="checkbox">），需显式设accent-color，且只能写在控件本身上：input[type="checkbox"] { accent-color: var(--accent); } - 表格自身颜色靠
@media (prefers-color-scheme: dark)+ CSS 变量驱动：table, th, td { background-color: var(--table-bg); color: var(--table-text); }，变量值在媒体查询中重定义
容易被忽略的表格细节陷阱
表格在深色模式下最常出问题的不是结构，而是边缘视觉元素——它们不会随 media query 自动变色，必须手动接管：
立即学习“前端免费学习笔记（深入）”；
-
<th>的border-bottom：别用硬编码#ccc，改用var(--table-border)，并在暗色变量中设为#333或Canvas - 伪类如
tr:hover：深色下若用rgba(0,0,0,0.1)，可能完全看不出变化，建议用color-mix(in srgb, CanvasText 15%, transparent)（Chrome 111+）或 fallback 变量 - 内联 SVG 图标在
<td>里：fill: currentColor才能随color变；写死#666就会糊成一片 - 表格里的
<progress>：它依赖color-scheme和<meta>才能自动变暗，但轨道色仍需用accent-color控制
真正起效的不是某一行代码，而是 <meta>、:root 变量、@media、控件级 accent-color 四者对齐——漏掉任意一环，表格就会局部“掉链子”，比如文字可读但边框发灰，或 checkbox 有反色但 hover 背景没变。
