ruby在深色模式下需显式设置rt的color、font-size及rp的color并移除opacity，html[data-theme]而非body上设主题属性，配合CSS变量响应切换，混排SVG时用inline-flex对齐并固定尺寸。
ruby标签在深色模式下文字重叠、注音不可读
默认情况下，ruby及其子元素rt、rp在深色背景上极易出现文字糊在一起或完全透明的问题——因为浏览器对rt的默认font-size极小（常为50%），且未设color和background-color，导致浅灰文字落在深灰背景上对比度不足，甚至被opacity: 0.7类规则意外覆盖。
-
rt必须显式声明color: var(--ruby-text);，不能依赖继承；推荐值如#a0a0a0（非纯灰，保证 WCAG AA 级对比度） -
rt要禁用默认缩放：font-size: 1em;，再用line-height和vertical-align微调位置，避免和主文本挤成一团 -
rp（括号）常被忽略，但它在 Safari 中默认是灰色+半透明，在深色下几乎隐形；需统一设color: var(--ruby-paren);并移除opacity - 不要用
background-color: rgba(0,0,0,0.1)给rt加底衬——OLED 屏上会发灰，改用backdrop-filter: blur(2px)配合background-color: hsla(0,0%,10%,0.15)
ruby样式无法随data-theme="dark"响应
很多项目把data-theme="dark"挂在body上，结果ruby rt样式完全不切换。这是因为rt是匿名内联元素，其样式继承链断裂，且原生ruby结构不触发伪类重绘，仅靠[data-theme="dark"] ruby rt选择器权重不够。
- 必须把
data-theme属性写在html标签上：<html data-theme="dark">，否则html[data-theme="dark"] ruby rt匹配失败 - 避免只在
@media (prefers-color-scheme: dark)里写ruby样式——它不响应 JS 主动切换，用户点按钮后rt颜色不会变 - 正确写法是两套变量同时定义：
html[data-theme="light"] { --ruby-text: #555; }html[data-theme="dark"] { --ruby-text: #a0a0a0; }
然后所有ruby rt都用color: var(--ruby-text);
ruby在深色模式下与SVG/图标混排错位
当ruby包裹的文字旁有svg图标（比如带注音的术语+状态图标），vertical-align: middle在深色模式下容易失效——因为svg若设了fill="currentColor"，颜色变了但基线没同步调整，导致rt上浮或下沉。
-
ruby外层容器建议加display: inline-flex; align-items: center;替代纯内联流，避免vertical-align不可控 -
svg需显式设height: 1em; vertical-align: -0.125em;（比默认middle略高），与rt的line-height: 1.2对齐 - 禁用
svg { max-height: 100%; }这类弹性约束——它会让图标在ruby内缩放失真，固定width/height更稳
ruby嵌套在table单元格或pre代码块里时的行高塌陷——那不是颜色问题，而是ruby的line-height计算在深色主题变量更新后没触发重排，得手动加ruby { contain: layout style; }强制隔离渲染。 
