@arcblock/ux 2.13.20 → 2.13.23

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>(