AnkiDroid 中文文档 下载 App

夜间模式下卡片背景的自定义 —— 让图片和颜色不突兀

问题：夜间模式下卡片还是白底

切换到夜间模式后，AnkiDroid 的活动栏、导航抽屉、按钮等系统 UI 会立刻变成暗色主题。但卡片内容的渲染方式由笔记模板里的 CSS 决定——如果你的模板里写了 background: #fff（白色背景），那张卡片在夜间模式下还是白底黑字。

这会很突兀，甚至比不开夜间模式更伤眼。

方案一：AnkiDroid 的"反转卡片颜色"开关（最快）

AnkiDroid 某些版本在设置里提供一个全局开关：反转卡片颜色（Invert card colors）。打开后：

优点：一键生效，不用改任何模板。缺点：图片也被反转（比如白色 logo 变成黑色、照片变成负片），观感不总是好。

适合：绝大多数卡片都是纯文字、图片很少的牌组。

方案二：改模板 CSS（最彻底）

在桌面版 Anki 上编辑每个笔记类型的模板 CSS，让颜色跟随 Anki 的主题变量。

Anki 模板支持的主题相关 CSS 变量：

变量含义
--bg卡片背景色（日间白，夜间自动变黑）
--fg卡片前景色（文字颜色，日间黑，夜间自动变浅色）

模板 CSS 改法：

.card {
  background: var(--bg);
  color: var(--fg);
}

改完后：

这个方案是根本解，一次改好后永远生效。但需要注意：

方案三：针对某类图片卡单独处理

如果你的牌组里有大量图片卡片（比如地理地形、人体解剖、图片记忆），图片在夜间模式下被反转会很难看。

常见做法：

  1. 夜间模式下接受图片反转——对解剖图、流程图影响不大（只是颜色反了，形状还看得清）
  2. 关掉反转（如果你用方案一的反转卡片颜色）——白天切回来
  3. 模板里给图片加样式——img { max-width: 100%; } 但不做颜色反转，让图片保持原样

怎么看当前主题下的变量值

在桌面版 Anki（23.10+）里，可以在「检查数据库 → 查看主题」里看到当前主题变量的实际值。手机上 AnkiDroid 不支持查看，但改完 CSS 同步到手机后切夜间模式就能看到效果。

不推荐的做法

延伸阅读