fix(react): color mode control was not working (#13)

* fix(react): color mode control was not working

---------

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

Author: lixl39505

CHANGELOG.md

@@ -1,3 +1,7 @@
+## 0.4.5 (July 25, 2025)
+
+- fix(react): color mode control was not working
+
 ## 0.4.4 (July 24, 2025)
 
 - feat(react): supports colorMode configuration

packages/react/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@blocklet/theme-builder-react",
   "description": "React component library for Blocklet Theme Builder",
-  "version": "0.4.4",
+  "version": "0.4.5",
   "license": "0BSD",
   "keywords": [
     "MUI",
@@ -53,12 +53,12 @@
   },
   "dependencies": {
     "@abtnode/constant": "^1.16.46",
-    "@arcblock/did-connect": "^3.0.27",
-    "@arcblock/icons": "^3.0.27",
-    "@arcblock/ux": "^3.0.27",
+    "@arcblock/did-connect": "^3.0.32",
+    "@arcblock/icons": "^3.0.32",
+    "@arcblock/ux": "^3.0.32",
     "@babel/eslint-parser": "^7.28.0",
-    "@blocklet/theme": "^3.0.27",
-    "@blocklet/ui-react": "^3.0.27",
+    "@blocklet/theme": "^3.0.32",
+    "@blocklet/ui-react": "^3.0.32",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
     "@iconify/react": "^5.2.1",

packages/react/src/components/Editor/ColorsSection/ColorsSection.tsx

@@ -42,8 +42,10 @@ function ColorsSection() {
   const { t } = useLocaleContext();
   const theme = useTheme();
   const concept = useThemeBuilder((s) => s.getCurrentConcept());
-  const showColorMode = useThemeBuilder((s) => s.showColorMode);
-  const { mode, prefer } = concept;
+  const themeMode = useThemeBuilder((s) => s.themeMode);
+  const mode = useThemeBuilder((s) => s.getThemeMode());
+  const isShowThemeMode = useThemeBuilder((s) => s.shouldShowThemeMode());
+  const { prefer } = concept;
   const isMobile = useMobile();
   const containerRef = useRef<HTMLDivElement>(null);
   const { width: containerWidth } = useDomSize(containerRef);
@@ -166,7 +168,7 @@ function ColorsSection() {
         {/* 工具栏 */}
         <Box sx={{ display: 'flex', gap: 1, justifyContent: 'flex-end', alignItems: 'center' }}>
           {/* 模式切换 */}
-          {showColorMode && (
+          {isShowThemeMode && (
             <Box
               sx={{
                 display: 'flex',

packages/react/src/components/Editor/ColorsSection/ColorsSettingMenu.tsx

@@ -8,7 +8,7 @@ import type { ThemePrefer } from 'src/types/theme';
 
 export function ColorsSettingMenu() {
   const { t } = useLocaleContext();
-  const showColorMode = useThemeBuilder((s) => s.showColorMode);
+  const isShowThemeMode = useThemeBuilder((s) => s.shouldShowThemeMode());
   const prefer = useThemeBuilder((s) => s.getCurrentConcept().prefer);
   const setThemePrefer = useThemeBuilder((s) => s.setThemePrefer);
   const resetColors = useThemeBuilder((s) => s.resetColors);
@@ -65,7 +65,7 @@ export function ColorsSettingMenu() {
             sx: { minWidth: 120 },
           },
         }}>
-        {showColorMode && (
+        {isShowThemeMode && (
           <>
             <MenuItem onClick={() => handleOptionSelect('system')} selected={prefer === 'system'}>
               <Typography variant="body2">{t('editor.colorSection.modeDisable.none')}</Typography>

packages/react/src/index.tsx

@@ -67,8 +67,7 @@ export interface BaseThemeBuilderProps extends Omit<BoxProps, 'onChange'> {
   showPreview?: boolean;
   showEditor?: boolean;
   showHeader?: boolean;
-  showColorMode?: boolean;
-  colorMode?: Mode;
+  themeMode?: Mode;
   locale?: Locale;
   themeOptions?: ThemeOptions;
   themeData?: ThemeData | null;
@@ -81,8 +80,7 @@ export function BaseThemeBuilder({
   showPreview = false,
   showEditor = true,
   showHeader = true,
-  showColorMode = true,
-  colorMode = undefined,
+  themeMode = undefined,
   locale = 'en',
   themeOptions = {},
   themeData = undefined,
@@ -142,19 +140,10 @@ export function BaseThemeBuilder({
   useEffect(() => {
     const { setThemeMode } = store.getState();
 
-    if (colorMode === 'light' || colorMode === 'dark') {
-      setThemeMode(colorMode);
+    if (themeMode === 'light' || themeMode === 'dark') {
+      setThemeMode(themeMode, { root: true });
     }
-  }, [colorMode, store]);
-
-  // 隐藏/显示颜色模式切换
-  useEffect(() => {
-    const { setColorModeVisible } = store.getState();
-
-    if (showColorMode === true || showColorMode === false) {
-      setColorModeVisible(showColorMode);
-    }
-  }, [showColorMode, store]);
+  }, [themeMode, store]);
 
   // 监听 store 数据变化
   useEffect(() => {
@@ -220,7 +209,7 @@ export function ThemeBuilder({
     let result: ThemeData | null = null;
 
     // 无需拉取
-    if (fetchTheme === false || themeData) {
+    if (fetchTheme === false || outerThemeData) {
       setLoading(false);
       onLoad?.(null);
       return;
@@ -238,7 +227,7 @@ export function ThemeBuilder({
     } finally {
       setLoading(false);
     }
-  }, [fetchTheme, setThemeData]);
+  }, [fetchTheme, setThemeData, outerThemeData]);
 
   return <BaseThemeBuilder themeData={outerThemeData || themeData} loading={loading} onSave={handleSave} {...rest} />;
 }

packages/react/src/state/createStore.ts

@@ -85,7 +85,6 @@ const getDefaultState = () => ({
   selectedComponentId: 'Website',
   themeObject: createPreviewMuiTheme(deepmerge({ palette: { mode: 'light' } }, getDefaultThemeConfig().light), false),
   saving: false,
-  showColorMode: true,
   // 历史记录相关
   history: [],
   currentHistoryIndex: -1,
@@ -124,15 +123,6 @@ export default function createStore() {
         saveToHistory();
       },
       setSaving: (saving) => set({ saving }),
-      getThemeData: () => {
-        const { concepts, currentConceptId } = get();
-
-        return {
-          concepts: cloneDeep(concepts),
-          currentConceptId,
-        };
-      },
-      setColorModeVisible: (visible) => set({ showColorMode: visible }),
 
       // # 历史记录管理
       saveToHistory: () => {
@@ -519,12 +509,12 @@ export default function createStore() {
 
       // # ThemeOptions 编辑
       setThemeOption: (path, value) => {
-        const { saveToHistory } = get();
+        const { saveToHistory, getThemeMode } = get();
 
         set((state) => {
           const current = state.concepts.find((c) => c.id === state.currentConceptId);
           if (!current || !path) return {};
-          const { mode } = current;
+          const mode = getThemeMode();
 
           const fieldName = getThemeFieldName(path, mode);
           const themeOptions = setByPath(current.themeConfig[fieldName], path, value);
@@ -541,12 +531,12 @@ export default function createStore() {
         saveToHistory();
       },
       setThemeOptions: (configs) => {
-        const { saveToHistory } = get();
+        const { saveToHistory, getThemeMode } = get();
 
         set((state) => {
           const current = state.concepts.find((c) => c.id === state.currentConceptId);
           if (!current) return {};
-          const { mode } = current;
+          const mode = getThemeMode();
 
           let newThemeOptions = { ...current.themeConfig };
 
@@ -566,12 +556,12 @@ export default function createStore() {
         saveToHistory();
       },
       removeThemeOption: (path) => {
-        const { saveToHistory } = get();
+        const { saveToHistory, getThemeMode } = get();
 
         set((state) => {
           const current = state.concepts.find((c) => c.id === state.currentConceptId);
           if (!current || !path) return {};
-          const { mode } = current;
+          const mode = getThemeMode();
 
           const fieldName = getThemeFieldName(path, mode);
           const themeOptions = removeByPath(current.themeConfig[fieldName], path);
@@ -588,12 +578,12 @@ export default function createStore() {
         saveToHistory();
       },
       removeThemeOptions: (paths) => {
-        const { saveToHistory } = get();
+        const { saveToHistory, getThemeMode } = get();
 
         set((state) => {
           const current = state.concepts.find((c) => c.id === state.currentConceptId);
           if (!current) return {};
-          const { mode } = current;
+          const mode = getThemeMode();
 
           let newThemeOptions = { ...current.themeConfig };
           paths.forEach((p) => {
@@ -639,10 +629,17 @@ export default function createStore() {
         // 保存到历史记录
         saveToHistory();
       },
-      setThemeMode: (mode) => {
+      setThemeMode: (mode, { root = false } = {}) => {
         const { saveToHistory } = get();
 
         set((state) => {
+          // 修改根状态
+          if (root === true) {
+            return {
+              themeMode: mode,
+            };
+          }
+
           const current = state.concepts.find((c) => c.id === state.currentConceptId);
           if (!current) return {};
           return { concepts: state.concepts.map((c) => (c.id === state.currentConceptId ? { ...c, mode } : c)) };
@@ -651,6 +648,25 @@ export default function createStore() {
         // 保存到历史记录
         saveToHistory();
       },
+      getThemeMode: () => {
+        const { themeMode, getCurrentConcept } = get();
+
+        // 全局 themeMode 优先
+        if (themeMode) {
+          return themeMode;
+        }
+
+        const concept = getCurrentConcept();
+        if (concept) {
+          return concept.mode;
+        }
+        return 'light';
+      },
+      shouldShowThemeMode: () => {
+        const { themeMode } = get();
+
+        return themeMode === undefined;
+      },
       updateThemeConfig: (themeConfig) => {
         const { saveToHistory } = get();
 
@@ -664,8 +680,19 @@ export default function createStore() {
         saveToHistory();
       },
       getCurrentThemeOptions: () => {
-        const concept = get().getCurrentConcept();
-        return concept.themeConfig[concept.mode];
+        const { getCurrentConcept, getThemeMode } = get();
+        const concept = getCurrentConcept();
+        const mode = getThemeMode();
+
+        return concept.themeConfig[mode];
+      },
+      getThemeData: () => {
+        const { concepts, currentConceptId } = get();
+
+        return {
+          concepts: cloneDeep(concepts),
+          currentConceptId,
+        };
       },
 
       // # Colors 编辑
@@ -787,20 +814,18 @@ export default function createStore() {
 
   // 实时更新 themeObject
   store.subscribe(
-    (state) => [state.concepts, state.currentConceptId, state.previewSize],
+    (state) => [state.concepts, state.currentConceptId, state.previewSize, state.themeMode],
     () => {
       const state = store.getState();
       const concept = state.getCurrentConcept();
 
       let themeObject: Theme;
 
       if (concept) {
+        const mode = state.getThemeMode();
+
         themeObject = createPreviewMuiTheme(
-          deepmergeAll([
-            { palette: { mode: concept.mode } },
-            concept.themeConfig.common,
-            concept.themeConfig[concept.mode],
-          ]),
+          deepmergeAll([{ palette: { mode } }, concept.themeConfig.common, concept.themeConfig[mode]]),
           state.previewSize,
         );
       } else {

packages/react/src/types/theme.ts

@@ -64,7 +64,7 @@ export interface ThemeStoreState {
   selectedComponentId: string;
   themeObject: Theme;
   saving: boolean;
-  showColorMode: boolean;
+  themeMode?: Mode;
   history: {
     concepts: Concept[];
     currentConceptId: string;
@@ -77,8 +77,6 @@ export interface ThemeStoreModel extends ThemeStoreState {
   // # 整体设置
   resetStore: () => void;
   setSaving: (saving: boolean) => void;
-  getThemeData: () => ThemeData;
-  setColorModeVisible: (visible: boolean) => void;
 
   // # 历史记录管理
   undo: () => void;
@@ -112,9 +110,12 @@ export interface ThemeStoreModel extends ThemeStoreState {
   removeThemeOption: (path: string) => void;
   removeThemeOptions: (paths: string[]) => void;
   setThemePrefer: (prefer: ThemePrefer) => void;
-  setThemeMode: (mode: Mode) => void;
-  updateThemeConfig: (themeConfig: Concept['themeConfig']) => void;
+  setThemeMode: (mode: Mode, options?: { root?: boolean }) => void;
+  getThemeMode: () => Mode;
+  shouldShowThemeMode: () => boolean;
   getCurrentThemeOptions: () => ThemeOptions;
+  updateThemeConfig: (themeConfig: Concept['themeConfig']) => void;
+  getThemeData: () => ThemeData;
 
   // # Colors 编辑
   setColorLock: (colorKey: string, isLocked: boolean) => void;

packages/theme-builder/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@blocklet/theme-builder",
   "description": "A comprehensive tool to customize themes for Material-UI",
-  "version": "0.4.4",
+  "version": "0.4.5",
   "keywords": [
     "MUI",
     "MUI v5",

packages/theme-builder/src/hooks/useRemoteThemeSync.ts

@@ -17,9 +17,13 @@ export default function useRemoteThemeSync() {
     getTheme({
       url: schemaKey,
       headers: getAuthHeaders(),
-    }).finally(() => {
-      setLoading(false);
-    });
+    })
+      .then((data) => {
+        setThemeData(data);
+      })
+      .finally(() => {
+        setLoading(false);
+      });
   }, [setThemeData, schemaKey]);
 
   return { loading, themeData };

packages/theme-builder/src/pages/index.tsx

@@ -68,13 +68,7 @@ function Index() {
   return (
     <ErrorBoundary>
       <ThemeProvider theme={siteTheme} injectFirst>
-        <ThemeBuilder
-          showPreview
-          locale={locale}
-          colorMode={parentTheme?.palette?.mode}
-          themeData={themeData}
-          onSave={saveTheme}
-        />
+        <ThemeBuilder showPreview locale={locale} themeData={themeData} fetchTheme={false} onSave={saveTheme} />
       </ThemeProvider>
     </ErrorBoundary>
   );