Anki颜色系统：主题色彩管理的技术方案

Anki颜色系统：主题色彩管理的技术方案

【免费下载链接】anki Anki's shared backend and web components, and the Qt frontend 项目地址: https://gitcode.com/GitHub_Trending/an/anki

引言：多平台主题色彩的技术挑战

在跨平台应用开发中，主题色彩管理是一个复杂的技术挑战。Anki作为一款支持Windows、macOS、Linux三大操作系统的记忆辅助软件，其颜色系统需要处理：

• 系统主题适配：自动检测并适配系统深色/浅色模式
• 跨平台一致性：在不同操作系统上保持统一的视觉体验
• 动态切换：支持运行时主题切换而不需要重启应用
• 可扩展性：为插件开发者提供统一的色彩API

本文将深入解析Anki颜色系统的技术实现方案。

系统架构概览

Anki的颜色系统采用分层架构设计：

核心组件技术解析

1. SCSS变量定义层

Anki使用SCSS预处理器定义色彩变量，通过_root-vars.scss文件管理：

/*! colors */
:root {
    $colors: map.get($vars, colors);
    @each $name, $val in create-vars-from-map($colors, light) {
        --#{$name}: #{$val};
    }
    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root {
        @each $name, $val in create-vars-from-map($colors, dark) {
            --#{$name}: #{$val};
        }
        color-scheme: dark;
    }
}

2. 自动化配置生成

Anki开发了extract_sass_vars.py工具，自动从SCSS变量生成Python配置：

def extract_colors_from_scss(root_vars_css, colors_py):
    colors = {}
    with open(root_vars_css) as f:
        data = f.read()
    
    for line in re.split(r"[;\{\}]|\*\/", data):
        if m := re.match(r"--(.+):(.+)$", line):
            var = m.group(1).replace("-", "_").upper()
            val = m.group(2)
            colors[var] = {"light": val, "dark": val}
    
    with open(colors_py, "w") as buf:
        for color, val in colors.items():
            buf.write(f"{color} = {json.dumps(val, indent=4)}\n")

3. 主题管理器核心实现

ThemeManager类是颜色系统的核心，负责：

主题状态管理

class ThemeManager:
    def _determine_night_mode(self) -> bool:
        theme = aqt.mw.pm.theme()
        if theme == Theme.LIGHT:
            return False
        elif theme == Theme.DARK:
            return True
        elif is_win:
            return get_windows_dark_mode()
        elif is_mac:
            return get_macos_dark_mode()
        else:
            return get_linux_dark_mode()

平台特定的主题检测

def get_windows_dark_mode() -> bool:
    try:
        key = OpenKey(HKEY_CURRENT_USER,
                     r"Software\Microsoft\Windows\CurrentVersion\Themes\Personalize")
        return not QueryValueEx(key, "AppsUseLightTheme")[0]
    except Exception:
        return False

def get_linux_dark_mode() -> bool:
    strategies = [
        ("dbus-send --session --print-reply=literal --dest=org.freedesktop.portal.Desktop "
         "org.freedesktop.portal.Settings.Read string:'org.freedesktop.appearance' "
         "string:'color-scheme'", parse_stdout_dbus_send),
        ("gsettings get org.gnome.desktop.interface gtk-theme",
         lambda stdout: "-dark" in stdout.lower())
    ]

4. 色彩应用机制

Qt调色板配置

def _apply_palette(self, app: QApplication) -> None:
    palette = QPalette()
    text = self.qcolor(colors.FG)
    palette.setColor(QPalette.ColorRole.WindowText, text)
    palette.setColor(QPalette.ColorRole.Text, text)
    
    canvas = self.qcolor(colors.CANVAS)
    palette.setColor(QPalette.ColorRole.Window, canvas)
    palette.setColor(QPalette.ColorRole.Base, self.qcolor(colors.CANVAS_CODE))
    
    app.setPalette(palette)

动态图标着色

def icon_from_resources(self, path: str | ColoredIcon) -> QIcon:
    if isinstance(path, ColoredIcon):
        icon = QIcon(path.path)
        pixmap = icon.pixmap(16)
        painter = QPainter(pixmap)
        painter.setCompositionMode(QPainter.CompositionMode_SourceIn)
        painter.fillRect(pixmap.rect(), QColor(path.current_color(self.night_mode)))
        painter.end()
        return QIcon(pixmap)

色彩变量体系

Anki定义了完整的色彩变量体系：

变量名	描述	浅色模式值	深色模式值
FG	主要文本颜色	#202224	#e8e8e8
FG_DISABLED	禁用状态文本	#a0a0a0	#707070
FG_SUBTLE	次要文本颜色	#707070	#a0a0a0
CANVAS	窗口背景色	#f8f8f8	#202224
CANVAS_CODE	代码区域背景	#ffffff	#2a2a2a
HIGHLIGHT_BG	高亮背景色	#e0e0e0	#404040

技术特色与创新点

1. 自动化色彩管道

2. 跨平台一致性保障

通过统一的色彩变量命名和值映射，确保不同平台上的视觉一致性：

def var(self, vars: dict[str, str]) -> str:
    """根据当前主题返回正确的颜色值"""
    return vars["dark" if self.night_mode else "light"]

def qcolor(self, colors: dict[str, str]) -> QColor:
    """从CSS字符串创建QColor实例"""
    return QColor(self.var(colors))

3. 性能优化策略

• 图标缓存：对主题化图标进行缓存，避免重复渲染
• 增量更新：只在主题真正变化时更新界面
• 懒加载：按需加载色彩资源

最佳实践与开发指南

1. 添加新色彩变量

// 在 _root-vars.scss 中添加
$vars: map.merge($vars, (
    colors: (
        new-color: (
            light: #ff0000,
            dark: #00ff00,
            comment: "New color for special elements"
        )
    )
));

2. 在Python代码中使用色彩

from aqt import colors, theme_manager

# 获取当前主题下的颜色值
color_value = theme_manager.var(colors.NEW_COLOR)

# 创建QColor实例
qcolor = theme_manager.qcolor(colors.NEW_COLOR)

3. Web组件色彩集成

// 在TypeScript组件中使用CSS变量
const style = {
    color: 'var(--fg)',
    backgroundColor: 'var(--canvas)'
};

总结与展望

Anki的颜色系统通过以下技术方案解决了多平台主题管理的核心挑战：

1. 统一的色彩定义源：SCSS作为唯一真相源
2. 自动化配置生成：减少手动维护成本
3. 智能主题检测：跨平台系统主题适配
4. 动态渲染机制：支持运行时主题切换

未来可能的改进方向包括：

• 支持更多主题变体（如高对比度模式）
• 提供用户自定义色彩方案
• 增强色彩无障碍支持
• 优化移动端色彩表现

Anki的颜色系统为开源项目提供了可复用的主题管理技术方案，其设计理念和技术实现值得其他跨平台应用借鉴。

【免费下载链接】anki Anki's shared backend and web components, and the Qt frontend 项目地址: https://gitcode.com/GitHub_Trending/an/anki