Apple Books中ePub灰色与夜间模式background-color不生效问题

API 探路者

2026-7-24

解决Apple Books中Grey/Night模式下pre和SVG背景色不生效的问题

问题分析

Apple Books的Grey（灰色）和Night（夜间）模式会对部分元素的background-color样式进行强制覆盖，导致@media (prefers-color-scheme: dark)媒体查询内的相关设置失效，而Sepia（棕褐色）模式不受此影响，其他阅读器则能正常识别该媒体查询。

可行解决方案

1. 用背景渐变模拟纯色背景

Apple Books对background-image的限制较少，可以用线性渐变模拟纯色背景，替代直接设置background-color：

@media (prefers-color-scheme: dark) {
  pre {
    background-image: linear-gradient(#212427, #212427);
    /* 保留其他原有样式 */
  }

  img[src^="data:image/svg"] {
    background-image: linear-gradient(white, white);
    padding: 10px;
    /* 保留其他原有样式 */
  }
}

2. 增强选择器特异性

通过叠加父元素选择器提升样式优先级，避免被Apple Books的内置样式覆盖：

@media (prefers-color-scheme: dark) {
  html body pre {
    background-color: #212427 !important;
  }

  html body img[src^="data:image/svg"] {
    background-color: white !important;
    padding: 10px;
  }
}

3. 给SVG添加内联样式（针对SVG）

如果外部CSS仍不生效，直接给SVG元素添加内联style属性，强制设置背景色：

<img src="data:image/svg+xml,..." style="background-color: white; padding: 10px;" />

4. 检测Apple Books特定模式属性

部分版本的Apple Books会在body或html标签上添加专属属性（如data-mode="night"或class="grey-mode"），可以针对性编写样式：

body[data-mode="night"], body[data-mode="grey"] {
  pre {
    background-color: #212427 !important;
  }

  img[src^="data:image/svg"] {
    background-color: white !important;
    padding: 10px;
  }
}