Anki Beautify 插件主题自定义详解
概述
Anki Beautify 插件旨在通过多种自定义选项提升 Anki 的用户界面美观性和使用体验。本文将详细介绍如何自定义插件的主题，包括打开主题文件、更改颜色、修改统计图标以及创建自定义主题的具体步骤和方法。通过本文的指导，用户能够根据个人喜好灵活调整 Anki 的视觉效果，打造个性化的学习环境。
1. 打开主题文件
步骤说明
-
备份原始主题文件
-
建议操作
：在编辑主题文件前，建议先复制一份原始文件以防止修改出错时可以恢复到默认设置。 -
操作方法
：在文件管理器中，导航到插件的主题设置文件夹，复制需要编辑的主题文件并重命名，例如将
flamingo.json
复制为
flamingo_backup.json
。
-
-
定位主题设置文件夹
-
路径
：
插件目录 ➡️ theme_settings
-
说明
：插件自带四种预设主题，分别存放在
theme_settings
文件夹内。
-
-
打开主题文件
-
操作方法
：选择要编辑的主题文件（例如
flamingo.json
），使用文本编辑器（如 Notepad++、VS Code 等）打开该文件。
-
示例主题文件（flamingo.json）
{
"overlay-color1" : "rgba(239, 83, 80, 0.55)",
"overlay-color2" : "rgba(4, 95, 95, 0.82)",
"heatmap-background": true,
"gear-icon-color" : "rgba(55, 71, 79,1)",
"buttons-color" : "rgba(55, 71, 79,1)",
"bottombar-color" : "rgba(128, 203, 196,1)",
"topbar-color" : "rgba(128, 203, 196,1)",
"topbar-position" : "center",
"large-areas-color" : "rgba(215, 204, 200, 0.57)",
"decks-border-color" : "rgba(215, 204, 200, 0.57)",
"decks-font-color" : "rgba(0, 44, 66,1)",
"filtered-deck-color" : "rgba(59, 84, 208,1)",
"DECK-BROWSER": {
"wedgits-font-color" : "rgba(238, 238, 238,1)",
"overview-wedgit-bg" : "rgba(77, 182, 172 , 0.8)",
"average-wedgit-bg" : "rgba(239, 83, 80,0.8)",
"remaining-wedgit-bg" : "rgba(198, 40, 40,0.8)",
"new-wedgit-bg" : "rgba(0, 131, 143,0.8)",
"due-wedgit-bg" : "rgba(120, 144, 156,0.8)",
"total-wedgit-bg" : "rgba(161, 136, 127,0.8)",
"overview-wedgit-icon" : "playlist_add_check",
"average-wedgit-icon" : "access_alarm",
"remaining-wedgit-icon" : "timer",
"new-wedgit-icon" : "card_giftcard",
"due-wedgit-icon" : "edit",
"total-wedgit-icon" : "donut_small"
},
"DECK-OVERVIEW" :{
"wedgits-font-color" : "rgba(255, 255, 255,1)",
"total-notes-wedgit-bg" : "rgba(77, 182, 172 , 0.8)",
"remaining-wedgit-bg" : "rgba(198, 40, 40,0.8)",
"new-wedgit-bg" : "rgba(0, 131, 143,0.8)",
"learning-wedgit-bg" : "rgba(120, 144, 156,0.8)",
"review-wedgit-bg" : "rgba(239, 83, 80,0.8)",
"total-wedgit-bg" : "rgba(161, 136, 127,0.8)",
"remaining-wedgit-icon" : "timer",
"new-wedgit-icon" : "card_giftcard",
"learning-wedgit-icon" : "description",
"review-wedgit-icon" : "edit",
"total-wedgit-icon" : "donut_small",
"PIE-CHART":{
"wedgits-font-color" : "rgba(224, 97, 0,1)"
}
}
}
2. 更改颜色
颜色值说明
-
CSS颜色格式
：插件使用标准的CSS颜色格式来定义各个界面元素的颜色。常见的颜色表达方式包括：-
颜色名称
：如
CadetBlue
-
十六进制
：如
#5F9EA0
-
RGB
：如
rgb(95, 158, 160)
-
RGBA
：如
rgba(77, 182, 172, 0.8)
-
-
RGBA格式
：-
格式
：
rgba(R, G, B, A)
-
含义
：-
R
：红色分量（0-255） -
G
：绿色分量（0-255） -
B
：蓝色分量（0-255） -
A
：透明度（0表示完全透明，1表示完全不透明）
-
-
更改颜色步骤
-
选择要更改的颜色属性
-
例如，修改底部栏颜色
bottombar-color
。
-
例如，修改底部栏颜色
-
编辑颜色值
-
例如，将底部栏颜色修改为浅蓝色：
"bottombar-color": "rgba(173, 216, 230, 1)"
-
-
保存并重启 Anki
- 确保修改生效，重启 Anki 后查看界面变化。
示例：更改底部栏和按钮颜色
{
"bottombar-color" : "rgba(173, 216, 230, 1)", // 浅蓝色
"buttons-color" : "rgba(255, 105, 180,1)" // 热粉色
}
注意事项
-
颜色选择
：确保选择的颜色与整体主题协调，避免过于刺眼或不易辨识的配色。 -
透明度调整
：通过修改RGBA中的
A
值，可以调整颜色的透明度。例如，将
0.8
改为
1
使颜色不透明，改为
0.5
则半透明。
3. 修改统计图标
功能描述
插件使用 Materialize CSS 库中的图标集来显示统计图标。用户可以通过更改图标名称来自定义统计图标的样式。
更改步骤
-
查找图标名称
-
前往
Material Icons
网站，选择所需的图标并获取其名称。
-
前往
-
编辑主题文件中的图标名称
-
打开要修改的主题文件（例如
flamingo.json
）。 -
找到统计图标对应的配置项，如
overview-wedgit-icon
。 - 将现有的图标名称替换为新的图标名称。
-
打开要修改的主题文件（例如
示例：将“overview-wedgit-icon”从“playlist_add_check”改为“star”
"overview-wedgit-icon" : "star",
示例：修改“average-wedgit-icon”
"average-wedgit-icon" : "thumb_up",
注意事项
-
图标名称准确性
：确保输入的图标名称与 Materialize CSS 图标库中的名称完全匹配，否则图标将无法正确显示。 -
图标风格一致性
：选择风格统一的图标，以保持界面的整体美观性。
4. 创建自定义主题
步骤说明
-
复制并重命名现有主题文件
-
操作方法
：在
theme_settings
文件夹内，复制一个现有的主题文件（如
flamingo.json
），并重命名为新的主题名称（如
my_custom_theme.json
）。
-
-
编辑自定义主题文件
-
打开新的主题文件（如
my_custom_theme.json
），根据个人喜好修改各项颜色和图标设置。
-
打开新的主题文件（如
-
应用自定义主题
-
修改配置文件
：打开插件的
config.json
文件，找到
theme
字段，并将其值设置为新主题的名称："theme": "my_custom_theme" -
保存并重启 Anki
：确保配置生效，重启 Anki 后新主题将被应用。
-
示例：创建并应用自定义主题
-
复制文件
-
复制
flamingo.json
并命名为
my_theme.json
。
-
复制
-
编辑
my_theme.json
-
修改颜色和图标：
{ "overlay-color1" : "rgba(100, 149, 237, 0.55)", // 浅蓝色 "buttons-color" : "rgba(60, 179, 113,1)", // 中绿松石色 "bottombar-color" : "rgba(255, 215, 0,1)", // 金色 // 其他配置项保持或根据需要调整 }
-
-
修改
config.json
{ "theme": "my_theme", // 其他配置项 } -
重启 Anki
-
新主题
my_theme
将被应用，界面颜色和图标样式按照自定义配置显示。
-
新主题
注意事项
-
文件命名
：确保自定义主题文件的名称与
config.json
中设置的主题名称一致。 -
JSON 格式正确性
：编辑 JSON 文件时，确保语法正确，避免缺少逗号或引号错误。 -
备份
：在进行大规模修改前，建议备份主题文件，以便在出错时恢复默认设置。
5. 常见问题与解决方案
问题1：自定义主题未生效
-
原因
：
config.json
中的
theme
字段未正确指向自定义主题，或 JSON 文件存在语法错误。 -
解决方案
：-
检查
config.json
中的
theme
字段是否与自定义主题文件名称一致。 - 确认自定义主题文件的 JSON 语法正确，可使用 JSON 校验工具检查。
-
检查
问题2：更改颜色后界面显示异常
-
原因
：颜色值设置不合理，或透明度过高/过低导致颜色混淆。 -
解决方案
：- 检查颜色值的正确性，确保使用有效的 CSS 颜色格式。
- 调整 RGBA 中的透明度值，确保颜色与背景和其他元素有足够的对比度。
问题3：统计图标未正确显示
-
原因
：图标名称拼写错误或使用了不存在的图标名称。 -
解决方案
：- 确认图标名称与 Materialize CSS 图标库中的名称完全匹配。
- 检查主题文件中图标名称的拼写是否正确，避免多余的空格或大小写错误。
问题4：Anki 运行缓慢
-
原因
：使用了过大的背景图片文件，或自定义主题中存在复杂的 CSS 样式。 -
解决方案
：- 使用小尺寸的背景图片，压缩图片文件以减少文件大小。
- 简化自定义主题中的 CSS 样式，避免使用过多复杂的动画或高透明度效果。
总结
Anki Beautify 插件通过灵活的主题自定义功能，为用户提供了丰富的视觉调整选项。通过简单的文件编辑和配置修改，用户可以轻松更换首页背景、为各个牌组设置独特的背景图片、修改统计图标以及创建个性化的自定义主题。本文详细介绍了主题文件的访问与编辑步骤、颜色和图标的更改方法以及创建自定义主题的具体操作，并提供了常见问题的解决方案，帮助用户在使用过程中更加顺畅地进行个性化设置。通过合理配置，用户能够打造一个既美观又高效的学习环境，进一步提升 Anki 的使用体验。