Anki Beautify 插件主题自定义详解-CSDN博客

本文链接：https://blog.csdn.net/m0_73640344/article/details/147748767

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 文件存在语法错误。
解决方案：
1. 检查 config.json 中的 theme 字段是否与自定义主题文件名称一致。
2. 确认自定义主题文件的 JSON 语法正确，可使用 JSON 校验工具检查。

问题2：更改颜色后界面显示异常

原因：颜色值设置不合理，或透明度过高/过低导致颜色混淆。
解决方案：
1. 检查颜色值的正确性，确保使用有效的 CSS 颜色格式。
2. 调整 RGBA 中的透明度值，确保颜色与背景和其他元素有足够的对比度。

问题3：统计图标未正确显示

原因：图标名称拼写错误或使用了不存在的图标名称。
解决方案：
1. 确认图标名称与 Materialize CSS 图标库中的名称完全匹配。
2. 检查主题文件中图标名称的拼写是否正确，避免多余的空格或大小写错误。

问题4：Anki 运行缓慢

原因：使用了过大的背景图片文件，或自定义主题中存在复杂的 CSS 样式。
解决方案：
1. 使用小尺寸的背景图片，压缩图片文件以减少文件大小。
2. 简化自定义主题中的 CSS 样式，避免使用过多复杂的动画或高透明度效果。

总结

Anki Beautify 插件通过灵活的主题自定义功能，为用户提供了丰富的视觉调整选项。通过简单的文件编辑和配置修改，用户可以轻松更换首页背景、为各个牌组设置独特的背景图片、修改统计图标以及创建个性化的自定义主题。本文详细介绍了主题文件的访问与编辑步骤、颜色和图标的更改方法以及创建自定义主题的具体操作，并提供了常见问题的解决方案，帮助用户在使用过程中更加顺畅地进行个性化设置。通过合理配置，用户能够打造一个既美观又高效的学习环境，进一步提升 Anki 的使用体验。