夜间模式反色（dark-mode-invert）

使用场景

在电子书中，部分图片实际上是文字的替代品（如生僻字、特殊符号），这类图片通常是黑色文字白色背景的小图。在夜间模式下，正文文字会自动变为浅色，但图片不会改变，导致视觉不一致。

使用 dark-mode-invert 可以让指定的图片在夜间模式下自动反色，保持与正文一致的阅读体验。

语法

.selector {
  dark-mode-invert: true;
}

取值

示例

生僻字图片

电子书中的生僻字通常使用图片代替，这些图片需要在夜间模式下跟随文字颜色反转：

<p>
  扑<img alt="生僻字" class="rarefont" src="../Images/font01.png" />蜡
</p>

.rarefont {
  display: inline-block;
  height: 1.1em;
  vertical-align: middle;
  dark-mode-invert: true;
}

效果说明：

• 日间模式：图片保持原样显示（黑色文字图片）
• 夜间模式：图片自动反色（变为浅色，与正文文字一致）

特殊符号图片

一些特殊排版符号也可能使用图片实现：

img.symbol {
  dark-mode-invert: true;
}

与全局设置的关系

Reeden 阅读器本身提供了「夜间模式图片反色」的全局开关。dark-mode-invert 属性是针对单个元素的精细控制，两者的关系如下：

• 全局反色关闭 + dark-mode-invert: true：该元素仍然会在夜间模式下反色
• 全局反色开启：所有图片都会反色，dark-mode-invert 无额外效果

注意事项

• 该属性仅在阅读器处于夜间/暗黑模式时生效
• 主要用于内联的小图片（如生僻字、符号），不建议用于大尺寸配图
• 属性不会被子元素继承