@arcblock/ux 2.13.6 → 2.13.7

package/lib/Colors/index.d.ts

@@ -1,3 +1,5 @@
-export { default } from './themes/default';
+import type { Theme } from '@mui/material';
+declare const colors: Theme["palette"];
+export default colors;
 export { default as temp } from './themes/temp';
 export { default as didConnectColors } from './themes/did-connect';

package/lib/Colors/index.js

@@ -1,4 +1,6 @@
-// eslint-disable-next-line no-restricted-exports
-export { default } from './themes/default';
+import { BLOCKLET_THEME_LIGHT } from '@blocklet/theme';
+// @compatibility
+const colors = BLOCKLET_THEME_LIGHT.palette;
+export default colors;
 export { default as temp } from './themes/temp';
 export { default as didConnectColors } from './themes/did-connect';

package/lib/Config/config-provider.d.ts

@@ -1,18 +1,18 @@
 import { ReactNode } from 'react';
+import { type PaletteMode } from '@mui/material';
 import type { ThemeOptions } from '@mui/material/styles';
 import { LocaleProviderProps } from '../Locale/context';
 import { ThemeProviderProps } from '../Theme/theme-provider';
-import { ThemeMode } from '../type';
 export interface ConfigContextType {
-    mode: ThemeMode;
+    mode: PaletteMode;
     themeOptions: ThemeOptions;
     toggleMode: () => void;
 }
-export declare function isThemeRecord(theme: ThemeOptions | Record<ThemeMode, ThemeOptions>): theme is Record<ThemeMode, ThemeOptions>;
+export declare function isThemeRecord(theme: ThemeOptions | Record<PaletteMode, ThemeOptions>): theme is Record<PaletteMode, ThemeOptions>;
 export interface ConfigProviderProps extends Omit<LocaleProviderProps, 'translations'>, Omit<ThemeProviderProps, 'theme'> {
     children: ReactNode;
-    prefer?: ThemeMode;
-    theme?: ThemeOptions | Record<ThemeMode, ThemeOptions>;
+    prefer?: PaletteMode;
+    theme?: ThemeOptions | Record<PaletteMode, ThemeOptions>;
     disableBlockletTheme?: boolean;
     translations?: Record<string, any>;
 }
@@ -24,7 +24,7 @@ export declare namespace ConfigProvider {
     var useConfig: typeof import("./config-provider").useConfig;
 }
 export declare function useConfig(): {
-    mode: ThemeMode;
+    mode: PaletteMode;
     themeOptions: ThemeOptions;
     toggleMode: () => void;
     locale: import("../type").Locale;
@@ -34,5 +34,5 @@ export declare function useConfig(): {
         code: string;
         name: string;
     }[];
-    theme: import("@mui/material/styles").Theme;
+    theme: import("@mui/material").Theme;
 };

package/lib/Config/config-provider.js

@@ -35,7 +35,7 @@ export function ConfigProvider({
     }
 
     // 未启用暗色主题
-    if (!window.blocklet?.USE_DARK_THEME) {
+    if (['1', 'true'].includes(window.blocklet?.USE_DARK_THEME) === false) {
       return 'light';
     }
 

package/lib/Theme/theme.d.ts

@@ -1,54 +1,20 @@
-import { Components, type ThemeOptions } from '@mui/material/styles';
+import type { PaletteMode } from '@mui/material';
+import { type ThemeOptions } from '@mui/material/styles';
 import { deepmerge } from '@mui/utils';
-import type { Typography } from '@mui/material/styles/createTypography';
-import { ThemeMode } from '../type';
 import '@fontsource/roboto/latin-400.css';
 import '@fontsource/roboto/latin-500.css';
 import '@fontsource/roboto/latin-700.css';
 import '@fontsource/roboto/latin-ext-400.css';
 import '@fontsource/roboto/latin-ext-500.css';
 import '@fontsource/roboto/latin-ext-700.css';
-declare module '@mui/material/styles' {
-    interface Theme {
-        mode?: ThemeMode;
-        themeName?: string;
-        pageWidth?: string;
-        colors?: Record<string, string>;
-        typography: Typography & {
-            useNextVariants: boolean;
-            color: Record<string, string>;
-            button: {
-                fontWeight?: number;
-            };
-        };
-    }
-    interface ThemeOptions {
-        themeName?: string;
-        mode?: ThemeMode;
-        pageWidth?: string;
-        colors?: Record<string, string>;
-        /** @deprecated 请使用 components */
-        overrides?: Components<Omit<Theme, 'components'>>;
-    }
-    interface TypeText {
-        hint: string;
-    }
-}
-declare module '@mui/material/styles/createTypography' {
-    interface TypographyOptions {
-        useNextVariants?: boolean;
-        color?: Record<string, string>;
-    }
-}
 export declare function collectFontFamilies(obj?: {
     fontFamily?: string;
 }, fontSet?: Set<string>): Set<string>;
 export declare function loadFonts(fonts: string[]): Promise<boolean>;
-export declare function createDefaultThemeOptions(mode?: ThemeMode): ThemeOptions;
-export declare const create: ({ disableBlockletTheme, mode, pageWidth, overrides, palette, components, ...rest }?: ThemeOptions & {
+export declare function createDefaultThemeOptions(mode?: PaletteMode): ThemeOptions;
+export interface UserThemeOptions extends ThemeOptions {
     disableBlockletTheme?: boolean;
-}) => import("@mui/material/styles").Theme;
-export declare const createTheme: ({ disableBlockletTheme, mode, pageWidth, overrides, palette, components, ...rest }?: ThemeOptions & {
-    disableBlockletTheme?: boolean;
-}) => import("@mui/material/styles").Theme;
+}
+export declare const create: (...args: UserThemeOptions[]) => import("@mui/material").Theme;
+export declare const createTheme: (...args: UserThemeOptions[]) => import("@mui/material").Theme;
 export { deepmerge };

package/lib/Theme/theme.js

@@ -1,9 +1,10 @@
 /* eslint-disable no-shadow */
 // https://app.zeplin.io/styleguide/5d1436f1e97c2156f49c0725/colors
+
 import { createTheme as _createTheme, responsiveFontSizes } from '@mui/material/styles';
 import { deepmerge } from '@mui/utils';
 import webfontloader from 'webfontloader';
-import colors from '../Colors';
+import { BLOCKLET_THEME_LIGHT, BLOCKLET_THEME_DARK, DEFAULT_FONTS } from '@blocklet/theme';
 import { cleanedObj } from '../Util';
 
 // 默认只加载最基本的 roboto latin 字体
@@ -14,17 +15,6 @@ import '@fontsource/roboto/latin-ext-400.css';
 import '@fontsource/roboto/latin-ext-500.css';
 import '@fontsource/roboto/latin-ext-700.css';
 
-// 扩展 Theme
-
-// 扩展 TypographyOptions
-
-// 默认深色主题
-const defaultDarkTheme = _createTheme({
-  palette: {
-    mode: 'dark'
-  }
-});
-
 // 收集字体配置
 export function collectFontFamilies(obj, fontSet = new Set()) {
   if (!obj || typeof obj !== 'object') return fontSet;
@@ -40,8 +30,7 @@ export function collectFontFamilies(obj, fontSet = new Set()) {
 }
 
 // 动态加载字体
-const defaultFonts = ['Roboto', 'Helvetica', 'Arial', 'sans-serif']; // 后三者是系统字体，无需动态加载
-const prevFonts = new Set(defaultFonts.concat('inherit')); // inherit 属于 MUI 特殊值，无需动态加载
+const prevFonts = new Set(DEFAULT_FONTS.concat('inherit')); // inherit 属于 MUI 特殊值，无需动态加载
 export function loadFonts(fonts) {
   // 过滤出未加载的字体
   const unloadedFonts = fonts.filter(font => !prevFonts.has(font));
@@ -74,103 +63,21 @@ export function loadFonts(fonts) {
 
 // 创建默认主题配置
 export function createDefaultThemeOptions(mode = 'light') {
-  const result = {
-    palette: {
-      mode,
-      ...colors,
-      background: {
-        paper: colors.common.white,
-        default: colors.background.default
-      }
-    },
-    typography: {
-      fontFamily: defaultFonts.join(','),
-      useNextVariants: true,
-      color: {
-        // 此处 #222222 必须硬编码, layout/sidebar.js -> Icon/image 加载图片时 color 会影响加载路径
-        // TODO: 此处硬编码的色值后面需要改为 colors.grey[900],
-        //       或者如果可以的话直接删掉 typography#color, 文本颜色建议使用 theme.palette.text 中的色值?
-        //       layout 组件建议重构, sidebar 中建议使用 icon 替换 img (#366)
-        main: mode === 'light' ? '#222222' : colors.common.white,
-        gray: mode === 'light' ? colors.grey[500] : colors.grey[300]
-      },
-      // button 默认使用粗体
-      button: {
-        fontWeight: 700
-      }
-    },
-    components: {
-      MuiButton: {
-        styleOverrides: {
-          root: {
-            boxShadow: 'none'
-          }
-        }
-      },
-      MuiButtonGroup: {
-        styleOverrides: {
-          root: {
-            boxShadow: 'none'
-          }
-        }
-      },
-      MuiTableCell: {
-        styleOverrides: {
-          root: ({
-            ownerState
-          }) => ({
-            ...(ownerState.size === 'small' ? {
-              borderBottomWidth: '0',
-              paddingTop: '8px',
-              paddingBottom: '8px',
-              paddingLeft: 0,
-              paddingRight: '20px'
-            } : {
-              borderBottomWidth: '0',
-              paddingTop: '14px',
-              paddingBottom: '14px',
-              paddingLeft: 0,
-              paddingRight: '30px'
-            })
-          }),
-          head: {
-            textTransform: 'uppercase',
-            color: mode === 'light' ? colors.grey[900] : colors.grey[300]
-          },
-          body: {
-            color: mode === 'light' ? colors.grey[900] : colors.grey[300]
-          }
-        }
-      }
-    }
-  };
-
-  // 深色主题
   if (mode === 'dark') {
-    result.palette = {
-      ...defaultDarkTheme.palette,
-      background: {
-        paper: colors.grey[900],
-        default: colors.grey[900]
-      }
-    };
+    return BLOCKLET_THEME_DARK;
   }
-  return result;
+  return BLOCKLET_THEME_LIGHT;
 }
-
-// https://material-ui.com/customization/default-theme/
-export const create = ({
-  disableBlockletTheme = false,
+// 主要处理 mode 和 overrides
+const normalizeUserThemeOptions = ({
   mode = 'light',
-  pageWidth = 'md',
-  overrides,
-  // original theme options
   palette,
   components,
+  overrides,
   ...rest
-} = {}) => {
-  const userThemeOptions = {
-    themeName: 'ArcBlock',
+}) => {
+  return {
+    mode,
     palette: {
       ...palette,
       mode
@@ -179,43 +86,54 @@ export const create = ({
       ...overrides,
       ...components
     },
-    // @TODO 考虑使用 theme.shape.pageWidth
-    pageWidth,
-    // @TODO 考虑使用 theme.palette.common
-    colors: {
-      white: '#FFFFFF',
-      dark: '#4A707C',
-      gray: '#222222',
-      minor: '#9B9B9B',
-      darkText: '#DCDCDC',
-      background: '#F7F8F8',
-      yellow: '#FFCF71',
-      green: '#44cdc6',
-      red: '#D0021B',
-      blue: '#4E6AF6',
-      primary: '#222222',
-      black: '#222222',
-      secondary: '#44cdc6',
-      mint: '#44cdc6',
-      textSecondary: '#4A4A4A',
-      active: '#5b9025',
-      danger: '#D0021B',
-      lightGrey: '#BCBCBC'
-    },
-    // @deprecated use theme.palette.mode
-    mode,
     ...rest
   };
-  // Blocklet Server 后台配置的全局主题
+};
+const defaultUserThemeOptions = {
+  themeName: 'ArcBlock',
+  pageWidth: 'md',
+  disableBlockletTheme: false,
+  // @deprecated use theme.palette
+  colors: {
+    white: '#FFFFFF',
+    dark: '#4A707C',
+    gray: '#222222',
+    minor: '#9B9B9B',
+    darkText: '#DCDCDC',
+    background: '#F7F8F8',
+    yellow: '#FFCF71',
+    green: '#44cdc6',
+    red: '#D0021B',
+    blue: '#4E6AF6',
+    primary: '#222222',
+    black: '#222222',
+    secondary: '#44cdc6',
+    mint: '#44cdc6',
+    textSecondary: '#4A4A4A',
+    active: '#5b9025',
+    danger: '#D0021B',
+    lightGrey: '#BCBCBC'
+  }
+};
+
+// https://material-ui.com/customization/default-theme/
+export const create = (...args) => {
+  const userThemeOptions = args.reduce((acc, curr) => deepmerge(acc, normalizeUserThemeOptions(curr)), normalizeUserThemeOptions(defaultUserThemeOptions));
+  const {
+    mode,
+    disableBlockletTheme
+  } = userThemeOptions;
   const blockletThemeOptions = window.blocklet?.theme?.[mode] ?? {};
-  // UX Theme 默认配置
   const defaultThemeOptions = createDefaultThemeOptions(mode);
+
   // 合并配置
   let mergedThemeOptions = defaultThemeOptions;
   if (!disableBlockletTheme) {
     mergedThemeOptions = deepmerge(defaultThemeOptions, cleanedObj(blockletThemeOptions));
   }
   mergedThemeOptions = deepmerge(mergedThemeOptions, cleanedObj(userThemeOptions));
+
+  // 创建主题
   const theme = _createTheme(mergedThemeOptions);
 
   // 异步加载字体
@@ -223,7 +141,7 @@ export const create = ({
   loadFonts(Array.from(fonts));
 
   /**
-   * 响应式字体，配置后，theme.typography 会变为下面的结构
+   * 支持响应式字体，theme.typography.$variant 中会添加 @media 分支，比如
    * {
    *  "h1": {
    *    "fontSize": "3rem",

package/lib/type.d.ts

@@ -1,10 +1,9 @@
-import type { Theme } from '@mui/material';
+import type { Theme, PaletteMode } from '@mui/material';
 import type { LiteralUnion } from 'type-fest';
 
 export type $TSFixMe = any;
 export type Translations = Record<string, Record<string, any>>;
 export type Locale = LiteralUnion<'en' | 'zh', string>;
-export type ThemeMode = 'light' | 'dark';
 
 // TODO: 以下为 blocklet 应用专属的全局对象类型，可以更加具体
 export type User = Record<string, any>;
@@ -26,7 +25,7 @@ export type Blocklet = {
   version: string;
   mode: string;
   tenantMode: 'single' | 'multiple';
-  theme: Record<ThemeMode, Theme>;
+  theme: Record<PaletteMode, Theme>;
   navigation: $TSFixMe[];
   preferences: Record<string, any>;
   languages: {

package/lib/withTheme/index.d.ts

@@ -1,9 +1,8 @@
-import { Breakpoint } from '@mui/material';
+import { Breakpoint, type PaletteMode } from '@mui/material';
 import { type PaletteOptions } from '@mui/material/styles/createPalette';
 import { type TypographyOptions } from '@mui/material/styles/createTypography';
-import { ThemeMode } from '../type';
 declare function withTheme<P extends object>(Component: React.ComponentType<P>, { mode, pageWidth, palette, typography, }?: {
-    mode?: ThemeMode;
+    mode?: PaletteMode;
     pageWidth?: Breakpoint;
     palette?: PaletteOptions;
     typography?: TypographyOptions;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.13.6",
+  "version": "2.13.7",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -70,13 +70,14 @@
     "react": ">=18.2.0",
     "react-router-dom": ">=6.22.3"
   },
-  "gitHead": "1cc41a6a655f93eb1536a9dd36fe3979a2c654c8",
+  "gitHead": "9db5da4c6bc8ec9bd239bcd6d080930b52601bd2",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.13.6",
-    "@arcblock/nft-display": "^2.13.6",
-    "@arcblock/react-hooks": "^2.13.6",
+    "@arcblock/icons": "^2.13.7",
+    "@arcblock/nft-display": "^2.13.7",
+    "@arcblock/react-hooks": "^2.13.7",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+    "@blocklet/theme": "^2.13.7",
     "@fontsource/roboto": "~5.1.1",
     "@fontsource/ubuntu-mono": "^5.0.18",
     "@iconify-icons/logos": "^1.2.36",

package/src/Colors/index.ts

@@ -1,4 +1,9 @@
-// eslint-disable-next-line no-restricted-exports
-export { default } from './themes/default';
+import { BLOCKLET_THEME_LIGHT } from '@blocklet/theme';
+import type { Theme } from '@mui/material';
+
+// @compatibility
+const colors = BLOCKLET_THEME_LIGHT.palette as Theme['palette'];
+
+export default colors;
 export { default as temp } from './themes/temp';
 export { default as didConnectColors } from './themes/did-connect';

package/src/Config/config-provider.tsx

@@ -1,4 +1,5 @@
 import { createContext, useContext, ReactNode, useMemo, useState, useCallback, useEffect } from 'react';
+import { type PaletteMode } from '@mui/material';
 import type { ThemeOptions } from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import set from 'lodash/set';
@@ -6,10 +7,9 @@ import { ThemeProvider as EmotionThemeProvider } from '@emotion/react';
 import { LocaleProvider, LocaleProviderProps, useLocaleContext } from '../Locale/context';
 import ThemeProvider, { ThemeProviderProps } from '../Theme/theme-provider';
 import { createTheme, useTheme } from '../Theme';
-import { ThemeMode } from '../type';
 
 export interface ConfigContextType {
-  mode: ThemeMode;
+  mode: PaletteMode;
   themeOptions: ThemeOptions;
   toggleMode: () => void;
 }
@@ -18,8 +18,8 @@ const ConfigContext = createContext<ConfigContextType>({} as ConfigContextType);
 const preferThemeModeKey = 'blocklet_theme_prefer';
 
 export function isThemeRecord(
-  theme: ThemeOptions | Record<ThemeMode, ThemeOptions>
-): theme is Record<ThemeMode, ThemeOptions> {
+  theme: ThemeOptions | Record<PaletteMode, ThemeOptions>
+): theme is Record<PaletteMode, ThemeOptions> {
   return 'light' in theme || 'dark' in theme;
 }
 
@@ -27,8 +27,8 @@ export interface ConfigProviderProps
   extends Omit<LocaleProviderProps, 'translations'>,
     Omit<ThemeProviderProps, 'theme'> {
   children: ReactNode;
-  prefer?: ThemeMode;
-  theme?: ThemeOptions | Record<ThemeMode, ThemeOptions>;
+  prefer?: PaletteMode;
+  theme?: ThemeOptions | Record<PaletteMode, ThemeOptions>;
   disableBlockletTheme?: boolean;
   translations?: Record<string, any>;
 }
@@ -51,18 +51,18 @@ export function ConfigProvider({
   onLoadingTranslation,
 }: ConfigProviderProps) {
   const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
-  const [mode, setMode] = useState<ThemeMode>(() => {
+  const [mode, setMode] = useState<PaletteMode>(() => {
     if (prefer) {
       return prefer;
     }
 
     // 未启用暗色主题
-    if (!window.blocklet?.USE_DARK_THEME) {
+    if (['1', 'true'].includes(window.blocklet?.USE_DARK_THEME) === false) {
       return 'light';
     }
 
     // 本地缓存
-    const localPrefer = localStorage.getItem(preferThemeModeKey) as ThemeMode;
+    const localPrefer = localStorage.getItem(preferThemeModeKey) as PaletteMode;
     if (localPrefer && (localPrefer === 'light' || localPrefer === 'dark')) {
       return localPrefer;
     }

package/src/Theme/theme.ts

@@ -1,12 +1,11 @@
 /* eslint-disable no-shadow */
 // https://app.zeplin.io/styleguide/5d1436f1e97c2156f49c0725/colors
-import { createTheme as _createTheme, Components, responsiveFontSizes, type ThemeOptions } from '@mui/material/styles';
+import type { PaletteMode } from '@mui/material';
+import { createTheme as _createTheme, responsiveFontSizes, type ThemeOptions } from '@mui/material/styles';
 import { deepmerge } from '@mui/utils';
-import type { Typography } from '@mui/material/styles/createTypography';
 import webfontloader from 'webfontloader';
+import { BLOCKLET_THEME_LIGHT, BLOCKLET_THEME_DARK, DEFAULT_FONTS } from '@blocklet/theme';
 
-import colors from '../Colors';
-import { ThemeMode } from '../type';
 import { cleanedObj } from '../Util';
 
 // 默认只加载最基本的 roboto latin 字体
@@ -17,44 +16,6 @@ import '@fontsource/roboto/latin-ext-400.css';
 import '@fontsource/roboto/latin-ext-500.css';
 import '@fontsource/roboto/latin-ext-700.css';
 
-// 扩展 Theme
-declare module '@mui/material/styles' {
-  interface Theme {
-    mode?: ThemeMode;
-    themeName?: string;
-    pageWidth?: string;
-    colors?: Record<string, string>;
-    typography: Typography & {
-      useNextVariants: boolean;
-      color: Record<string, string>;
-      button: {
-        fontWeight?: number;
-      };
-    };
-  }
-  interface ThemeOptions {
-    themeName?: string;
-    mode?: ThemeMode;
-    pageWidth?: string;
-    colors?: Record<string, string>;
-    /** @deprecated 请使用 components */
-    overrides?: Components<Omit<Theme, 'components'>>;
-  }
-  interface TypeText {
-    hint: string;
-  }
-}
-// 扩展 TypographyOptions
-declare module '@mui/material/styles/createTypography' {
-  interface TypographyOptions {
-    useNextVariants?: boolean;
-    color?: Record<string, string>;
-  }
-}
-
-// 默认深色主题
-const defaultDarkTheme = _createTheme({ palette: { mode: 'dark' } });
-
 // 收集字体配置
 export function collectFontFamilies(obj?: { fontFamily?: string }, fontSet: Set<string> = new Set()): Set<string> {
   if (!obj || typeof obj !== 'object') return fontSet;
@@ -78,8 +39,7 @@ export function collectFontFamilies(obj?: { fontFamily?: string }, fontSet: Set<
 }
 
 // 动态加载字体
-const defaultFonts = ['Roboto', 'Helvetica', 'Arial', 'sans-serif']; // 后三者是系统字体，无需动态加载
-const prevFonts = new Set<string>(defaultFonts.concat('inherit')); // inherit 属于 MUI 特殊值，无需动态加载
+const prevFonts = new Set<string>(DEFAULT_FONTS.concat('inherit')); // inherit 属于 MUI 特殊值，无需动态加载
 export function loadFonts(fonts: string[]) {
   // 过滤出未加载的字体
   const unloadedFonts = fonts.filter((font) => !prevFonts.has(font));
@@ -112,105 +72,22 @@ export function loadFonts(fonts: string[]) {
 }
 
 // 创建默认主题配置
-export function createDefaultThemeOptions(mode: ThemeMode = 'light'): ThemeOptions {
-  const result: ThemeOptions = {
-    palette: {
-      mode,
-      ...colors,
-      background: {
-        paper: colors.common.white,
-        default: colors.background.default,
-      },
-    },
-    typography: {
-      fontFamily: defaultFonts.join(','),
-      useNextVariants: true,
-      color: {
-        // 此处 #222222 必须硬编码, layout/sidebar.js -> Icon/image 加载图片时 color 会影响加载路径
-        // TODO: 此处硬编码的色值后面需要改为 colors.grey[900],
-        //       或者如果可以的话直接删掉 typography#color, 文本颜色建议使用 theme.palette.text 中的色值?
-        //       layout 组件建议重构, sidebar 中建议使用 icon 替换 img (#366)
-        main: mode === 'light' ? '#222222' : colors.common.white,
-        gray: mode === 'light' ? colors.grey[500] : colors.grey[300],
-      },
-      // button 默认使用粗体
-      button: {
-        fontWeight: 700,
-      },
-    },
-    components: {
-      MuiButton: {
-        styleOverrides: {
-          root: {
-            boxShadow: 'none',
-          },
-        },
-      },
-      MuiButtonGroup: {
-        styleOverrides: {
-          root: {
-            boxShadow: 'none',
-          },
-        },
-      },
-      MuiTableCell: {
-        styleOverrides: {
-          root: ({ ownerState }) => ({
-            ...(ownerState.size === 'small'
-              ? {
-                  borderBottomWidth: '0',
-                  paddingTop: '8px',
-                  paddingBottom: '8px',
-                  paddingLeft: 0,
-                  paddingRight: '20px',
-                }
-              : {
-                  borderBottomWidth: '0',
-                  paddingTop: '14px',
-                  paddingBottom: '14px',
-                  paddingLeft: 0,
-                  paddingRight: '30px',
-                }),
-          }),
-          head: {
-            textTransform: 'uppercase',
-            color: mode === 'light' ? colors.grey[900] : colors.grey[300],
-          },
-          body: {
-            color: mode === 'light' ? colors.grey[900] : colors.grey[300],
-          },
-        },
-      },
-    },
-  };
-
-  // 深色主题
+export function createDefaultThemeOptions(mode: PaletteMode = 'light') {
   if (mode === 'dark') {
-    result.palette = {
-      ...defaultDarkTheme.palette,
-      background: {
-        paper: colors.grey[900],
-        default: colors.grey[900],
-      },
-    };
+    return BLOCKLET_THEME_DARK;
   }
 
-  return result;
+  return BLOCKLET_THEME_LIGHT;
 }
 
-// https://material-ui.com/customization/default-theme/
-export const create = ({
-  disableBlockletTheme = false,
-  mode = 'light',
-  pageWidth = 'md',
-  overrides,
-  // original theme options
-  palette,
-  components,
-  ...rest
-}: ThemeOptions & { disableBlockletTheme?: boolean } = {}) => {
-  const userThemeOptions: ThemeOptions = {
-    themeName: 'ArcBlock',
+export interface UserThemeOptions extends ThemeOptions {
+  disableBlockletTheme?: boolean;
+}
+
+// 主要处理 mode 和 overrides
+const normalizeUserThemeOptions = ({ mode = 'light', palette, components, overrides, ...rest }: UserThemeOptions) => {
+  return {
+    mode,
     palette: {
       ...palette,
       mode,
@@ -219,43 +96,55 @@ export const create = ({
       ...overrides,
       ...components,
     },
-    // @TODO 考虑使用 theme.shape.pageWidth
-    pageWidth,
-    // @TODO 考虑使用 theme.palette.common
-    colors: {
-      white: '#FFFFFF',
-      dark: '#4A707C',
-      gray: '#222222',
-      minor: '#9B9B9B',
-      darkText: '#DCDCDC',
-      background: '#F7F8F8',
-      yellow: '#FFCF71',
-      green: '#44cdc6',
-      red: '#D0021B',
-      blue: '#4E6AF6',
-      primary: '#222222',
-      black: '#222222',
-      secondary: '#44cdc6',
-      mint: '#44cdc6',
-      textSecondary: '#4A4A4A',
-      active: '#5b9025',
-      danger: '#D0021B',
-      lightGrey: '#BCBCBC',
-    },
-    // @deprecated use theme.palette.mode
-    mode,
     ...rest,
   };
-  // Blocklet Server 后台配置的全局主题
+};
+
+const defaultUserThemeOptions: UserThemeOptions = {
+  themeName: 'ArcBlock',
+  pageWidth: 'md',
+  disableBlockletTheme: false,
+  // @deprecated use theme.palette
+  colors: {
+    white: '#FFFFFF',
+    dark: '#4A707C',
+    gray: '#222222',
+    minor: '#9B9B9B',
+    darkText: '#DCDCDC',
+    background: '#F7F8F8',
+    yellow: '#FFCF71',
+    green: '#44cdc6',
+    red: '#D0021B',
+    blue: '#4E6AF6',
+    primary: '#222222',
+    black: '#222222',
+    secondary: '#44cdc6',
+    mint: '#44cdc6',
+    textSecondary: '#4A4A4A',
+    active: '#5b9025',
+    danger: '#D0021B',
+    lightGrey: '#BCBCBC',
+  },
+};
+
+// https://material-ui.com/customization/default-theme/
+export const create = (...args: UserThemeOptions[]) => {
+  const userThemeOptions = args.reduce(
+    (acc, curr) => deepmerge(acc, normalizeUserThemeOptions(curr)),
+    normalizeUserThemeOptions(defaultUserThemeOptions)
+  );
+  const { mode, disableBlockletTheme } = userThemeOptions;
   const blockletThemeOptions = window.blocklet?.theme?.[mode] ?? {};
-  // UX Theme 默认配置
   const defaultThemeOptions = createDefaultThemeOptions(mode);
+
   // 合并配置
   let mergedThemeOptions = defaultThemeOptions;
   if (!disableBlockletTheme) {
     mergedThemeOptions = deepmerge(defaultThemeOptions, cleanedObj(blockletThemeOptions));
   }
   mergedThemeOptions = deepmerge(mergedThemeOptions, cleanedObj(userThemeOptions));
+
+  // 创建主题
   const theme = _createTheme(mergedThemeOptions);
 
   // 异步加载字体
@@ -263,7 +152,7 @@ export const create = ({
   loadFonts(Array.from(fonts));
 
   /**
-   * 响应式字体，配置后，theme.typography 会变为下面的结构
+   * 支持响应式字体，theme.typography.$variant 中会添加 @media 分支，比如
    * {
    *  "h1": {
    *    "fontSize": "3rem",

package/src/type.d.ts

@@ -1,10 +1,9 @@
-import type { Theme } from '@mui/material';
+import type { Theme, PaletteMode } from '@mui/material';
 import type { LiteralUnion } from 'type-fest';
 
 export type $TSFixMe = any;
 export type Translations = Record<string, Record<string, any>>;
 export type Locale = LiteralUnion<'en' | 'zh', string>;
-export type ThemeMode = 'light' | 'dark';
 
 // TODO: 以下为 blocklet 应用专属的全局对象类型，可以更加具体
 export type User = Record<string, any>;
@@ -26,7 +25,7 @@ export type Blocklet = {
   version: string;
   mode: string;
   tenantMode: 'single' | 'multiple';
-  theme: Record<ThemeMode, Theme>;
+  theme: Record<PaletteMode, Theme>;
   navigation: $TSFixMe[];
   preferences: Record<string, any>;
   languages: {

package/src/withTheme/index.tsx

@@ -1,12 +1,11 @@
 import { useEffect } from 'react';
 import { Global, css } from '@emotion/react';
 import CssBaseline from '@mui/material/CssBaseline';
-import { Breakpoint } from '@mui/material';
+import { Breakpoint, type PaletteMode } from '@mui/material';
 import { type PaletteOptions } from '@mui/material/styles/createPalette';
 import { type TypographyOptions } from '@mui/material/styles/createTypography';
 
 import { createTheme, ThemeProvider } from '../Theme';
-import { ThemeMode } from '../type';
 
 function withTheme<P extends object>(
   Component: React.ComponentType<P>,
@@ -15,7 +14,7 @@ function withTheme<P extends object>(
     pageWidth = 'md',
     palette,
     typography,
-  }: { mode?: ThemeMode; pageWidth?: Breakpoint; palette?: PaletteOptions; typography?: TypographyOptions } = {}
+  }: { mode?: PaletteMode; pageWidth?: Breakpoint; palette?: PaletteOptions; typography?: TypographyOptions } = {}
 ) {
   const theme = createTheme({ mode, pageWidth, palette, typography });