@arcblock/ux 2.13.27 → 2.13.28

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

@@ -12,6 +12,7 @@ export declare function ConfigProvider({ children, theme, injectFirst, darkSchem
 export declare function useConfig(): {
     mode: import("@mui/material").PaletteMode;
     toggleMode: () => void;
+    changeMode: (mode: import("@mui/material").PaletteMode) => void;
     prefer?: import("../Theme").Prefer;
     locale: import("../type").Locale;
     changeLocale: (locale: import("../type").Locale) => void;

package/lib/RelativeTime/index.d.ts

@@ -10,5 +10,6 @@ export interface RelativeTimeProps {
     tz?: string;
     relativeRange?: number;
     enableTooltip?: boolean;
+    showUTCPrefix?: boolean;
 }
-export default function RelativeTime({ value, locale, withoutSuffix, from, to, type, tz, relativeRange, enableTooltip, ...rest }: RelativeTimeProps): import("react/jsx-runtime").JSX.Element;
+export default function RelativeTime({ value, locale, withoutSuffix, from, to, type, tz, relativeRange, enableTooltip, showUTCPrefix, ...rest }: RelativeTimeProps): import("react/jsx-runtime").JSX.Element;

package/lib/RelativeTime/index.js

@@ -133,8 +133,10 @@ function UTCChip({
   isUtc,
   sign,
   hoursOffset,
-  setIsUtc
+  setIsUtc,
+  showUTCPrefix = true
 }) {
+  const prefix = showUTCPrefix ? `${translations[locale].utc}: ` : '';
   return /*#__PURE__*/_jsx(Box, {
     component: "span",
     sx: {
@@ -144,10 +146,11 @@ function UTCChip({
       fontSize: '0.8rem',
       borderColor: 'divider',
       borderRadius: '20px',
-      padding: '0px 8px'
+      padding: '4px 8px',
+      lineHeight: 1
     },
     onClick: () => setIsUtc(r => !r),
-    children: `${translations[locale].utc}: ${isUtc ? 'UTC' : `UTC${sign}${hoursOffset}`}`
+    children: `${prefix}${isUtc ? 'UTC' : `UTC${sign}${hoursOffset}`}`
   });
 }
 export default function RelativeTime({
@@ -160,6 +163,7 @@ export default function RelativeTime({
   tz,
   relativeRange,
   enableTooltip = true,
+  showUTCPrefix = true,
   ...rest
 }) {
   const {
@@ -219,7 +223,8 @@ export default function RelativeTime({
           isUtc: isUtc,
           sign: sign,
           hoursOffset: hoursOffset,
-          setIsUtc: setIsUtc
+          setIsUtc: setIsUtc,
+          showUTCPrefix: showUTCPrefix
         })]
       })
     });
@@ -242,7 +247,8 @@ export default function RelativeTime({
         isUtc: isUtc,
         sign: sign,
         hoursOffset: hoursOffset,
-        setIsUtc: setIsUtc
+        setIsUtc: setIsUtc,
+        showUTCPrefix: showUTCPrefix
       })]
     })
   });

package/lib/Tabs/index.js

@@ -41,7 +41,7 @@ function CardTabs({
       },
       '.MuiTabs-flexContainer': {
         borderRadius: '100vw',
-        backgroundColor: 'grey.200',
+        backgroundColor: 'grey.100',
         padding: 0.5,
         display: 'inline-flex',
         columnGap: 0.25,
@@ -60,7 +60,7 @@ function CardTabs({
         textTransform: 'capitalize',
         transition: 'background-color 0.2s ease',
         '&.Mui-selected, &:hover': {
-          backgroundColor: 'white',
+          backgroundColor: 'action.selected',
           borderColor: 'grey.100',
           color: 'grey.A700'
         }

package/lib/Theme/theme-provider.d.ts

@@ -1,15 +1,18 @@
 import PropTypes from 'prop-types';
 import { PaletteMode } from '@mui/material';
-import { Theme } from '@mui/material/styles';
+import { Theme, ThemeOptions } from '@mui/material/styles';
 /** 颜色模式上下文类型 */
 export interface ColorSchemeContextType {
     mode: PaletteMode;
     toggleMode: () => void;
+    changeMode: (mode: PaletteMode) => void;
     prefer?: Prefer;
 }
 export declare const ColorSchemeContext: import("react").Context<ColorSchemeContextType>;
 export declare function useColorScheme(): ColorSchemeContextType;
-export type UxTheme = Partial<Theme> | ((outerTheme: Partial<Theme>) => Theme);
+export type UxTheme = ThemeOptions | ((parentTheme: Theme, context?: {
+    mode: PaletteMode;
+}) => Theme);
 export type Prefer = 'light' | 'dark' | 'system';
 interface BaseThemeProviderProps {
     children?: React.ReactNode;

package/lib/Theme/theme-provider.js

@@ -7,7 +7,7 @@ import StyledEngineProvider from '@mui/material/StyledEngineProvider';
 import CssBaseline from '@mui/material/CssBaseline';
 import set from 'lodash/set';
 import { BLOCKLET_THEME_PREFER_KEY } from '@blocklet/theme';
-import { createTheme, getDefaultThemePrefer, isTheme, lazyThemeConfig } from './theme';
+import { createTheme, getDefaultThemePrefer, isTheme, isUxTheme, lazyCreateDefaultTheme } from './theme';
 const defaultTheme = createTheme();
 
 /** 颜色模式上下文类型 */
@@ -83,7 +83,7 @@ function DarkSchemeStyles({
   }
   return null;
 }
-/** 基础的 theme provider, 可以为 webapp/blocklet 快捷的配置好 mui theme provider */
+/** 快速配置 MUI 主题 */
 function BaseThemeProvider({
   children,
   theme = defaultTheme,
@@ -110,7 +110,7 @@ function BaseThemeProvider({
     })
   );
 }
-/** 带颜色模式切换功能的 theme provider */
+/** 配置带颜色模式切换功能的 MUI 主题 */
 function ColorSchemeProvider({
   children,
   theme: themeInput,
@@ -119,14 +119,26 @@ function ColorSchemeProvider({
   ...rest
 }) {
   const [mode, setMode] = useState(() => resolveMode(prefer));
+  const parentTheme = useTheme();
   const _themeInput = useMemo(() => {
     let result = {};
-    const getThemeConfig = lazyThemeConfig(mode);
+    const createBaseTheme = lazyCreateDefaultTheme(mode);
     if (themeInput) {
       if (typeof themeInput === 'function') {
-        result = {
-          ...themeInput(getThemeConfig())
-        };
+        const baseTheme = createBaseTheme();
+        if (isUxTheme(parentTheme)) {
+          result = {
+            ...themeInput(parentTheme, {
+              mode
+            })
+          };
+        } else {
+          result = {
+            ...themeInput(baseTheme, {
+              mode
+            })
+          };
+        }
       } else {
         result = {
           ...themeInput
@@ -136,7 +148,7 @@ function ColorSchemeProvider({
     set(result, 'palette.mode', mode);
     set(result, 'mode', mode);
     return result;
-  }, [mode, themeInput]);
+  }, [mode, themeInput, parentTheme]);
   const theme = useMemo(() => {
     return createTheme({
       ..._themeInput,
@@ -150,11 +162,18 @@ function ColorSchemeProvider({
     setMode(newMode);
     localStorage.setItem(BLOCKLET_THEME_PREFER_KEY, newMode);
   }, [mode, setMode]);
+  const changeMode = useCallback(newMode => {
+    if (mode !== newMode) {
+      setMode(newMode);
+      localStorage.setItem(BLOCKLET_THEME_PREFER_KEY, newMode);
+    }
+  }, [mode, setMode]);
   const colorSchemeValue = useMemo(() => ({
     mode,
     toggleMode,
+    changeMode,
     prefer
-  }), [mode, prefer, toggleMode]);
+  }), [mode, prefer, toggleMode, changeMode]);
   useEffect(() => {
     if (prefer) {
       setMode(resolveMode(prefer));

package/lib/Theme/theme.d.ts

@@ -9,6 +9,8 @@ import '@fontsource/roboto/latin-ext-500.css';
 import '@fontsource/roboto/latin-ext-700.css';
 /** 是否是 MUI Theme 对象 */
 export declare function isTheme(obj: any): obj is Theme;
+/** 是否是 UX Theme 对象 */
+export declare function isUxTheme(obj: any): obj is Theme;
 export declare function collectFontFamilies(obj?: {
     fontFamily?: string;
 }, fontSet?: Set<string>): Set<string>;
@@ -19,10 +21,10 @@ export declare function getDefaultThemePrefer(meta?: {
     };
 }): PaletteMode;
 export declare function createDefaultThemeOptions(mode?: PaletteMode): ThemeOptions;
-export interface UserThemeOptions extends ThemeOptions {
+export interface UxThemeOptions extends ThemeOptions {
     disableBlockletTheme?: boolean;
 }
-export declare function lazyThemeConfig(mode: PaletteMode): () => Partial<Theme>;
-export declare const create: (...args: Array<UserThemeOptions | ((config: Partial<Theme>) => UserThemeOptions)>) => Theme;
-export declare const createTheme: (...args: Array<UserThemeOptions | ((config: Partial<Theme>) => UserThemeOptions)>) => Theme;
+export declare function lazyCreateDefaultTheme(mode: PaletteMode): () => Theme;
+export declare const create: (...args: Array<UxThemeOptions | ((baseTheme: Theme) => UxThemeOptions)>) => Theme;
+export declare const createTheme: (...args: Array<UxThemeOptions | ((baseTheme: Theme) => UxThemeOptions)>) => Theme;
 export { deepmerge };

package/lib/Theme/theme.js

@@ -20,6 +20,11 @@ export function isTheme(obj) {
   return obj && typeof obj === 'object' && obj.palette && typeof obj.palette.getContrastText === 'function';
 }
 
+/** 是否是 UX Theme 对象 */
+export function isUxTheme(obj) {
+  return isTheme(obj) && obj.__isUxTheme__ === true;
+}
+
 // 收集字体配置
 export function collectFontFamilies(obj, fontSet = new Set()) {
   if (!obj || typeof obj !== 'object') return fontSet;
@@ -94,13 +99,13 @@ export function createDefaultThemeOptions(mode = 'light') {
   }
   return BLOCKLET_THEME_LIGHT;
 }
-// 用于获取 Blocklet Theme 配置，便于用户创建自定义主题
-export function lazyThemeConfig(mode) {
-  let config = null;
+export function lazyCreateDefaultTheme(mode) {
+  let theme = null;
   return () => {
-    if (config) return config;
-    config = deepmerge(createDefaultThemeOptions(mode), window.blocklet?.theme?.[mode] ?? {});
-    return config;
+    if (theme) return theme;
+    const options = deepmerge(createDefaultThemeOptions(mode), window.blocklet?.theme?.[mode] ?? {});
+    theme = _createTheme(options);
+    return theme;
   };
 }
 
@@ -121,7 +126,7 @@ const normalizeUserThemeOptions = ({
   };
   return result;
 };
-const defaultUserThemeOptions = {
+const defaultUxThemeOptions = {
   themeName: 'ArcBlock',
   pageWidth: 'md',
   disableBlockletTheme: false,
@@ -151,8 +156,8 @@ const defaultUserThemeOptions = {
 // https://material-ui.com/customization/default-theme/
 export const create = (...args) => {
   const defaultPrefer = getDefaultThemePrefer();
-  const getThemeConfig = lazyThemeConfig(defaultPrefer);
-  const userThemeOptions = args.reduce((acc, curr) => deepmerge(acc, normalizeUserThemeOptions(typeof curr === 'function' ? curr(getThemeConfig()) : curr)), normalizeUserThemeOptions(defaultUserThemeOptions));
+  const createBaseTheme = lazyCreateDefaultTheme(defaultPrefer);
+  const userThemeOptions = args.reduce((acc, curr) => deepmerge(acc, normalizeUserThemeOptions(typeof curr === 'function' ? curr(createBaseTheme()) : curr)), normalizeUserThemeOptions(defaultUxThemeOptions));
   const prefer = userThemeOptions.mode || userThemeOptions.palette?.mode || defaultPrefer;
   const blockletThemeOptions = window.blocklet?.theme?.[prefer] ?? {};
   const defaultThemeOptions = createDefaultThemeOptions(prefer);
@@ -172,6 +177,7 @@ export const create = (...args) => {
 
   // 创建主题
   const theme = _createTheme(mergedThemeOptions);
+  theme.__isUxTheme__ = true;
 
   // 异步加载字体
   const fonts = collectFontFamilies(theme.typography);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.13.27",
+  "version": "2.13.28",
   "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": "06abd7d8f9068ebca145a411b4a9b5b7f329535a",
+  "gitHead": "345a8363b59137fc5691b68e6295b87c9efb028a",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.13.27",
-    "@arcblock/nft-display": "^2.13.27",
-    "@arcblock/react-hooks": "^2.13.27",
+    "@arcblock/icons": "^2.13.28",
+    "@arcblock/nft-display": "^2.13.28",
+    "@arcblock/react-hooks": "^2.13.28",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@blocklet/theme": "^2.13.27",
+    "@blocklet/theme": "^2.13.28",
     "@fontsource/roboto": "~5.1.1",
     "@fontsource/ubuntu-mono": "^5.0.18",
     "@iconify-icons/logos": "^1.2.36",

package/src/RelativeTime/index.tsx

@@ -55,6 +55,7 @@ export interface RelativeTimeProps {
   tz?: string;
   relativeRange?: number;
   enableTooltip?: boolean;
+  showUTCPrefix?: boolean;
 }
 
 function useRelativeTime({
@@ -144,13 +145,17 @@ function UTCChip({
   sign,
   hoursOffset,
   setIsUtc,
+  showUTCPrefix = true,
 }: {
   locale: Locale;
   isUtc?: boolean;
   sign: string;
   hoursOffset: number;
   setIsUtc: (data: any) => void;
+  showUTCPrefix?: boolean;
 }) {
+  const prefix = showUTCPrefix ? `${translations[locale].utc}: ` : '';
+
   return (
     <Box
       component="span"
@@ -161,10 +166,11 @@ function UTCChip({
         fontSize: '0.8rem',
         borderColor: 'divider',
         borderRadius: '20px',
-        padding: '0px 8px',
+        padding: '4px 8px',
+        lineHeight: 1,
       }}
       onClick={() => setIsUtc((r: any) => !r)}>
-      {`${translations[locale].utc}: ${isUtc ? 'UTC' : `UTC${sign}${hoursOffset}`}`}
+      {`${prefix}${isUtc ? 'UTC' : `UTC${sign}${hoursOffset}`}`}
     </Box>
   );
 }
@@ -179,6 +185,7 @@ export default function RelativeTime({
   tz,
   relativeRange,
   enableTooltip = true,
+  showUTCPrefix = true,
   ...rest
 }: RelativeTimeProps) {
   const { innerContent, popContent, isUtc, setIsUtc, sign, hoursOffset, relativeString } = useRelativeTime({
@@ -212,7 +219,14 @@ export default function RelativeTime({
             ·
           </Box>
 
-          <UTCChip locale={locale} isUtc={isUtc} sign={sign} hoursOffset={hoursOffset} setIsUtc={setIsUtc} />
+          <UTCChip
+            locale={locale}
+            isUtc={isUtc}
+            sign={sign}
+            hoursOffset={hoursOffset}
+            setIsUtc={setIsUtc}
+            showUTCPrefix={showUTCPrefix}
+          />
         </Box>
       </Tooltip>
     );
@@ -226,7 +240,14 @@ export default function RelativeTime({
         </Box>
 
         {type === 'utc' && (
-          <UTCChip locale={locale} isUtc={isUtc} sign={sign} hoursOffset={hoursOffset} setIsUtc={setIsUtc} />
+          <UTCChip
+            locale={locale}
+            isUtc={isUtc}
+            sign={sign}
+            hoursOffset={hoursOffset}
+            setIsUtc={setIsUtc}
+            showUTCPrefix={showUTCPrefix}
+          />
         )}
       </Box>
     </Tooltip>

package/src/Tabs/index.tsx

@@ -46,7 +46,7 @@ function CardTabs({ tabs, current, onChange, ...rest }: CardTabsProps) {
         },
         '.MuiTabs-flexContainer': {
           borderRadius: '100vw',
-          backgroundColor: 'grey.200',
+          backgroundColor: 'grey.100',
           padding: 0.5,
           display: 'inline-flex',
           columnGap: 0.25,
@@ -65,7 +65,7 @@ function CardTabs({ tabs, current, onChange, ...rest }: CardTabsProps) {
           textTransform: 'capitalize',
           transition: 'background-color 0.2s ease',
           '&.Mui-selected, &:hover': {
-            backgroundColor: 'white',
+            backgroundColor: 'action.selected',
             borderColor: 'grey.100',
             color: 'grey.A700',
           },

package/src/Theme/theme-provider.tsx

@@ -1,13 +1,20 @@
 import { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 import { GlobalStyles, PaletteMode } from '@mui/material';
-import { ThemeProvider as MuiThemeProvider, Theme, useTheme } from '@mui/material/styles';
+import { ThemeProvider as MuiThemeProvider, Theme, ThemeOptions, useTheme } from '@mui/material/styles';
 import StyledEngineProvider from '@mui/material/StyledEngineProvider';
 import CssBaseline from '@mui/material/CssBaseline';
 import set from 'lodash/set';
 import { BLOCKLET_THEME_PREFER_KEY } from '@blocklet/theme';
 
-import { createTheme, getDefaultThemePrefer, isTheme, lazyThemeConfig, type UserThemeOptions } from './theme';
+import {
+  createTheme,
+  getDefaultThemePrefer,
+  isTheme,
+  isUxTheme,
+  lazyCreateDefaultTheme,
+  type UxThemeOptions,
+} from './theme';
 
 const defaultTheme = createTheme();
 
@@ -15,6 +22,7 @@ const defaultTheme = createTheme();
 export interface ColorSchemeContextType {
   mode: PaletteMode;
   toggleMode: () => void;
+  changeMode: (mode: PaletteMode) => void;
   prefer?: Prefer;
 }
 
@@ -102,7 +110,7 @@ function DarkSchemeStyles({ className }: { className?: string }) {
   return null;
 }
 
-export type UxTheme = Partial<Theme> | ((outerTheme: Partial<Theme>) => Theme);
+export type UxTheme = ThemeOptions | ((parentTheme: Theme, context?: { mode: PaletteMode }) => Theme);
 export type Prefer = 'light' | 'dark' | 'system';
 
 interface BaseThemeProviderProps {
@@ -113,7 +121,7 @@ interface BaseThemeProviderProps {
   darkSchemeClass?: string;
 }
 
-/** 基础的 theme provider, 可以为 webapp/blocklet 快捷的配置好 mui theme provider */
+/** 快速配置 MUI 主题 */
 function BaseThemeProvider({
   children,
   theme = defaultTheme,
@@ -144,7 +152,7 @@ interface ColorSchemeProviderProps extends BaseThemeProviderProps {
   disableBlockletTheme?: boolean;
 }
 
-/** 带颜色模式切换功能的 theme provider */
+/** 配置带颜色模式切换功能的 MUI 主题 */
 function ColorSchemeProvider({
   children,
   theme: themeInput,
@@ -153,14 +161,21 @@ function ColorSchemeProvider({
   ...rest
 }: ThemeProviderProps) {
   const [mode, setMode] = useState<PaletteMode>(() => resolveMode(prefer));
+  const parentTheme = useTheme();
 
   const _themeInput = useMemo(() => {
-    let result: UserThemeOptions = {};
-    const getThemeConfig = lazyThemeConfig(mode);
+    let result: UxThemeOptions = {};
+    const createBaseTheme = lazyCreateDefaultTheme(mode);
 
     if (themeInput) {
       if (typeof themeInput === 'function') {
-        result = { ...themeInput(getThemeConfig()) };
+        const baseTheme = createBaseTheme();
+
+        if (isUxTheme(parentTheme)) {
+          result = { ...themeInput(parentTheme, { mode }) };
+        } else {
+          result = { ...themeInput(baseTheme, { mode }) };
+        }
       } else {
         result = { ...themeInput };
       }
@@ -170,7 +185,7 @@ function ColorSchemeProvider({
     set(result, 'mode', mode);
 
     return result;
-  }, [mode, themeInput]);
+  }, [mode, themeInput, parentTheme]);
 
   const theme = useMemo(() => {
     return createTheme({ ..._themeInput, disableBlockletTheme });
@@ -183,13 +198,24 @@ function ColorSchemeProvider({
     localStorage.setItem(BLOCKLET_THEME_PREFER_KEY, newMode);
   }, [mode, setMode]);
 
+  const changeMode = useCallback(
+    (newMode: PaletteMode) => {
+      if (mode !== newMode) {
+        setMode(newMode);
+        localStorage.setItem(BLOCKLET_THEME_PREFER_KEY, newMode);
+      }
+    },
+    [mode, setMode]
+  );
+
   const colorSchemeValue = useMemo(
     () => ({
       mode,
       toggleMode,
+      changeMode,
       prefer,
     }),
-    [mode, prefer, toggleMode]
+    [mode, prefer, toggleMode, changeMode]
   );
 
   useEffect(() => {

package/src/Theme/theme.ts

@@ -20,6 +20,11 @@ export function isTheme(obj: any): obj is Theme {
   return obj && typeof obj === 'object' && obj.palette && typeof obj.palette.getContrastText === 'function';
 }
 
+/** 是否是 UX Theme 对象 */
+export function isUxTheme(obj: any): obj is Theme {
+  return isTheme(obj) && obj.__isUxTheme__ === true;
+}
+
 // 收集字体配置
 export function collectFontFamilies(obj?: { fontFamily?: string }, fontSet: Set<string> = new Set()): Set<string> {
   if (!obj || typeof obj !== 'object') return fontSet;
@@ -107,26 +112,26 @@ export function createDefaultThemeOptions(mode: PaletteMode = 'light') {
   return BLOCKLET_THEME_LIGHT;
 }
 
-export interface UserThemeOptions extends ThemeOptions {
+export interface UxThemeOptions extends ThemeOptions {
   disableBlockletTheme?: boolean;
 }
 
-// 用于获取 Blocklet Theme 配置，便于用户创建自定义主题
-export function lazyThemeConfig(mode: PaletteMode) {
-  let config: Partial<Theme> | null = null;
+export function lazyCreateDefaultTheme(mode: PaletteMode) {
+  let theme: Theme | null = null;
 
   return () => {
-    if (config) return config;
+    if (theme) return theme;
 
-    config = deepmerge(createDefaultThemeOptions(mode), window.blocklet?.theme?.[mode] ?? {}) as Partial<Theme>;
+    const options = deepmerge(createDefaultThemeOptions(mode), window.blocklet?.theme?.[mode] ?? {});
 
-    return config;
+    theme = _createTheme(options);
+    return theme;
   };
 }
 
 // 主要处理 overrides
-const normalizeUserThemeOptions = ({ palette, components, overrides, ...rest }: UserThemeOptions) => {
-  const result: UserThemeOptions = {
+const normalizeUserThemeOptions = ({ palette, components, overrides, ...rest }: UxThemeOptions) => {
+  const result: UxThemeOptions = {
     palette,
     components: {
       ...overrides,
@@ -138,7 +143,7 @@ const normalizeUserThemeOptions = ({ palette, components, overrides, ...rest }:
   return result;
 };
 
-const defaultUserThemeOptions: UserThemeOptions = {
+const defaultUxThemeOptions: UxThemeOptions = {
   themeName: 'ArcBlock',
   pageWidth: 'md',
   disableBlockletTheme: false,
@@ -166,13 +171,13 @@ const defaultUserThemeOptions: UserThemeOptions = {
 };
 
 // https://material-ui.com/customization/default-theme/
-export const create = (...args: Array<UserThemeOptions | ((config: Partial<Theme>) => UserThemeOptions)>) => {
+export const create = (...args: Array<UxThemeOptions | ((baseTheme: Theme) => UxThemeOptions)>) => {
   const defaultPrefer = getDefaultThemePrefer();
-  const getThemeConfig = lazyThemeConfig(defaultPrefer);
-  const userThemeOptions = args.reduce<UserThemeOptions>(
+  const createBaseTheme = lazyCreateDefaultTheme(defaultPrefer);
+  const userThemeOptions = args.reduce<UxThemeOptions>(
     (acc, curr) =>
-      deepmerge(acc, normalizeUserThemeOptions(typeof curr === 'function' ? curr(getThemeConfig()) : curr)),
-    normalizeUserThemeOptions(defaultUserThemeOptions)
+      deepmerge(acc, normalizeUserThemeOptions(typeof curr === 'function' ? curr(createBaseTheme()) : curr)),
+    normalizeUserThemeOptions(defaultUxThemeOptions)
   );
   const prefer = userThemeOptions.mode || userThemeOptions.palette?.mode || defaultPrefer;
   const blockletThemeOptions = window.blocklet?.theme?.[prefer] ?? {};
@@ -195,6 +200,7 @@ export const create = (...args: Array<UserThemeOptions | ((config: Partial<Theme
 
   // 创建主题
   const theme = _createTheme(mergedThemeOptions);
+  theme.__isUxTheme__ = true;
 
   // 异步加载字体
   const fonts = collectFontFamilies(theme.typography);