@arcblock/ux 2.13.20 → 2.13.23

package/lib/SessionUser/components/un-login.js

@@ -150,7 +150,7 @@ export default function UnLogin({
             maxWidth: '90vw',
             borderColor: 'divider',
             border: '0 !important',
-            boxShadow: `0px 8px 16px 0px ${palette.grey[200]}, 0px 0px 0px 1px ${palette.grey[200]}`
+            boxShadow: 4
           },
           children: [/*#__PURE__*/_jsxs(Box, {
             sx: {
@@ -158,7 +158,8 @@ export default function UnLogin({
               alignItems: 'center',
               gap: 1,
               p: 2,
-              borderBottom: '1px solid #eee'
+              borderBottom: '1px solid',
+              borderColor: 'divider'
             },
             children: [loginAppLogo && !currentState.loadAppLogoError ? /*#__PURE__*/_jsx("img", {
               src: loginAppLogo,
@@ -205,8 +206,9 @@ export default function UnLogin({
                     overflow: 'hidden',
                     position: 'relative',
                     p: 0,
+                    bgcolor: 'background.paper',
                     '&:hover': {
-                      backgroundColor: `${palette.grey[200]} !important`
+                      bgcolor: `${palette.action.hover} !important`
                     }
                   },
                   onClick: () => {
@@ -227,8 +229,7 @@ export default function UnLogin({
                 }, userSessionItem.id), index < currentState.userSessions.length - 1 ? /*#__PURE__*/_jsx(Divider, {
                   sx: {
                     mx: 2,
-                    my: '0px !important',
-                    borderColor: '#e4e4e7'
+                    my: '0px !important'
                   }
                 }, `${userSessionItem.id}-divider`) : null]
               }, `${userSessionItem.id}-root`);

package/lib/SharedBridge/index.js

@@ -6,7 +6,7 @@ import { useMemoizedFn, useReactive } from 'ahooks';
 import { mergeSx } from '../Util/style';
 import { callIframe, getCallbackAction } from '../Util/iframe';
 import NeedStorageAccessApiDialog from './need-storage-access-api-dialog';
-import { withContainer, withUxTheme } from '../DIDConnect';
+import { DIDConnectContainer } from '../DIDConnect';
 const SharedBridge = /*#__PURE__*/memo(function SharedBridge({
   src,
   onClick,
@@ -67,7 +67,6 @@ const SharedBridge = /*#__PURE__*/memo(function SharedBridge({
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [onClick, dataId, targetIframeRef?.current]);
-  const DialogComponent = withUxTheme(withContainer(NeedStorageAccessApiDialog));
   const handleLoad = useMemoizedFn(() => {
     callIframe(targetIframeRef.current, 'hasStorageAccess').then(({
       value
@@ -89,14 +88,15 @@ const SharedBridge = /*#__PURE__*/memo(function SharedBridge({
     return null;
   }
   return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(DialogComponent, {
+    children: [/*#__PURE__*/_jsx(DIDConnectContainer, {
       popup: true,
-      locale: locale,
-      blocklet: window.blocklet,
+      hideCloseButton: true,
       open: currentState.open,
-      origin: currentState.origin,
-      host: currentState.host,
-      onClose: () => {}
+      children: /*#__PURE__*/_jsx(NeedStorageAccessApiDialog, {
+        locale: locale,
+        origin: currentState.origin,
+        host: currentState.host
+      })
     }), /*#__PURE__*/_jsx(Box, {
       ...rest,
       component: "iframe",

package/lib/SharedBridge/need-storage-access-api-dialog.d.ts

@@ -1,7 +1,6 @@
 import { Locale } from '../type';
-export default function NeedStorageAccessApiDialog({ locale, origin, host, setColor, }: {
+export default function NeedStorageAccessApiDialog({ locale, origin, host, }: {
     locale?: Locale;
     origin: string;
     host: string;
-    setColor: (color: string) => void;
 }): import("react/jsx-runtime").JSX.Element;

package/lib/SharedBridge/need-storage-access-api-dialog.js

@@ -5,12 +5,8 @@ import externalLinkIcon from '@iconify-icons/tabler/external-link';
 import lockOutlineIcon from '@iconify-icons/material-symbols/lock-outline';
 import checkCircleIcon from '@iconify-icons/material-symbols/check-circle';
 import rocketLaunchRoundedIcon from '@iconify-icons/material-symbols/rocket-launch-rounded';
-import { useCreation, useMemoizedFn } from 'ahooks';
-import { useEffect } from 'react';
-import { getDIDMotifInfo } from '@arcblock/did-motif';
+import { useMemoizedFn } from 'ahooks';
 import { translate } from '../Locale/util';
-import { getDIDColor, isEthereumDid } from '../Util';
-import { DIDConnectFooter } from '../DIDConnect';
 const translations = {
   en: {
     allow: 'Allow',
@@ -64,25 +60,11 @@ const translations = {
 export default function NeedStorageAccessApiDialog({
   locale = 'en',
   origin,
-  host,
-  setColor
+  host
 }) {
   const t = useMemoizedFn((key, data = {}) => {
     return translate(translations, key, locale, 'en', data);
   });
-  const currentAppColor = useCreation(() => {
-    const did = window.blocklet.appPid;
-    const isEthDid = isEthereumDid(did);
-    const didMotifInfo = isEthDid ? undefined : getDIDMotifInfo(did);
-    if (isEthDid) {
-      return getDIDColor(did);
-    }
-    return didMotifInfo.color;
-  }, []);
-  useEffect(() => {
-    setColor(currentAppColor);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [currentAppColor]);
   return /*#__PURE__*/_jsxs(Box, {
     sx: {
       backgroundColor: 'background.default',
@@ -94,7 +76,6 @@ export default function NeedStorageAccessApiDialog({
       transition: 'width 0.2s ease-in-out',
       margin: 'auto',
       p: 3,
-      pb: 0,
       gap: 2
     },
     children: [/*#__PURE__*/_jsxs(Typography, {
@@ -205,8 +186,6 @@ export default function NeedStorageAccessApiDialog({
         color: "grey.700",
         children: t('dataUsage')
       })]
-    }), /*#__PURE__*/_jsx(DIDConnectFooter, {
-      currentAppColor: currentAppColor
     })]
   });
 }

package/lib/Theme/index.d.ts

@@ -1,6 +1,7 @@
 import type { CreateMUIStyled, Theme } from '@mui/material';
 import { useTheme } from '@mui/material';
 export * from './theme';
+export * from './theme-provider';
 export { default as ThemeProvider } from './theme-provider';
 export { useTheme };
 export declare const styled: CreateMUIStyled<Theme>;

package/lib/Theme/index.js

@@ -1,5 +1,6 @@
 import { styled as muiStyled, useTheme } from '@mui/material';
 export * from './theme';
+export * from './theme-provider';
 export { default as ThemeProvider } from './theme-provider';
 export { useTheme };
 const isTransientProp = prop => prop.startsWith('$');

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

@@ -1,28 +1,43 @@
 import PropTypes from 'prop-types';
+import { PaletteMode } from '@mui/material';
 import { Theme } from '@mui/material/styles';
-export interface ThemeProviderProps {
+/** 颜色模式上下文类型 */
+export interface ColorSchemeContextType {
+    mode: PaletteMode;
+    toggleMode: () => 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 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
- */
-declare function ThemeProvider({ children, theme, injectFirst, darkSchemeClass }: ThemeProviderProps): import("react/jsx-runtime").JSX.Element;
+interface ColorSchemeProviderProps extends BaseThemeProviderProps {
+    prefer?: Prefer;
+    disableBlockletTheme?: boolean;
+}
+export interface ThemeProviderProps extends ColorSchemeProviderProps {
+    /** 下列情况会启用 ColorScheme 功能（让 theme 支持明暗模式切换）
+     * 1. 显示打开 enableColorScheme
+     * 2. 显示设置 prefer
+     * 3. 顶层 ThemeProvider
+     */
+    enableColorScheme?: boolean;
+}
+declare function ThemeProvider({ children, prefer, enableColorScheme, ...props }: ThemeProviderProps): import("react/jsx-runtime").JSX.Element;
 declare namespace ThemeProvider {
     var propTypes: {
         children: PropTypes.Requireable<any>;
         theme: PropTypes.Requireable<any>;
         injectFirst: PropTypes.Requireable<boolean>;
         darkSchemeClass: PropTypes.Requireable<string>;
-    };
-    var defaultProps: {
-        children: null;
-        theme: Theme;
-        injectFirst: boolean;
-        darkSchemeClass: string;
+        enableColorScheme: PropTypes.Requireable<boolean>;
     };
 }
 export default ThemeProvider;

package/lib/Theme/theme-provider.js

@@ -1,11 +1,39 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 import { GlobalStyles } from '@mui/material';
 import { ThemeProvider as MuiThemeProvider, 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 } from './theme';
 const defaultTheme = createTheme();
+
+/** 颜色模式上下文类型 */
+
+export const ColorSchemeContext = /*#__PURE__*/createContext({});
+export function useColorScheme() {
+  return useContext(ColorSchemeContext);
+}
+
+/** 根据偏好获取颜色模式 */
+const resolveMode = prefer => {
+  if (prefer) {
+    if (prefer === 'system') {
+      // 取系统默认
+      return getDefaultThemePrefer({
+        theme: {
+          prefer: 'system'
+        }
+      });
+    }
+    return prefer;
+  }
+  return getDefaultThemePrefer();
+};
+
+/** 深色模式全局样式 */
 function DarkSchemeStyles({
   className
 }) {
@@ -55,22 +83,26 @@ function DarkSchemeStyles({
   }
   return null;
 }
-/**
- * 默认的 theme provider, 可以为 webapp/blocklet 快捷的配置好 mui theme provider
- */
-export default function ThemeProvider({
+/** 基础的 theme provider, 可以为 webapp/blocklet 快捷的配置好 mui theme provider */
+function BaseThemeProvider({
   children,
-  theme,
-  injectFirst,
-  darkSchemeClass
+  theme = defaultTheme,
+  injectFirst = true,
+  darkSchemeClass = ''
 }) {
+  const _theme = useMemo(() => {
+    if (isTheme(theme)) return theme;
+
+    // 是 ThemeOptions 则创建一个 theme
+    return createTheme(theme);
+  }, [theme]);
   return (
     /*#__PURE__*/
     // injectFirst 会影响 makeStyles 自定义样式和 mui styles 覆盖问题
     _jsx(StyledEngineProvider, {
       injectFirst: injectFirst,
       children: /*#__PURE__*/_jsxs(MuiThemeProvider, {
-        theme: theme,
+        theme: _theme,
         children: [/*#__PURE__*/_jsx(CssBaseline, {}), /*#__PURE__*/_jsx(DarkSchemeStyles, {
           className: darkSchemeClass
         }), children]
@@ -78,15 +110,90 @@ export default function ThemeProvider({
     })
   );
 }
+/** 带颜色模式切换功能的 theme provider */
+function ColorSchemeProvider({
+  children,
+  theme: themeInput,
+  prefer,
+  disableBlockletTheme = false,
+  ...rest
+}) {
+  const [mode, setMode] = useState(() => resolveMode(prefer));
+  const _themeInput = useMemo(() => {
+    let result = {};
+    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 /*#__PURE__*/_jsx(ColorSchemeContext.Provider, {
+    value: colorSchemeValue,
+    children: /*#__PURE__*/_jsx(BaseThemeProvider, {
+      theme: theme,
+      ...rest,
+      children: children
+    })
+  });
+}
+export default function ThemeProvider({
+  children,
+  prefer,
+  enableColorScheme = false,
+  ...props
+}) {
+  const {
+    toggleMode
+  } = useColorScheme();
+  if (enableColorScheme || prefer || !toggleMode) {
+    return /*#__PURE__*/_jsx(ColorSchemeProvider, {
+      prefer: prefer,
+      ...props,
+      children: children
+    });
+  }
+  return /*#__PURE__*/_jsx(BaseThemeProvider, {
+    ...props,
+    children: children
+  });
+}
 ThemeProvider.propTypes = {
   children: PropTypes.any,
   theme: PropTypes.any,
   injectFirst: PropTypes.bool,
-  darkSchemeClass: PropTypes.string
-};
-ThemeProvider.defaultProps = {
-  children: null,
-  theme: defaultTheme,
-  injectFirst: true,
-  darkSchemeClass: ''
+  darkSchemeClass: PropTypes.string,
+  enableColorScheme: PropTypes.bool
 };

package/lib/Theme/theme.d.ts

@@ -7,6 +7,8 @@ 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';
+/** 是否是 MUI Theme 对象 */
+export declare function isTheme(obj: any): obj is Theme;
 export declare function collectFontFamilies(obj?: {
     fontFamily?: string;
 }, fontSet?: Set<string>): Set<string>;
@@ -20,8 +22,7 @@ export declare function createDefaultThemeOptions(mode?: PaletteMode): ThemeOpti
 export interface UserThemeOptions extends ThemeOptions {
     disableBlockletTheme?: boolean;
 }
-export type ThemeConfig = Pick<Theme, 'palette'>;
-export declare function lazyThemeConfig(mode: PaletteMode): () => ThemeConfig;
-export declare const create: (...args: Array<UserThemeOptions | ((config: ThemeConfig) => UserThemeOptions)>) => Theme;
-export declare const createTheme: (...args: Array<UserThemeOptions | ((config: ThemeConfig) => UserThemeOptions)>) => Theme;
+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 { deepmerge };

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.20",
+  "version": "2.13.23",
   "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": "6804d65451c3d09464345b86627bc79ba754847a",
+  "gitHead": "6811ffbc6804b08140d05f031ac715b643240e75",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.13.20",
-    "@arcblock/nft-display": "^2.13.20",
-    "@arcblock/react-hooks": "^2.13.20",
+    "@arcblock/icons": "^2.13.23",
+    "@arcblock/nft-display": "^2.13.23",
+    "@arcblock/react-hooks": "^2.13.23",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@blocklet/theme": "^2.13.20",
+    "@blocklet/theme": "^2.13.23",
     "@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') {