@arcblock/ux 2.13.21 → 2.13.24

package/lib/Theme/theme.js

@@ -3,7 +3,6 @@
 
 import { createTheme as _createTheme, responsiveFontSizes } from '@mui/material/styles';
 import { deepmerge } from '@mui/utils';
-import pick from 'lodash/pick';
 import webfontloader from 'webfontloader';
 import { BLOCKLET_THEME_LIGHT, BLOCKLET_THEME_DARK, DEFAULT_FONTS, BLOCKLET_THEME_PREFER_KEY } from '@blocklet/theme';
 import { cleanedObj, deepmergeAll } from '../Util';
@@ -16,6 +15,11 @@ import '@fontsource/roboto/latin-ext-400.css';
 import '@fontsource/roboto/latin-ext-500.css';
 import '@fontsource/roboto/latin-ext-700.css';
 
+/** 是否是 MUI Theme 对象 */
+export function isTheme(obj) {
+  return obj && typeof obj === 'object' && obj.palette && typeof obj.palette.getContrastText === 'function';
+}
+
 // 收集字体配置
 export function collectFontFamilies(obj, fontSet = new Set()) {
   if (!obj || typeof obj !== 'object') return fontSet;
@@ -90,15 +94,12 @@ export function createDefaultThemeOptions(mode = 'light') {
   }
   return BLOCKLET_THEME_LIGHT;
 }
-
 // 用于获取 Blocklet Theme 配置，便于用户创建自定义主题
-
 export function lazyThemeConfig(mode) {
-  const fields = ['palette'];
   let config = null;
   return () => {
     if (config) return config;
-    config = deepmerge(pick(createDefaultThemeOptions(mode), fields), pick(window.blocklet?.theme?.[mode] ?? {}, fields));
+    config = deepmerge(createDefaultThemeOptions(mode), window.blocklet?.theme?.[mode] ?? {});
     return config;
   };
 }

package/package.json

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

package/src/Config/config-provider.tsx

@@ -1,49 +1,10 @@
-import { createContext, useContext, ReactNode, useMemo, useState, useCallback, useEffect } from 'react';
-import { ThemeOptions, type PaletteMode } from '@mui/material';
-import { BLOCKLET_THEME_PREFER_KEY } from '@blocklet/theme';
-import set from 'lodash/set';
-import { ThemeProvider as EmotionThemeProvider } from '@emotion/react';
+import { type ReactNode } from 'react';
 import { LocaleProvider, LocaleProviderProps, useLocaleContext } from '../Locale/context';
-import ThemeProvider, { ThemeProviderProps } from '../Theme/theme-provider';
-import {
-  createTheme,
-  getDefaultThemePrefer,
-  lazyThemeConfig,
-  useTheme,
-  type UserThemeOptions,
-  type ThemeConfig,
-} from '../Theme';
+import ThemeProvider, { type ThemeProviderProps, useColorScheme } from '../Theme/theme-provider';
+import { useTheme } from '../Theme';
 
-type Prefer = 'light' | 'dark' | 'system';
-
-export interface ConfigContextType {
-  mode: PaletteMode;
-  prefer?: Prefer;
-  themeOptions: UserThemeOptions;
-  toggleMode: () => void;
-}
-
-const resolveMode = (prefer?: Prefer): PaletteMode => {
-  if (prefer) {
-    if (prefer === 'system') {
-      // 取系统默认
-      return getDefaultThemePrefer({ theme: { prefer: 'system' } });
-    }
-    return prefer;
-  }
-
-  return getDefaultThemePrefer();
-};
-
-const ConfigContext = createContext<ConfigContextType>({} as ConfigContextType);
-
-export interface ConfigProviderProps
-  extends Omit<LocaleProviderProps, 'translations'>,
-    Omit<ThemeProviderProps, 'theme'> {
+export interface ConfigProviderProps extends Omit<LocaleProviderProps, 'translations'>, ThemeProviderProps {
   children: ReactNode;
-  prefer?: Prefer;
-  theme?: UserThemeOptions | ((config: ThemeConfig) => UserThemeOptions);
-  disableBlockletTheme?: boolean;
   translations?: Record<string, any>;
 }
 
@@ -52,91 +13,48 @@ export interface ConfigProviderProps
  */
 export function ConfigProvider({
   children,
-  // theme config
+  // theme provider
+  theme,
+  injectFirst,
+  darkSchemeClass,
   prefer,
-  theme: themeOptions,
   disableBlockletTheme = false,
-  injectFirst,
-  // locale config
+  enableColorScheme,
+  // locale provider
   locale,
   fallbackLocale,
   translations = {},
   languages,
   onLoadingTranslation,
 }: ConfigProviderProps) {
-  const [mode, setMode] = useState<PaletteMode>(() => resolveMode(prefer));
-
-  const _themeOptions = useMemo(() => {
-    let result: ThemeOptions = {};
-    const getThemeConfig = lazyThemeConfig(mode);
-
-    if (themeOptions) {
-      if (typeof themeOptions === 'function') {
-        result = themeOptions(getThemeConfig());
-      } else {
-        result = { ...themeOptions };
-      }
-    }
-
-    set(result, 'palette.mode', mode);
-    set(result, 'mode', mode);
-
-    return result;
-  }, [mode, themeOptions]);
-
-  const theme = useMemo(() => {
-    return createTheme({ ..._themeOptions, disableBlockletTheme });
-  }, [_themeOptions, disableBlockletTheme]);
-
-  const toggleMode = useCallback(() => {
-    const newMode = mode === 'light' ? 'dark' : 'light';
-    setMode(newMode);
-    localStorage.setItem(BLOCKLET_THEME_PREFER_KEY, newMode);
-  }, [mode, setMode]);
-
-  const config = useMemo(
-    () => ({
-      mode,
-      themeOptions: _themeOptions,
-      toggleMode,
-      prefer,
-    }),
-    [mode, prefer, _themeOptions, toggleMode]
-  );
-
-  // change prefer manually
-  useEffect(() => {
-    if (prefer) {
-      setMode(resolveMode(prefer));
-    }
-  }, [prefer, setMode]);
-
   return (
-    <ConfigContext.Provider value={config}>
+    <ThemeProvider
+      theme={theme}
+      injectFirst={injectFirst}
+      darkSchemeClass={darkSchemeClass}
+      prefer={prefer}
+      disableBlockletTheme={disableBlockletTheme}
+      enableColorScheme={enableColorScheme}>
       <LocaleProvider
         locale={locale}
         fallbackLocale={fallbackLocale}
         translations={translations}
         onLoadingTranslation={onLoadingTranslation}
         languages={languages}>
-        <ThemeProvider theme={theme} injectFirst={injectFirst}>
-          <EmotionThemeProvider theme={theme}>{children}</EmotionThemeProvider>
-        </ThemeProvider>
+        {children}
       </LocaleProvider>
-    </ConfigContext.Provider>
+    </ThemeProvider>
   );
 }
 
 export function useConfig() {
   const theme = useTheme();
   const localeCtx = useLocaleContext();
-  const configCtx = useContext(ConfigContext);
+  const colorSchemeCtx = useColorScheme();
 
   return {
     theme,
     ...localeCtx,
-    ...configCtx,
+    ...colorSchemeCtx,
   };
 }
-
-ConfigProvider.useConfig = useConfig;

package/src/Config/theme-mode-toggle.tsx

@@ -1,10 +1,10 @@
 import { IconButton } from '@mui/material';
 import LightModeOutlinedIcon from '@mui/icons-material/LightModeOutlined';
 import Brightness2OutlinedIcon from '@mui/icons-material/Brightness2Outlined';
-import { useConfig } from './config-provider';
+import { useColorScheme } from '../Theme/theme-provider';
 
 export default function ThemeModeToggle() {
-  const { mode, toggleMode, prefer } = useConfig();
+  const { mode, toggleMode, prefer } = useColorScheme();
 
   if (!toggleMode) {
     if (process.env.NODE_ENV !== 'production') {

package/src/NavMenu/products.tsx

@@ -1,7 +1,7 @@
 import { useRef } from 'react';
 import { Link } from 'react-router-dom';
 import { useCreation, useMemoizedFn } from 'ahooks';
-import { Box, BoxProps, Grid } from '@mui/material';
+import { Box, BoxProps, Grid, useTheme } from '@mui/material';
 import SubItemGroup from './sub-item-group';
 import { Item } from './nav-menu';
 import { styled } from '../Theme';
@@ -26,6 +26,7 @@ import DidWalletSvg from './images/did-wallet.svg?react';
 import DidNameServiceSvg from './images/did-name-service.svg?react';
 import VCSvg from './images/vc.svg?react';
 import DidConnectSvg from './images/did-connect.svg?react';
+import PaymentKitPng from './images/payment-kit.png';
 
 const translations = {
   en: {
@@ -54,6 +55,9 @@ const translations = {
       alKit: {
         description: 'Boost apps with AI',
       },
+      paymentKit: {
+        description: 'Effortless Crypto & Card Payments',
+      },
       blockletStore: {
         description: 'Discover & deploy apps',
       },
@@ -118,6 +122,9 @@ const translations = {
       alKit: {
         description: 'AI 赋能应用',
       },
+      paymentKit: {
+        description: '便捷的加密货币和银行卡支付',
+      },
       blockletStore: {
         description: '发现和部署应用程序',
       },
@@ -189,6 +196,7 @@ export interface ProductsProps extends BoxProps {
 
 export default function Products({ className, isOpen, ...rest }: ProductsProps) {
   const { mode } = useNavMenuContext();
+  const { palette } = useTheme();
   const wrapperRef = useRef<HTMLDivElement>(null);
   const { locale = 'en' } = useLocaleContext() || {};
   const t = useMemoizedFn((key, data = {}) => translate(translations, key, locale, 'en', data));
@@ -229,7 +237,7 @@ export default function Products({ className, isOpen, ...rest }: ProductsProps)
                 </Link>
               ),
               description: t('products.aigne.description'),
-              icon: <AigneSvg />,
+              icon: <AigneSvg style={{ filter: palette.mode === 'dark' ? 'invert(1)' : 'none' }} />,
             },
             {
               label: (
@@ -269,6 +277,15 @@ export default function Products({ className, isOpen, ...rest }: ProductsProps)
               description: t('products.alKit.description'),
               icon: <AIKitSvg />,
             },
+            {
+              label: (
+                <Link to={`https://www.blocklet.io/${locale}`} target="_blank" rel="noreferrer noopener">
+                  Payment Kit
+                </Link>
+              ),
+              description: t('products.paymentKit.description'),
+              icon: <img src={PaymentKitPng} alt="Payment Kit" />,
+            },
           ],
           [
             {
@@ -332,7 +349,7 @@ export default function Products({ className, isOpen, ...rest }: ProductsProps)
             {
               label: (
                 <Link
-                  to={`https://www.arcblock.io/content/collections/${locale}/blocklet-server`}
+                  to={`https://www.blocklet.io/${locale}/blocklet-server`}
                   target="_blank"
                   rel="noreferrer noopener">
                   Blocklet Server
@@ -418,7 +435,7 @@ export default function Products({ className, isOpen, ...rest }: ProductsProps)
         ],
       },
     ];
-  }, [t, locale]);
+  }, [t, locale, palette]);
 
   return (
     <Wrapper ref={wrapperRef} className={`is-${mode} ${className}`} {...rest}>

package/src/NavMenu/style.ts

@@ -128,7 +128,8 @@ export const NavMenuItem = styled('li', {
       width: '32px',
       height: '32px',
       marginRight: '16px',
-      border: '1px solid #eff1f5',
+      border: '1px solid',
+      borderColor: theme.palette.grey[200],
       borderRadius: '4px',
       color: theme.palette.grey[500],
     },

package/src/PhoneInput/index.tsx

@@ -200,7 +200,8 @@ export default function PhoneInput({
 
   // 预览模式
   if (preview) {
-    const isValid = phone && validatePhoneNumber(phone, country);
+    const phoneWithCode = addCountryCodeToPhone(phone, getDialCodeByCountry(country));
+    const isValid = phone && validatePhoneNumber(phoneWithCode, country);
     const canDial = allowDial && isValid;
 
     return (

package/src/SessionUser/components/quick-login-item.tsx

@@ -41,18 +41,18 @@ export default function QuickLoginItem({
         borderRadius: 1,
         p: 2,
         transition: 'background-color 0.5s',
+        bgcolor: 'background.paper',
         '&:hover, &:active': {
-          backgroundColor: 'grey.100',
+          backgroundColor: 'action.hover',
         },
         display: 'flex',
         justifyContent: 'space-between',
         alignItems: 'center',
         cursor: 'pointer',
         '&:hover': {
-          backgroundColor: 'grey.200',
+          backgroundColor: 'action.hover',
         },
         width: '100%',
-        backgroundColor: 'white',
       }}
       onClick={onClick}>
       <Box

package/src/SessionUser/components/un-login.tsx

@@ -159,7 +159,7 @@ export default function UnLogin({ session, onLogin = noop, size = 24, dark = fal
                 maxWidth: '90vw',
                 borderColor: 'divider',
                 border: '0 !important',
-                boxShadow: `0px 8px 16px 0px ${palette.grey[200]}, 0px 0px 0px 1px ${palette.grey[200]}`,
+                boxShadow: 4,
               }}>
               <Box
                 sx={{
@@ -167,7 +167,8 @@ export default function UnLogin({ session, onLogin = noop, size = 24, dark = fal
                   alignItems: 'center',
                   gap: 1,
                   p: 2,
-                  borderBottom: '1px solid #eee',
+                  borderBottom: '1px solid',
+                  borderColor: 'divider',
                 }}>
                 {loginAppLogo && !currentState.loadAppLogoError ? (
                   <img
@@ -213,8 +214,9 @@ export default function UnLogin({ session, onLogin = noop, size = 24, dark = fal
                           overflow: 'hidden',
                           position: 'relative',
                           p: 0,
+                          bgcolor: 'background.paper',
                           '&:hover': {
-                            backgroundColor: `${palette.grey[200]} !important`,
+                            bgcolor: `${palette.action.hover} !important`,
                           },
                         }}
                         onClick={() => {
@@ -239,7 +241,6 @@ export default function UnLogin({ session, onLogin = noop, size = 24, dark = fal
                           sx={{
                             mx: 2,
                             my: '0px !important',
-                            borderColor: '#e4e4e7',
                           }}
                         />
                       ) : null}

package/src/SessionUser/components/user-info.tsx

@@ -1,4 +1,4 @@
-import { alpha, Box, Chip, Typography, useTheme } from '@mui/material';
+import { alpha, Box, Chip, Typography } from '@mui/material';
 import { Icon } from '@iconify/react';
 import SwapHorizRoundedIcon from '@iconify-icons/material-symbols/swap-horiz-rounded';
 import ArrowRightAltRoundedIcon from '@iconify-icons/material-symbols/arrow-right-alt-rounded';

package/src/Theme/index.ts

@@ -2,6 +2,7 @@ import type { CreateMUIStyled, Theme } from '@mui/material';
 import { styled as muiStyled, useTheme } from '@mui/material';
 
 export * from './theme';
+export * from './theme-provider';
 export { default as ThemeProvider } from './theme-provider';
 export { useTheme };
 

package/src/Theme/theme-provider.tsx

@@ -1,12 +1,42 @@
+import { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
-import { GlobalStyles } from '@mui/material';
+import { GlobalStyles, PaletteMode } from '@mui/material';
 import { ThemeProvider as MuiThemeProvider, Theme, useTheme } from '@mui/material/styles';
 import StyledEngineProvider from '@mui/material/StyledEngineProvider';
 import CssBaseline from '@mui/material/CssBaseline';
-import { createTheme } from './theme';
+import set from 'lodash/set';
+import { BLOCKLET_THEME_PREFER_KEY } from '@blocklet/theme';
+
+import { createTheme, getDefaultThemePrefer, isTheme, lazyThemeConfig, type UserThemeOptions } from './theme';
 
 const defaultTheme = createTheme();
 
+/** 颜色模式上下文类型 */
+export interface ColorSchemeContextType {
+  mode: PaletteMode;
+  toggleMode: () => void;
+  prefer?: Prefer;
+}
+
+export const ColorSchemeContext = createContext<ColorSchemeContextType>({} as ColorSchemeContextType);
+export function useColorScheme() {
+  return useContext(ColorSchemeContext);
+}
+
+/** 根据偏好获取颜色模式 */
+const resolveMode = (prefer?: Prefer): PaletteMode => {
+  if (prefer) {
+    if (prefer === 'system') {
+      // 取系统默认
+      return getDefaultThemePrefer({ theme: { prefer: 'system' } });
+    }
+    return prefer;
+  }
+
+  return getDefaultThemePrefer();
+};
+
+/** 深色模式全局样式 */
 function DarkSchemeStyles({ className }: { className?: string }) {
   const theme = useTheme();
 
@@ -72,22 +102,35 @@ function DarkSchemeStyles({ className }: { className?: string }) {
   return null;
 }
 
-export interface ThemeProviderProps {
+export type UxTheme = Partial<Theme> | ((outerTheme: Partial<Theme>) => Theme);
+export type Prefer = 'light' | 'dark' | 'system';
+
+interface BaseThemeProviderProps {
   children?: React.ReactNode;
-  theme: Theme;
+  theme?: UxTheme;
   injectFirst?: boolean;
   /** 指定一个类名，DarkSchemeStyles 只会作用于带有该类的元素及其后代 */
   darkSchemeClass?: string;
 }
 
-/**
- * 默认的 theme provider, 可以为 webapp/blocklet 快捷的配置好 mui theme provider
- */
-export default function ThemeProvider({ children, theme, injectFirst, darkSchemeClass }: ThemeProviderProps) {
+/** 基础的 theme provider, 可以为 webapp/blocklet 快捷的配置好 mui theme provider */
+function BaseThemeProvider({
+  children,
+  theme = defaultTheme,
+  injectFirst = true,
+  darkSchemeClass = '',
+}: BaseThemeProviderProps) {
+  const _theme = useMemo(() => {
+    if (isTheme(theme)) return theme;
+
+    // 是 ThemeOptions 则创建一个 theme
+    return createTheme(theme);
+  }, [theme]);
+
   return (
     // injectFirst 会影响 makeStyles 自定义样式和 mui styles 覆盖问题
     <StyledEngineProvider injectFirst={injectFirst}>
-      <MuiThemeProvider theme={theme}>
+      <MuiThemeProvider theme={_theme}>
         <CssBaseline />
         <DarkSchemeStyles className={darkSchemeClass} />
         {children}
@@ -96,16 +139,101 @@ export default function ThemeProvider({ children, theme, injectFirst, darkScheme
   );
 }
 
+interface ColorSchemeProviderProps extends BaseThemeProviderProps {
+  prefer?: Prefer;
+  disableBlockletTheme?: boolean;
+}
+
+/** 带颜色模式切换功能的 theme provider */
+function ColorSchemeProvider({
+  children,
+  theme: themeInput,
+  prefer,
+  disableBlockletTheme = false,
+  ...rest
+}: ThemeProviderProps) {
+  const [mode, setMode] = useState<PaletteMode>(() => resolveMode(prefer));
+
+  const _themeInput = useMemo(() => {
+    let result: UserThemeOptions = {};
+    const getThemeConfig = lazyThemeConfig(mode);
+
+    if (themeInput) {
+      if (typeof themeInput === 'function') {
+        result = { ...themeInput(getThemeConfig()) };
+      } else {
+        result = { ...themeInput };
+      }
+    }
+
+    set(result, 'palette.mode', mode);
+    set(result, 'mode', mode);
+
+    return result;
+  }, [mode, themeInput]);
+
+  const theme = useMemo(() => {
+    return createTheme({ ..._themeInput, disableBlockletTheme });
+  }, [_themeInput, disableBlockletTheme]);
+
+  // 切换明/暗模式
+  const toggleMode = useCallback(() => {
+    const newMode = mode === 'light' ? 'dark' : 'light';
+    setMode(newMode);
+    localStorage.setItem(BLOCKLET_THEME_PREFER_KEY, newMode);
+  }, [mode, setMode]);
+
+  const colorSchemeValue = useMemo(
+    () => ({
+      mode,
+      toggleMode,
+      prefer,
+    }),
+    [mode, prefer, toggleMode]
+  );
+
+  useEffect(() => {
+    if (prefer) {
+      setMode(resolveMode(prefer));
+    }
+  }, [prefer, setMode]);
+
+  return (
+    <ColorSchemeContext.Provider value={colorSchemeValue}>
+      <BaseThemeProvider theme={theme} {...rest}>
+        {children}
+      </BaseThemeProvider>
+    </ColorSchemeContext.Provider>
+  );
+}
+
+export interface ThemeProviderProps extends ColorSchemeProviderProps {
+  /** 下列情况会启用 ColorScheme 功能（让 theme 支持明暗模式切换）
+   * 1. 显示打开 enableColorScheme
+   * 2. 显示设置 prefer
+   * 3. 顶层 ThemeProvider
+   */
+  enableColorScheme?: boolean;
+}
+
+export default function ThemeProvider({ children, prefer, enableColorScheme = false, ...props }: ThemeProviderProps) {
+  const { toggleMode } = useColorScheme();
+
+  if (enableColorScheme || prefer || !toggleMode) {
+    return (
+      <ColorSchemeProvider prefer={prefer} {...props}>
+        {children}
+      </ColorSchemeProvider>
+    );
+  }
+
+  return <BaseThemeProvider {...props}>{children}</BaseThemeProvider>;
+}
+
 ThemeProvider.propTypes = {
   children: PropTypes.any,
   theme: PropTypes.any,
   injectFirst: PropTypes.bool,
   darkSchemeClass: PropTypes.string,
-};
-
-ThemeProvider.defaultProps = {
-  children: null,
-  theme: defaultTheme,
-  injectFirst: true,
-  darkSchemeClass: '',
+  enableColorScheme: PropTypes.bool,
 };

package/src/Theme/theme.ts

@@ -3,7 +3,6 @@
 import type { PaletteMode, Theme } from '@mui/material';
 import { createTheme as _createTheme, responsiveFontSizes, type ThemeOptions } from '@mui/material/styles';
 import { deepmerge } from '@mui/utils';
-import pick from 'lodash/pick';
 import webfontloader from 'webfontloader';
 import { BLOCKLET_THEME_LIGHT, BLOCKLET_THEME_DARK, DEFAULT_FONTS, BLOCKLET_THEME_PREFER_KEY } from '@blocklet/theme';
 import { cleanedObj, deepmergeAll } from '../Util';
@@ -16,6 +15,11 @@ import '@fontsource/roboto/latin-ext-400.css';
 import '@fontsource/roboto/latin-ext-500.css';
 import '@fontsource/roboto/latin-ext-700.css';
 
+/** 是否是 MUI Theme 对象 */
+export function isTheme(obj: any): obj is Theme {
+  return obj && typeof obj === 'object' && obj.palette && typeof obj.palette.getContrastText === 'function';
+}
+
 // 收集字体配置
 export function collectFontFamilies(obj?: { fontFamily?: string }, fontSet: Set<string> = new Set()): Set<string> {
   if (!obj || typeof obj !== 'object') return fontSet;
@@ -108,18 +112,13 @@ export interface UserThemeOptions extends ThemeOptions {
 }
 
 // 用于获取 Blocklet Theme 配置，便于用户创建自定义主题
-export type ThemeConfig = Pick<Theme, 'palette'>;
 export function lazyThemeConfig(mode: PaletteMode) {
-  const fields = ['palette'];
-  let config: ThemeConfig | null = null;
+  let config: Partial<Theme> | null = null;
 
   return () => {
     if (config) return config;
 
-    config = deepmerge(
-      pick(createDefaultThemeOptions(mode), fields),
-      pick(window.blocklet?.theme?.[mode] ?? {}, fields)
-    ) as ThemeConfig;
+    config = deepmerge(createDefaultThemeOptions(mode), window.blocklet?.theme?.[mode] ?? {}) as Partial<Theme>;
 
     return config;
   };
@@ -167,7 +166,7 @@ const defaultUserThemeOptions: UserThemeOptions = {
 };
 
 // https://material-ui.com/customization/default-theme/
-export const create = (...args: Array<UserThemeOptions | ((config: ThemeConfig) => UserThemeOptions)>) => {
+export const create = (...args: Array<UserThemeOptions | ((config: Partial<Theme>) => UserThemeOptions)>) => {
   const defaultPrefer = getDefaultThemePrefer();
   const getThemeConfig = lazyThemeConfig(defaultPrefer);
   const userThemeOptions = args.reduce<UserThemeOptions>(