@arcblock/ux 2.12.47 → 2.12.49

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

@@ -0,0 +1,37 @@
+import { ReactNode } from 'react';
+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;
+    themeOptions: ThemeOptions;
+    toggleMode: () => void;
+}
+export declare function isThemeRecord(theme: ThemeOptions | Record<ThemeMode, ThemeOptions>): theme is Record<ThemeMode, ThemeOptions>;
+export interface ConfigProviderProps extends Omit<LocaleProviderProps, 'translations'>, Omit<ThemeProviderProps, 'theme'> {
+    children: ReactNode;
+    prefer?: ThemeMode;
+    theme?: ThemeOptions | Record<ThemeMode, ThemeOptions>;
+    translations?: Record<string, any>;
+}
+/**
+ * 集中化配置
+ */
+export declare function ConfigProvider({ children, prefer, theme: themeOptions, injectFirst, locale, fallbackLocale, translations, languages, onLoadingTranslation, }: ConfigProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace ConfigProvider {
+    var useConfig: typeof import("./config-provider").useConfig;
+}
+export declare function useConfig(): {
+    mode: ThemeMode;
+    themeOptions: ThemeOptions;
+    toggleMode: () => void;
+    locale: import("../type").Locale;
+    changeLocale: (locale: import("../type").Locale) => void;
+    t: (key: string, data?: Record<string, any>) => string;
+    languages: {
+        code: string;
+        name: string;
+    }[];
+    theme: import("@mui/material/styles").Theme;
+};

package/lib/Config/config-provider.js

@@ -0,0 +1,93 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useMemo, useState, useCallback } from 'react';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import set from 'lodash/set';
+import { LocaleProvider, useLocaleContext } from '../Locale/context';
+import ThemeProvider from '../Theme/theme-provider';
+import { createTheme, useTheme } from '../Theme';
+const ConfigContext = /*#__PURE__*/createContext({});
+const preferThemeModeKey = 'blocklet_theme_prefer';
+export function isThemeRecord(theme) {
+  return 'light' in theme || 'dark' in theme;
+}
+/**
+ * 集中化配置
+ */
+export function ConfigProvider({
+  children,
+  // theme config
+  prefer,
+  theme: themeOptions,
+  injectFirst,
+  // locale config
+  locale,
+  fallbackLocale,
+  translations = {},
+  languages,
+  onLoadingTranslation
+}) {
+  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
+  const [mode, setMode] = useState(() => {
+    const preferMode = localStorage.getItem(preferThemeModeKey);
+    if (preferMode && (preferMode === 'light' || preferMode === 'dark')) {
+      return preferMode;
+    }
+    return prefer || (prefersDarkMode ? 'dark' : 'light');
+  });
+  const _themeOptions = useMemo(() => {
+    let result = {};
+    if (themeOptions) {
+      if (isThemeRecord(themeOptions)) {
+        result = themeOptions[mode] ? {
+          ...themeOptions[mode]
+        } : {};
+      } else {
+        result = {
+          ...themeOptions
+        };
+      }
+    }
+    set(result, 'palette.mode', mode);
+    set(result, 'mode', mode);
+    return result;
+  }, [mode, themeOptions]);
+  const theme = useMemo(() => {
+    return createTheme(_themeOptions);
+  }, [_themeOptions]);
+  const toggleMode = useCallback(() => {
+    const newMode = mode === 'light' ? 'dark' : 'light';
+    setMode(newMode);
+    localStorage.setItem(preferThemeModeKey, newMode);
+  }, [mode, setMode]);
+  const config = useMemo(() => ({
+    mode,
+    themeOptions: _themeOptions,
+    toggleMode
+  }), [mode, _themeOptions, toggleMode]);
+  return /*#__PURE__*/_jsx(ConfigContext.Provider, {
+    value: config,
+    children: /*#__PURE__*/_jsx(LocaleProvider, {
+      locale: locale,
+      fallbackLocale: fallbackLocale,
+      translations: translations,
+      onLoadingTranslation: onLoadingTranslation,
+      languages: languages,
+      children: /*#__PURE__*/_jsx(ThemeProvider, {
+        theme: theme,
+        injectFirst: injectFirst,
+        children: children
+      })
+    })
+  });
+}
+export function useConfig() {
+  const theme = useTheme();
+  const localeCtx = useLocaleContext();
+  const configCtx = useContext(ConfigContext);
+  return {
+    theme,
+    ...localeCtx,
+    ...configCtx
+  };
+}
+ConfigProvider.useConfig = useConfig;

package/lib/Config/theme-mode-toggle.d.ts

@@ -0,0 +1 @@
+export default function ThemeModeToggle(): import("react/jsx-runtime").JSX.Element | null;

package/lib/Config/theme-mode-toggle.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { IconButton } from '@mui/material';
+import LightModeOutlinedIcon from '@mui/icons-material/LightModeOutlined';
+import Brightness2OutlinedIcon from '@mui/icons-material/Brightness2Outlined';
+import { useConfig } from './config-provider';
+export default function ThemeModeToggle() {
+  const {
+    mode,
+    toggleMode
+  } = useConfig();
+  if (!toggleMode) {
+    if (process.env.NODE_ENV !== 'production') {
+      console.warn('Please ensure the component is wrapped with ConfigProvider context');
+    }
+    return null;
+  }
+  return /*#__PURE__*/_jsx(IconButton, {
+    onClick: toggleMode,
+    color: "inherit",
+    children: mode === 'light' ? /*#__PURE__*/_jsx(LightModeOutlinedIcon, {}) : /*#__PURE__*/_jsx(Brightness2OutlinedIcon, {})
+  });
+}

package/lib/Locale/context.d.ts

@@ -4,7 +4,7 @@ declare const getLocale: (languages?: {
     code: string;
 }[]) => string;
 declare const setLocale: (locale: Locale) => void;
-interface LocaleProviderProps {
+export interface LocaleProviderProps {
     children: ReactNode;
     locale?: Locale;
     fallbackLocale?: Locale;

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

@@ -1,13 +1,14 @@
 import PropTypes from 'prop-types';
 import { Theme } from '@mui/material/styles';
+export interface ThemeProviderProps {
+    children?: React.ReactNode;
+    theme: Theme;
+    injectFirst?: boolean;
+}
 /**
  * 默认的 theme provider, 可以为 webapp/blocklet 快捷的配置好 mui theme provider
  */
-declare function ThemeProvider({ children, theme, injectFirst, }: {
-    children?: React.ReactNode;
-    theme: Theme;
-    injectFirst: boolean;
-}): import("react/jsx-runtime").JSX.Element;
+declare function ThemeProvider({ children, theme, injectFirst }: ThemeProviderProps): import("react/jsx-runtime").JSX.Element;
 declare namespace ThemeProvider {
     var propTypes: {
         children: PropTypes.Requireable<any>;

package/lib/Theme/theme-provider.js

@@ -5,7 +5,6 @@ import StyledEngineProvider from '@mui/material/StyledEngineProvider';
 import CssBaseline from '@mui/material/CssBaseline';
 import { createTheme } from './theme';
 const defaultTheme = createTheme();
-
 /**
  * 默认的 theme provider, 可以为 webapp/blocklet 快捷的配置好 mui theme provider
  */

package/lib/Theme/theme.d.ts

@@ -1,5 +1,5 @@
-import { Components, type Theme, type ThemeOptions } from '@mui/material/styles';
-import { Typography, TypographyOptions } from '@mui/material/styles/createTypography';
+import { Components, type ThemeOptions } from '@mui/material/styles';
+import type { Typography } from '@mui/material/styles/createTypography';
 import '@fontsource/inter/latin-300.css';
 import '@fontsource/inter/latin-400.css';
 import '@fontsource/inter/latin-500.css';
@@ -8,9 +8,10 @@ import '@fontsource/inter/latin-ext-300.css';
 import '@fontsource/inter/latin-ext-400.css';
 import '@fontsource/inter/latin-ext-500.css';
 import '@fontsource/inter/latin-ext-700.css';
+import { ThemeMode } from '../type';
 declare module '@mui/material/styles' {
     interface Theme {
-        mode?: string;
+        mode?: ThemeMode;
         themeName?: string;
         pageWidth?: string;
         colors?: Record<string, string>;
@@ -23,24 +24,26 @@ declare module '@mui/material/styles' {
         };
     }
     interface ThemeOptions {
-        mode?: string;
         themeName?: string;
+        mode?: ThemeMode;
         pageWidth?: string;
         colors?: Record<string, string>;
+        /** @deprecated 请使用 components */
+        overrides?: Components<Omit<Theme, 'components'>>;
     }
     interface TypeText {
         hint: string;
     }
 }
-export declare const create: ({ mode, pageWidth, typography, overrides, palette, components, ...rest }?: {
-    mode?: string;
-    pageWidth?: string;
-    typography?: TypographyOptions;
-    overrides?: Components<Omit<Theme, "components">>;
-} & ThemeOptions) => Theme;
-export declare const createTheme: ({ mode, pageWidth, typography, overrides, palette, components, ...rest }?: {
-    mode?: string;
-    pageWidth?: string;
-    typography?: TypographyOptions;
-    overrides?: Components<Omit<Theme, "components">>;
-} & ThemeOptions) => Theme;
+declare module '@mui/material/styles/createTypography' {
+    interface TypographyOptions {
+        useNextVariants?: boolean;
+        color?: Record<string, string>;
+        button?: {
+            fontWeight?: number;
+        };
+    }
+}
+export declare function createDefaultThemeOptions(mode?: ThemeMode): ThemeOptions;
+export declare const create: ({ mode, pageWidth, overrides, palette, components, ...rest }?: ThemeOptions) => import("@mui/material/styles").Theme;
+export declare const createTheme: ({ mode, pageWidth, overrides, palette, components, ...rest }?: ThemeOptions) => import("@mui/material/styles").Theme;

package/lib/Theme/theme.js

@@ -1,6 +1,7 @@
 /* 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';
 // 为了避免加载全量的字体导致打包后体积太大，目前只选择了 latin 语系的字体
 import '@fontsource/inter/latin-300.css';
 import '@fontsource/inter/latin-400.css';
@@ -11,49 +12,29 @@ import '@fontsource/inter/latin-ext-400.css';
 import '@fontsource/inter/latin-ext-500.css';
 import '@fontsource/inter/latin-ext-700.css';
 import colors from '../Colors';
+import { cleanedObj } from '../Util';
 
 // 扩展 Theme
 
+// 扩展 TypographyOptions
+
 const muiDarkTheme = _createTheme({
   palette: {
     mode: 'dark'
   }
 });
-
-// https://material-ui.com/customization/default-theme/
-export const create = ({
-  mode = 'light',
-  pageWidth = 'md',
-  typography,
-  /** @deprecated 使用 components 替代 */
-  overrides,
-  // original theme options
-  palette,
-  components,
-  ...rest
-} = {}) => {
-  // palette 考虑 light & dark mode, dark mode 需要持续完善
-  // - 能配合 ColorModeContext 使用
-  // - 为 dark mode 系统的设计整个 palette, 不要单个 color 设置
-  const _palette = mode === 'light' ? Object.assign({
-    ...colors,
-    background: {
-      paper: colors.common.white,
-      default: colors.background.default
-    },
-    mode
-  }, palette || {}) : Object.assign({
-    ...muiDarkTheme.palette,
-    background: {
-      paper: colors.grey[900],
-      default: colors.grey[900]
+const DEFAULT_FONT_FAMILY = ['Inter', 'Avenir', '-apple-system', 'BlinkMacSystemFont', '"Segoe UI"', 'Roboto', '"Helvetica Neue"', 'Arial', 'sans-serif', '"Apple Color Emoji"', '"Segoe UI Emoji"', '"Segoe UI Symbol"'].join(',');
+export function createDefaultThemeOptions(mode = 'light') {
+  const result = {
+    palette: {
+      mode,
+      ...colors,
+      background: {
+        paper: colors.common.white,
+        default: colors.background.default
+      }
     },
-    mode
-  }, palette || {});
-  const theme = _createTheme({
-    themeName: 'ArcBlock',
-    palette: _palette,
-    typography: Object.assign({
+    typography: {
       useNextVariants: true,
       color: {
         // 此处 #222222 必须硬编码, layout/sidebar.js -> Icon/image 加载图片时 color 会影响加载路径
@@ -63,12 +44,12 @@ export const create = ({
         main: mode === 'light' ? '#222222' : colors.common.white,
         gray: mode === 'light' ? colors.grey[500] : colors.grey[300]
       },
-      fontFamily: ['Inter', 'Avenir', '-apple-system', 'BlinkMacSystemFont', '"Segoe UI"', 'Roboto', '"Helvetica Neue"', 'Arial', 'sans-serif', '"Apple Color Emoji"', '"Segoe UI Emoji"', '"Segoe UI Symbol"'].join(','),
+      fontFamily: DEFAULT_FONT_FAMILY,
       // button 默认使用粗体
       button: {
         fontWeight: 700
       }
-    }, typography),
+    },
     components: {
       MuiButton: {
         styleOverrides: {
@@ -111,14 +92,45 @@ export const create = ({
             color: mode === 'light' ? colors.grey[900] : colors.grey[300]
           }
         }
-      },
+      }
+    }
+  };
+  // 深色主题
+  if (mode === 'dark') {
+    result.palette = {
+      ...muiDarkTheme.palette,
+      background: {
+        paper: colors.grey[900],
+        default: colors.grey[900]
+      }
+    };
+  }
+  return result;
+}
+
+// https://material-ui.com/customization/default-theme/
+export const create = ({
+  mode = 'light',
+  pageWidth = 'md',
+  overrides,
+  // original theme options
+  palette,
+  components,
+  ...rest
+} = {}) => {
+  const userThemeOptions = {
+    themeName: 'ArcBlock',
+    palette: {
+      ...palette,
+      mode
+    },
+    components: {
       ...overrides,
       ...components
     },
+    // @TODO 考虑使用 theme.shape.pageWidth
     pageWidth,
-    /**
-     * @deprecated 应使用 theme.palette 中的颜色
-     */
+    // @TODO 考虑使用 theme.palette.common
     colors: {
       white: '#FFFFFF',
       dark: '#4A707C',
@@ -139,9 +151,29 @@ export const create = ({
       danger: '#D0021B',
       lightGrey: '#BCBCBC'
     },
+    // @deprecated use theme.palette.mode
     mode,
     ...rest
-  });
+  };
+  // Blocklet Server 后台配置的全局主题
+  const blockletThemeOptions = window.blocklet?.theme?.[mode] ?? {};
+  // choose mode
+  const defaultThemeOptions = createDefaultThemeOptions(mode);
+  // 同官方合并行为
+  const mergedThemeOptions = deepmerge(deepmerge(defaultThemeOptions, cleanedObj(blockletThemeOptions)), cleanedObj(userThemeOptions));
+  const theme = _createTheme(mergedThemeOptions);
+
+  /**
+   * 响应式字体，配置后，theme.typography 会变为下面的结构
+   * {
+   *  "h1": {
+   *    "fontSize": "3rem",
+   *    "@media (min-width:600px)": {
+   *      "fontSize": "3.3125rem"
+   *    }
+   *  }
+   * }
+   */
   const enhanced = responsiveFontSizes(theme, {
     breakpoints: ['xs', 'sm', 'md', 'lg'],
     disableAlign: false,

package/lib/Util/index.d.ts

@@ -87,4 +87,5 @@ export declare const getTranslation: (translations: TranslationsObject, locale:
     defaultValue?: string;
 }) => string;
 export declare const lazyRetry: (fn: () => Promise<any>) => import("react").LazyExoticComponent<import("react").ComponentType<any>>;
+export declare const cleanedObj: (obj: object) => import("lodash").Dictionary<any>;
 export {};

package/lib/Util/index.js

@@ -3,6 +3,7 @@ import { lazy } from 'react';
 import padStart from 'lodash/padStart';
 import { getDIDMotifInfo, colors } from '@arcblock/did-motif';
 import isNil from 'lodash/isNil';
+import omitBy from 'lodash/omitBy';
 import pRetry from 'p-retry';
 import { DID_PREFIX, BLOCKLET_SERVICE_PATH_PREFIX } from './constant';
 let dateTool = null;
@@ -376,4 +377,7 @@ export const lazyRetry = fn => /*#__PURE__*/lazy(() => pRetry(async () => {
 // 只需要重试两次，加上原本的一次，总共三次
 {
   retries: 2
-}));
+}));
+export const cleanedObj = obj => {
+  return omitBy(obj, isNil);
+};

package/lib/type.d.ts

@@ -4,6 +4,7 @@ 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>;
@@ -25,7 +26,7 @@ export type Blocklet = {
   version: string;
   mode: string;
   tenantMode: 'single' | 'multiple';
-  theme: Theme;
+  theme: Record<ThemeMode, Theme>;
   navigation: $TSFixMe[];
   preferences: Record<string, any>;
   languages: {

package/lib/withTheme/index.d.ts

@@ -1,8 +1,10 @@
+import { Breakpoint } 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?: string;
-    pageWidth?: string;
+    mode?: ThemeMode;
+    pageWidth?: Breakpoint;
     palette?: PaletteOptions;
     typography?: TypographyOptions;
 }): (props: P) => import("react/jsx-runtime").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.12.47",
+  "version": "2.12.49",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -65,15 +65,16 @@
     "@emotion/styled": "^11.10.4",
     "@mui/icons-material": ">=5.15.0",
     "@mui/material": ">=5.15.0",
+    "@mui/utils": ">=5.15.0",
     "react": ">=18.2.0",
     "react-router-dom": ">=6.22.3"
   },
-  "gitHead": "f8b62d37754f4254c8f2961eb778ca2ce71264ee",
+  "gitHead": "ffebc9c5df6d576f08c3538b4db75d7ec8cf00be",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.12.47",
-    "@arcblock/nft-display": "^2.12.47",
-    "@arcblock/react-hooks": "^2.12.47",
+    "@arcblock/icons": "^2.12.49",
+    "@arcblock/nft-display": "^2.12.49",
+    "@arcblock/react-hooks": "^2.12.49",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@fontsource/inter": "^5.0.16",
     "@fontsource/ubuntu-mono": "^5.0.18",

package/src/Config/config-provider.tsx

@@ -0,0 +1,123 @@
+import { createContext, useContext, ReactNode, useMemo, useState, useCallback } from 'react';
+import type { ThemeOptions } from '@mui/material/styles';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import set from 'lodash/set';
+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;
+  themeOptions: ThemeOptions;
+  toggleMode: () => void;
+}
+
+const ConfigContext = createContext<ConfigContextType>({} as ConfigContextType);
+const preferThemeModeKey = 'blocklet_theme_prefer';
+
+export function isThemeRecord(
+  theme: ThemeOptions | Record<ThemeMode, ThemeOptions>
+): theme is Record<ThemeMode, ThemeOptions> {
+  return 'light' in theme || 'dark' in theme;
+}
+
+export interface ConfigProviderProps
+  extends Omit<LocaleProviderProps, 'translations'>,
+    Omit<ThemeProviderProps, 'theme'> {
+  children: ReactNode;
+  prefer?: ThemeMode;
+  theme?: ThemeOptions | Record<ThemeMode, ThemeOptions>;
+  translations?: Record<string, any>;
+}
+
+/**
+ * 集中化配置
+ */
+export function ConfigProvider({
+  children,
+  // theme config
+  prefer,
+  theme: themeOptions,
+  injectFirst,
+  // locale config
+  locale,
+  fallbackLocale,
+  translations = {},
+  languages,
+  onLoadingTranslation,
+}: ConfigProviderProps) {
+  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
+  const [mode, setMode] = useState<ThemeMode>(() => {
+    const preferMode = localStorage.getItem(preferThemeModeKey) as ThemeMode;
+    if (preferMode && (preferMode === 'light' || preferMode === 'dark')) {
+      return preferMode;
+    }
+    return prefer || (prefersDarkMode ? 'dark' : 'light');
+  });
+
+  const _themeOptions = useMemo(() => {
+    let result: ThemeOptions = {};
+
+    if (themeOptions) {
+      if (isThemeRecord(themeOptions)) {
+        result = themeOptions[mode] ? { ...themeOptions[mode] } : {};
+      } else {
+        result = { ...themeOptions };
+      }
+    }
+
+    set(result, 'palette.mode', mode);
+    set(result, 'mode', mode);
+
+    return result;
+  }, [mode, themeOptions]);
+
+  const theme = useMemo(() => {
+    return createTheme(_themeOptions);
+  }, [_themeOptions]);
+
+  const toggleMode = useCallback(() => {
+    const newMode = mode === 'light' ? 'dark' : 'light';
+    setMode(newMode);
+    localStorage.setItem(preferThemeModeKey, newMode);
+  }, [mode, setMode]);
+
+  const config = useMemo(
+    () => ({
+      mode,
+      themeOptions: _themeOptions,
+      toggleMode,
+    }),
+    [mode, _themeOptions, toggleMode]
+  );
+
+  return (
+    <ConfigContext.Provider value={config}>
+      <LocaleProvider
+        locale={locale}
+        fallbackLocale={fallbackLocale}
+        translations={translations}
+        onLoadingTranslation={onLoadingTranslation}
+        languages={languages}>
+        <ThemeProvider theme={theme} injectFirst={injectFirst}>
+          {children}
+        </ThemeProvider>
+      </LocaleProvider>
+    </ConfigContext.Provider>
+  );
+}
+
+export function useConfig() {
+  const theme = useTheme();
+  const localeCtx = useLocaleContext();
+  const configCtx = useContext(ConfigContext);
+
+  return {
+    theme,
+    ...localeCtx,
+    ...configCtx,
+  };
+}
+
+ConfigProvider.useConfig = useConfig;

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

@@ -0,0 +1,22 @@
+import { IconButton } from '@mui/material';
+import LightModeOutlinedIcon from '@mui/icons-material/LightModeOutlined';
+import Brightness2OutlinedIcon from '@mui/icons-material/Brightness2Outlined';
+import { useConfig } from './config-provider';
+
+export default function ThemeModeToggle() {
+  const { mode, toggleMode } = useConfig();
+
+  if (!toggleMode) {
+    if (process.env.NODE_ENV !== 'production') {
+      console.warn('Please ensure the component is wrapped with ConfigProvider context');
+    }
+
+    return null;
+  }
+
+  return (
+    <IconButton onClick={toggleMode} color="inherit">
+      {mode === 'light' ? <LightModeOutlinedIcon /> : <Brightness2OutlinedIcon />}
+    </IconButton>
+  );
+}

package/src/Locale/context.tsx

@@ -62,7 +62,7 @@ const getLanguages = (arg?: { code: string; name: string }[]): { code: string; n
   ];
 };
 
-interface LocaleProviderProps {
+export interface LocaleProviderProps {
   children: ReactNode;
   locale?: Locale;
   fallbackLocale?: Locale;

package/src/Theme/theme-provider.tsx

@@ -6,18 +6,16 @@ import { createTheme } from './theme';
 
 const defaultTheme = createTheme();
 
+export interface ThemeProviderProps {
+  children?: React.ReactNode;
+  theme: Theme;
+  injectFirst?: boolean;
+}
+
 /**
  * 默认的 theme provider, 可以为 webapp/blocklet 快捷的配置好 mui theme provider
  */
-export default function ThemeProvider({
-  children,
-  theme,
-  injectFirst,
-}: {
-  children?: React.ReactNode;
-  theme: Theme;
-  injectFirst: boolean;
-}) {
+export default function ThemeProvider({ children, theme, injectFirst }: ThemeProviderProps) {
   return (
     // injectFirst 会影响 makeStyles 自定义样式和 mui styles 覆盖问题
     <StyledEngineProvider injectFirst={injectFirst}>

package/src/Theme/theme.ts

@@ -1,14 +1,8 @@
 /* eslint-disable no-shadow */
 // https://app.zeplin.io/styleguide/5d1436f1e97c2156f49c0725/colors
-import {
-  createTheme as _createTheme,
-  Components,
-  PaletteOptions,
-  responsiveFontSizes,
-  type Theme,
-  type ThemeOptions,
-} from '@mui/material/styles';
-import { Typography, TypographyOptions } from '@mui/material/styles/createTypography';
+import { createTheme as _createTheme, Components, responsiveFontSizes, type ThemeOptions } from '@mui/material/styles';
+import { deepmerge } from '@mui/utils';
+import type { Typography } from '@mui/material/styles/createTypography';
 // 为了避免加载全量的字体导致打包后体积太大，目前只选择了 latin 语系的字体
 import '@fontsource/inter/latin-300.css';
 import '@fontsource/inter/latin-400.css';
@@ -19,11 +13,13 @@ import '@fontsource/inter/latin-ext-400.css';
 import '@fontsource/inter/latin-ext-500.css';
 import '@fontsource/inter/latin-ext-700.css';
 import colors from '../Colors';
+import { ThemeMode } from '../type';
+import { cleanedObj } from '../Util';
 
 // 扩展 Theme
 declare module '@mui/material/styles' {
   interface Theme {
-    mode?: string;
+    mode?: ThemeMode;
     themeName?: string;
     pageWidth?: string;
     colors?: Record<string, string>;
@@ -36,99 +32,71 @@ declare module '@mui/material/styles' {
     };
   }
   interface ThemeOptions {
-    mode?: string;
     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>;
+    button?: {
+      fontWeight?: number;
+    };
+  }
+}
 
 const muiDarkTheme = _createTheme({ palette: { mode: 'dark' } });
 
-// https://material-ui.com/customization/default-theme/
-export const create = ({
-  mode = 'light',
-  pageWidth = 'md',
-  typography,
-  /** @deprecated 使用 components 替代 */
-  overrides,
-  // original theme options
-  palette,
-  components,
-  ...rest
-}: {
-  mode?: string;
-  pageWidth?: string;
-  typography?: TypographyOptions;
-  overrides?: Components<Omit<Theme, 'components'>>;
-} & ThemeOptions = {}) => {
-  // palette 考虑 light & dark mode, dark mode 需要持续完善
-  // - 能配合 ColorModeContext 使用
-  // - 为 dark mode 系统的设计整个 palette, 不要单个 color 设置
-  const _palette: PaletteOptions =
-    mode === 'light'
-      ? Object.assign(
-          {
-            ...colors,
-            background: {
-              paper: colors.common.white,
-              default: colors.background.default,
-            },
-            mode,
-          },
-          palette || {}
-        )
-      : Object.assign(
-          {
-            ...muiDarkTheme.palette,
-            background: {
-              paper: colors.grey[900],
-              default: colors.grey[900],
-            },
-            mode,
-          },
-          palette || {}
-        );
+const DEFAULT_FONT_FAMILY = [
+  'Inter',
+  'Avenir',
+  '-apple-system',
+  'BlinkMacSystemFont',
+  '"Segoe UI"',
+  'Roboto',
+  '"Helvetica Neue"',
+  'Arial',
+  'sans-serif',
+  '"Apple Color Emoji"',
+  '"Segoe UI Emoji"',
+  '"Segoe UI Symbol"',
+].join(',');
 
-  const theme = _createTheme({
-    themeName: 'ArcBlock',
-    palette: _palette,
-    typography: Object.assign(
-      {
-        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],
-        },
-        fontFamily: [
-          'Inter',
-          'Avenir',
-          '-apple-system',
-          'BlinkMacSystemFont',
-          '"Segoe UI"',
-          'Roboto',
-          '"Helvetica Neue"',
-          'Arial',
-          'sans-serif',
-          '"Apple Color Emoji"',
-          '"Segoe UI Emoji"',
-          '"Segoe UI Symbol"',
-        ].join(','),
-        // button 默认使用粗体
-        button: {
-          fontWeight: 700,
-        },
+export function createDefaultThemeOptions(mode: ThemeMode = 'light'): ThemeOptions {
+  const result: ThemeOptions = {
+    palette: {
+      mode,
+      ...colors,
+      background: {
+        paper: colors.common.white,
+        default: colors.background.default,
+      },
+    },
+    typography: {
+      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],
+      },
+      fontFamily: DEFAULT_FONT_FAMILY,
+      // button 默认使用粗体
+      button: {
+        fontWeight: 700,
       },
-      typography
-    ),
+    },
     components: {
       MuiButton: {
         styleOverrides: {
@@ -172,13 +140,45 @@ export const create = ({
           },
         },
       },
+    },
+  };
+  // 深色主题
+  if (mode === 'dark') {
+    result.palette = {
+      ...muiDarkTheme.palette,
+      background: {
+        paper: colors.grey[900],
+        default: colors.grey[900],
+      },
+    };
+  }
+
+  return result;
+}
+
+// https://material-ui.com/customization/default-theme/
+export const create = ({
+  mode = 'light',
+  pageWidth = 'md',
+  overrides,
+  // original theme options
+  palette,
+  components,
+  ...rest
+}: ThemeOptions = {}) => {
+  const userThemeOptions: ThemeOptions = {
+    themeName: 'ArcBlock',
+    palette: {
+      ...palette,
+      mode,
+    },
+    components: {
       ...overrides,
       ...components,
     },
+    // @TODO 考虑使用 theme.shape.pageWidth
     pageWidth,
-    /**
-     * @deprecated 应使用 theme.palette 中的颜色
-     */
+    // @TODO 考虑使用 theme.palette.common
     colors: {
       white: '#FFFFFF',
       dark: '#4A707C',
@@ -199,10 +199,33 @@ export const create = ({
       danger: '#D0021B',
       lightGrey: '#BCBCBC',
     },
+    // @deprecated use theme.palette.mode
     mode,
     ...rest,
-  });
+  };
+  // Blocklet Server 后台配置的全局主题
+  const blockletThemeOptions = window.blocklet?.theme?.[mode] ?? {};
+  // choose mode
+  const defaultThemeOptions = createDefaultThemeOptions(mode);
+  // 同官方合并行为
+  const mergedThemeOptions = deepmerge(
+    deepmerge(defaultThemeOptions, cleanedObj(blockletThemeOptions)),
+    cleanedObj(userThemeOptions)
+  );
+
+  const theme = _createTheme(mergedThemeOptions);
 
+  /**
+   * 响应式字体，配置后，theme.typography 会变为下面的结构
+   * {
+   *  "h1": {
+   *    "fontSize": "3rem",
+   *    "@media (min-width:600px)": {
+   *      "fontSize": "3.3125rem"
+   *    }
+   *  }
+   * }
+   */
   const enhanced = responsiveFontSizes(theme, {
     breakpoints: ['xs', 'sm', 'md', 'lg'],
     disableAlign: false,

package/src/Util/index.ts

@@ -3,6 +3,7 @@ import { lazy } from 'react';
 import padStart from 'lodash/padStart';
 import { getDIDMotifInfo, colors } from '@arcblock/did-motif';
 import isNil from 'lodash/isNil';
+import omitBy from 'lodash/omitBy';
 import pRetry from 'p-retry';
 import { DID_PREFIX, BLOCKLET_SERVICE_PATH_PREFIX } from './constant';
 import type { $TSFixMe, Locale } from '../type';
@@ -480,3 +481,7 @@ export const lazyRetry = (fn: () => Promise<any>) =>
       { retries: 2 }
     )
   );
+
+export const cleanedObj = (obj: object) => {
+  return omitBy(obj, isNil);
+};

package/src/type.d.ts

@@ -4,6 +4,7 @@ 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>;
@@ -25,7 +26,7 @@ export type Blocklet = {
   version: string;
   mode: string;
   tenantMode: 'single' | 'multiple';
-  theme: Theme;
+  theme: Record<ThemeMode, Theme>;
   navigation: $TSFixMe[];
   preferences: Record<string, any>;
   languages: {

package/src/withTheme/index.tsx

@@ -1,10 +1,12 @@
 import { useEffect } from 'react';
 import { Global, css } from '@emotion/react';
 import CssBaseline from '@mui/material/CssBaseline';
+import { Breakpoint } 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>,
@@ -13,7 +15,7 @@ function withTheme<P extends object>(
     pageWidth = 'md',
     palette,
     typography,
-  }: { mode?: string; pageWidth?: string; palette?: PaletteOptions; typography?: TypographyOptions } = {}
+  }: { mode?: ThemeMode; pageWidth?: Breakpoint; palette?: PaletteOptions; typography?: TypographyOptions } = {}
 ) {
   const theme = createTheme({ mode, pageWidth, palette, typography });