Style Dictionary 中实现 SwiftUI 动态颜色的技术探索

背景介绍

在现代移动应用开发中，设计系统的跨平台一致性至关重要。Style Dictionary 作为一款强大的设计令牌管理工具，能够帮助开发者将设计系统转化为多平台可用的代码。本文聚焦于 iOS 平台，探讨如何利用 Style Dictionary 生成支持 SwiftUI 动态颜色（Dark Mode/Light Mode）的枚举结构。

传统实现方式

在传统的实现中，开发者通常会为不同的主题模式（如 Light/Dark）生成独立的枚举结构：

public enum DividerLight: DividerDesignTokens {
    public static let dividerColorDefault = Color(red: 0.910, green: 0.910, blue: 0.910, opacity: 1)
    // 其他Light模式颜色定义
}

public enum DividerDark: DividerDesignTokens {
    public static let dividerColorDefault = Color(red: 0.357, green: 0.357, blue: 0.357, opacity: 1)
    // 其他Dark模式颜色定义
}

这种方式虽然可行，但存在以下问题：

1. 需要在运行时根据当前颜色模式手动切换枚举
2. 增加了代码复杂度
3. 不符合 SwiftUI 的动态颜色设计理念

理想解决方案

更符合 SwiftUI 理念的做法是生成单一枚举，其中颜色属性能够根据系统主题自动切换：

public enum DividerTokens: DividerDesignTokens {
    public static let dividerColorDefault = Color(
        light: Color(red: 0.910, green: 0.910, blue: 0.910, opacity: 1),
        dark: Color(red: 0.357, green: 0.357, blue: 0.357, opacity: 1)
    )
    // 其他动态颜色定义
}

技术挑战

实现这种动态颜色输出面临以下技术难点：

1. Style Dictionary 通常按主题模式（Light/Dark）分别运行，每个实例只了解单一主题的上下文
2. 多个 Style Dictionary 实例写入同一文件会导致覆盖问题
3. 需要合并不同主题的颜色值到一个输出中

解决方案探索

方案一：自定义格式处理器

可以创建一个自定义的格式处理器，该处理器能够：

1. 同时加载 Light 和 Dark 主题的令牌数据
2. 在生成代码时合并两种主题的颜色定义
3. 输出包含动态颜色初始化的 Swift 代码

方案二：高级 API 使用

利用 Style Dictionary 提供的高级 API 方法：

const sdLight = new StyleDictionary(getConfig('light'));
const sdDark = new StyleDictionary(getConfig('dark'));

const [light, dark] = await Promise.all([
    sdLight.formatPlatform('ios'),
    sdDark.formatPlatform('ios')
]);

// 合并light和dark的输出，生成动态颜色代码

方案三：预处理令牌数据

在 Style Dictionary 处理前，先将 Light 和 Dark 主题的令牌数据合并为一个数据结构，然后使用自定义转换器生成动态颜色代码。

实现建议

1. 创建颜色扩展：首先在 Swift 中创建颜色扩展，支持动态颜色初始化

public extension Color {
    init(light: Color, dark: Color) {
        self.init(light: UIColor(light), dark: UIColor(dark))
    }
}

2. 设计令牌结构：确保令牌结构能够同时包含 Light 和 Dark 模式的值

3. 自定义格式模板：创建能够处理多主题数据的自定义模板

4. 构建流程调整：可能需要调整构建流程，先收集所有主题数据再生成最终代码

最佳实践

1. 保持令牌结构清晰：为颜色令牌设计明确的命名空间和结构
2. 文档记录：详细记录动态颜色的实现方式和用法
3. 测试覆盖：确保生成的代码在各种主题切换场景下表现正常
4. 性能考量：评估动态颜色初始化对应用性能的影响

未来展望

随着 Style Dictionary 的不断发展，期待官方提供更便捷的多主题合并输出功能，简化动态颜色的生成流程。同时，SwiftUI 的演进也可能带来更优雅的动态颜色实现方式。

通过本文介绍的方法，开发者可以在现有技术条件下，实现符合 SwiftUI 理念的动态颜色枚举生成，提升代码的可维护性和开发体验。