fix(core): typography color should not be shared between light and dark (#3)

* fix: typography color configuration should distinguish between light and dark themes

* chore: add pr template

---------

Co-authored-by: july <[email protected]>

Author: lixl39505

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,27 @@
+### 关联 Issue
+
+<!-- 请用 fixes、closes、resolves、relates 这些关键词来关联 issue，原则上，所有 PR 都应该有关联 Issue -->
+
+### 主要改动
+
+<!--
+  @example:
+    1. 修复了 xxx
+    2. 改进了 xxx
+    3. 调整了 xxx
+-->
+
+### 界面截图
+
+<!-- 如果改动的是跟 UI 相关的，不论是 CLI 还是 WEB 都应该截图 -->
+
+### 测试计划 (暂无)
+
+### 检查清单
+
+- [ ] 本次变更新增了文件需要被包含在 npm 包的文件，且对应 package.json 的 files 字段包括了这些新增的文件
+- [ ] 本次变更需要更新文档，并且我更新了相关文档，如果还没更新文档，请新建文档更新的 Issue 并关联上来
+- [ ] 本次变更的兼容性测试覆盖了 Chrome
+- [ ] 本次变更的兼容性测试覆盖了 Safari
+- [ ] 本次变更的兼容性测试覆盖了 PC 端
+- [ ] 本次变更的兼容性测试覆盖了移动端【手机浏览器、钱包内置浏览器】

CHANGELOG.md

@@ -1,3 +1,7 @@
+## 0.1.15 (2025-5-10)
+
+- fix: typography color configuration should distinguish between light and dark themes
+
 ## 0.1.14 (2025-5-7)
 
 - feat: shared font configuration for light and dark modes

package.json

@@ -2,7 +2,7 @@
   "name": "@blocklet/theme-builder",
   "private": true,
   "description": "A comprehensive tool to customize themes for Material-UI",
-  "version": "0.1.14",
+  "version": "0.1.15",
   "keywords": [
     "MUI",
     "MUI v5",

src/state/reducers.ts

@@ -136,27 +136,40 @@ export default (state = initialState, action: any) => {
       const currentModeTheme = action.themeOptions;
       const otherMode = currentState.mode === 'light' ? 'dark' : 'light';
       const otherModeTheme = currentState.themeOptions[otherMode];
-      const excludeFields = ['palette', 'components'];
-      const { palette, components } = otherModeTheme;
+      const excludeFields = ['palette', 'components', 'shadows'];
+      const { palette, components, typography, shadows } = otherModeTheme;
+
+      // 只保留当前主题中存在的共享字段
+      const newOtherModeTheme: ThemeOptions = {
+        ...Object.keys(currentModeTheme).reduce(
+          (acc, key) => {
+            if (!excludeFields.includes(key)) {
+              acc[key] = currentModeTheme[key];
+            }
+            return acc;
+          },
+          {} as Record<string, unknown>,
+        ),
+        palette,
+        components,
+        shadows,
+      };
+
+      // 保留历史遗留字段 typography.color
+      if (typeof typography === 'object' && typography.color) {
+        if (typeof newOtherModeTheme.typography === 'object' && newOtherModeTheme.typography) {
+          newOtherModeTheme.typography = {
+            ...newOtherModeTheme.typography,
+            color: typography.color,
+          };
+        }
+      }
 
       // 创建新的主题配置，保持共享字段同步
       const newThemeOptions = {
         ...currentState.themeOptions,
         [currentState.mode]: currentModeTheme,
-        [otherMode]: {
-          // 只保留当前主题中存在的共享字段
-          ...Object.keys(currentModeTheme).reduce(
-            (acc, key) => {
-              if (!excludeFields.includes(key)) {
-                acc[key] = currentModeTheme[key];
-              }
-              return acc;
-            },
-            {} as Record<string, unknown>,
-          ),
-          palette,
-          components,
-        },
+        [otherMode]: newOtherModeTheme,
       };
 
       return {

version

@@ -1 +1 @@
-0.1.14
+0.1.15