如何让color:inherit适配祖先color-scheme？使textarea与p同规则继承颜色

你的问题核心在于color: inherit的逻辑：它只会继承祖先链中显式设置的color值，而不会自动适配color-scheme的变化。你例子里的<div>只设置了color-scheme: light但没写color属性，所以表单元素会继承<html>层（color-scheme: dark）的color值，而<p>这类普通文本元素默认用的是浏览器的CanvasText颜色——这个颜色会自动匹配最近的color-scheme配置，所以能显示黑色。

把你原来的规则改成下面这样就能解决问题：

button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]) {
  color: CanvasText;
}

为什么这个方案可行： #

• CanvasText是CSS标准定义的系统颜色，专门对应当前配色方案下的普通文本颜色，会自动跟随最近的color-scheme祖先调整深浅
• 完全复刻了<p>等普通文本元素的颜色行为，不需要依赖buttontext/fieldtext这类表单专属的默认样式
• 不需要给每个设置color-scheme的祖先都显式写color属性，减少冗余代码

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