@arcblock/ux 2.13.55 → 2.13.56

package/lib/Theme/theme-provider.js

@@ -1,5 +1,5 @@
 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';
@@ -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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.13.55",
+  "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": "fd8de005ce497660cbf1ea7378cf0d725b45fe87",
+  "gitHead": "ebf7d863313f1ce95571b81df01182756395197e",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.13.55",
-    "@arcblock/nft-display": "^2.13.55",
-    "@arcblock/react-hooks": "^2.13.55",
+    "@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.55",
+    "@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,4 +1,4 @@
-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';
@@ -161,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 = {};
@@ -231,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}>