Semi Design 暗黑模式主题色计算逻辑分析与修复

问题背景

在 Semi Design 设计系统中，DSM（Design System Manager）模块负责管理设计令牌（Design Tokens），其中包括颜色主题的生成与管理。用户报告了一个关于暗黑模式下主题色计算的问题：当在亮色模式修改主色后切换到暗黑模式时，色盘颜色没有自动重新更新。

问题分析

通过分析代码发现，问题的根源在于颜色计算逻辑的处理顺序不当。具体表现为：

1. 在亮色模式下，用户修改主色后系统会正确生成对应的色盘
2. 但当切换到暗黑模式时，系统没有重新基于新的主色计算暗黑模式的色盘
3. 而是直接使用了亮色模式计算出的色盘结果

这种处理方式导致了暗黑模式下的色盘显示不符合预期，特别是编号为4的颜色（主色）没有正确更新。

技术细节

问题的核心在于颜色计算函数的执行流程。原始实现中：

1. 首先计算亮色模式的色盘
2. 然后简单地替换某些颜色值来生成暗黑模式色盘
3. 没有考虑到当主色变化时，暗黑模式的色盘需要重新计算

正确的做法应该是：

1. 在亮色模式下计算色盘
2. 切换到暗黑模式时，基于新的主色重新计算整个色盘
3. 确保编号为4的颜色作为基础色阶

解决方案

修复方案主要包括：

1. 调整颜色计算流程，确保暗黑模式切换时重新计算色盘
2. 将主色替换逻辑移到计算完成后执行
3. 保证编号为4的颜色始终作为基础色阶

修复后的实现确保了：

• 亮色模式修改主色后，暗黑模式色盘会自动更新
• 颜色计算更加准确和一致
• 用户体验更加流畅

影响范围

该修复主要影响：

1. DSM 中的主题管理功能
2. 暗黑模式下的颜色显示
3. 设计令牌生成过程

总结

这个修复案例展示了设计系统中颜色管理的重要性。正确的颜色计算流程不仅能保证视觉一致性，还能提升用户体验。Semi Design 通过这次修复，进一步增强了其设计系统的稳定性和可靠性。

对于开发者而言，这也提醒我们在实现主题切换功能时，需要考虑各种模式下的重新计算逻辑，而不仅仅是简单的值替换。这种细心的处理能够避免很多潜在的显示问题。