@arcblock/ux 2.13.54 → 2.13.56

package/lib/Theme/theme-provider.js

@@ -1,14 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import { createContext, useCallback, useContext, useEffect, useMemo, useState, useRef } 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 set from 'lodash/set';
-import { BLOCKLET_THEME_PREFER_KEY } from '@blocklet/theme';
+import { BLOCKLET_THEME_PREFER_KEY, getDefaultThemePrefer, isValidThemeMode } from '@blocklet/theme';
 import useLocationState from '../hooks/use-location-state';
-import { createTheme, getDefaultThemePrefer, isTheme, isUxTheme, isValidThemeMode, lazyCreateDefaultTheme } from './theme';
+import { createTheme, isTheme, isUxTheme, lazyCreateDefaultTheme } from './theme';
 const defaultTheme = createTheme();
 
 /** 颜色模式上下文类型 */
@@ -125,6 +125,7 @@ function ColorSchemeProvider({
   const [mode, setMode] = useState(() => resolveMode(prefer));
   const parentTheme = useTheme();
   const location = useLocationState();
+  const metaThemeColorRef = useRef(null);
   const _themeInput = useMemo(() => {
     let result = {};
     const createBaseTheme = lazyCreateDefaultTheme(mode);
@@ -192,6 +193,23 @@ function ColorSchemeProvider({
       sessionStorage.setItem(BLOCKLET_THEME_PREFER_KEY, urlTheme);
     }
   }, [location.search]);
+
+  // 动态设置 <meta name="theme-color" content="..."> 标签，用于控制移动端浏览器状态栏颜色
+  useEffect(() => {
+    if (!metaThemeColorRef.current) {
+      metaThemeColorRef.current = document.querySelector('meta[name="theme-color"]');
+    }
+    const bgcolor = theme.palette.background.default;
+    if (metaThemeColorRef.current) {
+      metaThemeColorRef.current.setAttribute('content', bgcolor);
+    } else {
+      const meta = document.createElement('meta');
+      meta.name = 'theme-color';
+      meta.content = bgcolor;
+      document.head.appendChild(meta);
+      metaThemeColorRef.current = meta;
+    }
+  }, [theme.palette.background.default]);
   return /*#__PURE__*/_jsx(ColorSchemeContext.Provider, {
     value: colorSchemeValue,
     children: /*#__PURE__*/_jsx(BaseThemeProvider, {

package/lib/Theme/theme.d.ts

@@ -15,12 +15,6 @@ export declare function collectFontFamilies(obj?: {
     fontFamily?: string;
 }, fontSet?: Set<string>): Set<string>;
 export declare function loadFonts(fonts: string[]): Promise<boolean>;
-export declare function isValidThemeMode(mode: any): mode is PaletteMode;
-export declare function getDefaultThemePrefer(meta?: {
-    theme: {
-        prefer: 'light' | 'dark' | 'system';
-    };
-}): PaletteMode;
 export declare function createDefaultThemeOptions(mode?: PaletteMode): ThemeOptions;
 export interface UxThemeOptions extends ThemeOptions {
     disableBlockletTheme?: boolean;

package/lib/Theme/theme.js

@@ -4,7 +4,7 @@
 import { createTheme as _createTheme, responsiveFontSizes } from '@mui/material/styles';
 import { deepmerge } from '@mui/utils';
 import webfontloader from 'webfontloader';
-import { BLOCKLET_THEME_LIGHT, BLOCKLET_THEME_DARK, DEFAULT_FONTS, BLOCKLET_THEME_PREFER_KEY } from '@blocklet/theme';
+import { BLOCKLET_THEME_LIGHT, BLOCKLET_THEME_DARK, DEFAULT_FONTS, getDefaultThemePrefer } from '@blocklet/theme';
 import { cleanedObj, deepmergeAll } from '../Util';
 
 // 默认只加载最基本的 roboto latin 字体
@@ -71,44 +71,6 @@ export function loadFonts(fonts) {
   });
 }
 
-// 获取默认主题偏好
-export function isValidThemeMode(mode) {
-  return mode === 'light' || mode === 'dark';
-}
-export function getDefaultThemePrefer(meta) {
-  // 跟随 url theme 参数
-  const urlParams = new URLSearchParams(window.location.search);
-  const urlPrefer = urlParams.get('theme');
-  if (isValidThemeMode(urlPrefer)) {
-    return urlPrefer;
-  }
-
-  // 跟随 session theme
-  const sessionPrefer = sessionStorage.getItem(BLOCKLET_THEME_PREFER_KEY);
-  if (isValidThemeMode(sessionPrefer)) {
-    return sessionPrefer;
-  }
-
-  // 跟随 blocklet theme mode
-  const prefer = Object.assign({}, window.blocklet, meta).theme?.prefer;
-  if (prefer === 'light' || prefer === 'dark') {
-    return prefer;
-  }
-  if (prefer === 'system') {
-    // 跟随本地缓存
-    const localPrefer = localStorage.getItem(BLOCKLET_THEME_PREFER_KEY);
-    if (isValidThemeMode(localPrefer)) {
-      return localPrefer;
-    }
-
-    // 跟随系统
-    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
-  }
-
-  // fallback
-  return 'light';
-}
-
 // 创建默认主题配置
 export function createDefaultThemeOptions(mode = 'light') {
   if (mode === 'dark') {

package/package.json

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

package/src/Theme/theme-provider.tsx

@@ -1,23 +1,14 @@
-import { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import { createContext, useCallback, useContext, useEffect, useMemo, useState, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { GlobalStyles, PaletteMode } from '@mui/material';
 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 { BLOCKLET_THEME_PREFER_KEY, getDefaultThemePrefer, isValidThemeMode } from '@blocklet/theme';
 
 import useLocationState from '../hooks/use-location-state';
-
-import {
-  createTheme,
-  getDefaultThemePrefer,
-  isTheme,
-  isUxTheme,
-  isValidThemeMode,
-  lazyCreateDefaultTheme,
-  type UxThemeOptions,
-} from './theme';
+import { createTheme, isTheme, isUxTheme, lazyCreateDefaultTheme, type UxThemeOptions } from './theme';
 
 const defaultTheme = createTheme();
 
@@ -170,6 +161,7 @@ function ColorSchemeProvider({
   const [mode, setMode] = useState<PaletteMode>(() => resolveMode(prefer));
   const parentTheme = useTheme();
   const location = useLocationState();
+  const metaThemeColorRef = useRef<HTMLMetaElement | null>(null);
 
   const _themeInput = useMemo(() => {
     let result: UxThemeOptions = {};
@@ -240,6 +232,25 @@ function ColorSchemeProvider({
     }
   }, [location.search]);
 
+  // 动态设置 <meta name="theme-color" content="..."> 标签，用于控制移动端浏览器状态栏颜色
+  useEffect(() => {
+    if (!metaThemeColorRef.current) {
+      metaThemeColorRef.current = document.querySelector('meta[name="theme-color"]');
+    }
+
+    const bgcolor = theme.palette.background.default;
+
+    if (metaThemeColorRef.current) {
+      metaThemeColorRef.current.setAttribute('content', bgcolor);
+    } else {
+      const meta = document.createElement('meta');
+      meta.name = 'theme-color';
+      meta.content = bgcolor;
+      document.head.appendChild(meta);
+      metaThemeColorRef.current = meta;
+    }
+  }, [theme.palette.background.default]);
+
   return (
     <ColorSchemeContext.Provider value={colorSchemeValue}>
       <BaseThemeProvider theme={theme} {...rest}>

package/src/Theme/theme.ts

@@ -4,7 +4,7 @@ import type { PaletteMode, Theme } from '@mui/material';
 import { createTheme as _createTheme, responsiveFontSizes, type ThemeOptions } from '@mui/material/styles';
 import { deepmerge } from '@mui/utils';
 import webfontloader from 'webfontloader';
-import { BLOCKLET_THEME_LIGHT, BLOCKLET_THEME_DARK, DEFAULT_FONTS, BLOCKLET_THEME_PREFER_KEY } from '@blocklet/theme';
+import { BLOCKLET_THEME_LIGHT, BLOCKLET_THEME_DARK, DEFAULT_FONTS, getDefaultThemePrefer } from '@blocklet/theme';
 import { cleanedObj, deepmergeAll } from '../Util';
 
 // 默认只加载最基本的 roboto latin 字体
@@ -80,46 +80,6 @@ export function loadFonts(fonts: string[]) {
   });
 }
 
-// 获取默认主题偏好
-export function isValidThemeMode(mode: any): mode is PaletteMode {
-  return mode === 'light' || mode === 'dark';
-}
-
-export function getDefaultThemePrefer(meta?: { theme: { prefer: 'light' | 'dark' | 'system' } }): PaletteMode {
-  // 跟随 url theme 参数
-  const urlParams = new URLSearchParams(window.location.search);
-  const urlPrefer = urlParams.get('theme');
-  if (isValidThemeMode(urlPrefer)) {
-    return urlPrefer;
-  }
-
-  // 跟随 session theme
-  const sessionPrefer = sessionStorage.getItem(BLOCKLET_THEME_PREFER_KEY);
-  if (isValidThemeMode(sessionPrefer)) {
-    return sessionPrefer;
-  }
-
-  // 跟随 blocklet theme mode
-  const prefer = Object.assign({}, window.blocklet, meta).theme?.prefer;
-  if (prefer === 'light' || prefer === 'dark') {
-    return prefer;
-  }
-
-  if (prefer === 'system') {
-    // 跟随本地缓存
-    const localPrefer = localStorage.getItem(BLOCKLET_THEME_PREFER_KEY);
-    if (isValidThemeMode(localPrefer)) {
-      return localPrefer;
-    }
-
-    // 跟随系统
-    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
-  }
-
-  // fallback
-  return 'light';
-}
-
 // 创建默认主题配置
 export function createDefaultThemeOptions(mode: PaletteMode = 'light') {
   if (mode === 'dark') {