@blocklet/ui-react 2.13.12 → 2.13.14

package/lib/UserCenter/components/third-party-login/index.js

@@ -7,11 +7,13 @@ import { getConnectedAccounts, getSourceProvider } from "@arcblock/ux/lib/Sessio
 import { LOGIN_PROVIDER } from "@arcblock/ux/lib/Util/constant";
 import { SessionContext } from "@arcblock/did-connect/lib/Session";
 import { PasskeyActions } from "@arcblock/did-connect/lib/Passkey";
+import { useBrowser } from "@arcblock/react-hooks";
 import ThirdPartyItem from "./third-party-item.js";
 export default function ThirdPartyLogin({ user }) {
   const { session } = useContext(SessionContext);
   const [oauthConfigs, setOauthConfigs] = useState({});
   const { getOAuthConfigs } = session.useOAuth();
+  const browser = useBrowser();
   useAsyncEffect(async () => {
     const data = await getOAuthConfigs({
       sourceAppPid: user?.sourceAppPid
@@ -149,7 +151,7 @@ export default function ThirdPartyLogin({ user }) {
         walletAccounts.map((account) => {
           return /* @__PURE__ */ jsx(ThirdPartyItem, { item: account }, account.id);
         }),
-        /* @__PURE__ */ jsx(
+        browser.wallet || browser.arcSphere ? null : /* @__PURE__ */ jsx(
           PasskeyActions,
           {
             behavior: "only-new",

package/lib/UserCenter/components/third-party-login/third-party-item.js

@@ -2,7 +2,6 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Icon } from "@iconify/react";
 import { Box, Tooltip, Typography } from "@mui/material";
 import LinkRoundedIcon from "@iconify-icons/material-symbols/link-rounded";
-import { temp as colors } from "@arcblock/ux/lib/Colors";
 import Button from "@arcblock/ux/lib/Button";
 import Avatar from "@arcblock/ux/lib/Avatar";
 import { useCreation, useMemoizedFn, useReactive } from "ahooks";
@@ -134,9 +133,10 @@ export default function ThirdPartyItem({
       Box,
       {
         sx: {
-          borderRadius: 2,
-          border: `1px solid ${colors.strokeBorderBase}`,
-          background: colors.backgroundsBgField,
+          borderRadius: 1,
+          border: "1px solid",
+          borderColor: "divider",
+          backgroundColor: "grey.50",
           display: "flex",
           alignItems: "center",
           py: 1,
@@ -213,7 +213,7 @@ export default function ThirdPartyItem({
                       {
                         component: Icon,
                         icon: InfoOutlineRoundedIcon,
-                        color: colors.textSubtitle,
+                        color: "text.secondary",
                         fontSize: 16,
                         sx: { cursor: "pointer", flexShrink: 0 }
                       }
@@ -231,18 +231,22 @@ export default function ThirdPartyItem({
       {
         variant: "outlined",
         size: "small",
-        sx: {
-          color: item?._bind ? colors.red : colors.foregroundsFgBase,
-          borderColor: item?._bind ? colors.red : colors.strokeBorderBase,
-          backgroundColor: colors.buttonsButtonNeutral,
-          "&:hover": {
-            borderColor: item?._bind ? colors.red : colors.strokeBorderBase,
-            backgroundColor: colors.buttonsButtonNeutralHover
-          },
-          py: 0.5,
-          borderRadius: 2,
-          fontWeight: 500,
-          whiteSpace: "nowrap"
+        sx: (theme) => {
+          const textRed = theme.palette.error.main;
+          const textPrimary = theme.palette.primary.main;
+          return {
+            color: item?._bind ? textRed : textPrimary,
+            borderColor: item?._bind ? textRed : textPrimary,
+            backgroundColor: "background.default",
+            "&:hover": {
+              borderColor: item?._bind ? textRed : textPrimary,
+              backgroundColor: "action.hover"
+            },
+            py: 0.5,
+            borderRadius: 1,
+            fontWeight: 500,
+            whiteSpace: "nowrap"
+          };
         },
         fullWidth: true,
         startIcon: currentState.loading ? null : /* @__PURE__ */ jsx(Icon, { icon: LinkRoundedIcon }),

package/lib/UserCenter/components/user-center.js

@@ -8,7 +8,6 @@ import Tabs from "@arcblock/ux/lib/Tabs";
 import Empty from "@arcblock/ux/lib/Empty";
 import Button from "@arcblock/ux/lib/Button";
 import Result from "@arcblock/ux/lib/Result";
-import { temp as colors } from "@arcblock/ux/lib/Colors";
 import { useConfirm } from "@arcblock/ux/lib/Dialog";
 import { translate } from "@arcblock/ux/lib/Locale/util";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
@@ -139,7 +138,7 @@ export default function UserCenter({
     fullScreen: isMobile,
     sx: {
       ".MuiDialog-paper": {
-        borderRadius: 2,
+        borderRadius: 1,
         maxWidth: 1200
       },
       ".ux-dialog_title": {
@@ -274,12 +273,12 @@ export default function UserCenter({
             gap: 2.5
           },
           children: [
-            isMyself ? /* @__PURE__ */ jsxs(Box, { sx: { border: `1px solid ${colors.dividerColor}`, borderRadius: 2, p: 2 }, children: [
+            isMyself ? /* @__PURE__ */ jsxs(Box, { sx: { border: "1px solid", borderColor: "divider", borderRadius: 1.5, p: 2 }, children: [
               /* @__PURE__ */ jsx(
                 Typography,
                 {
                   sx: {
-                    color: colors.foregroundsFgBase,
+                    color: "text.primary",
                     fontWeight: 600,
                     mb: 2.5
                   },
@@ -330,7 +329,7 @@ export default function UserCenter({
             alignItems: "center",
             flex: 1
           },
-          children: /* @__PURE__ */ jsx(CircularProgress, { sx: { color: colors.primary100 } })
+          children: /* @__PURE__ */ jsx(CircularProgress, {})
         }
       );
     }
@@ -459,7 +458,7 @@ export default function UserCenter({
                         display: "block",
                         width: "100%",
                         height: "1px",
-                        backgroundColor: `${colors.dividerColor} !important`
+                        backgroundColor: "divider"
                       }
                     }
                   }
@@ -471,7 +470,7 @@ export default function UserCenter({
         ) : null,
         userCenterTabs.length === 0 && emptyContent
       ] }),
-      !isMobile && /* @__PURE__ */ jsx(Divider, { orientation: "vertical", sx: { borderColor: colors.dividerColor, ml: 5 } }),
+      !isMobile && /* @__PURE__ */ jsx(Divider, { orientation: "vertical", sx: { ml: 5 } }),
       /* @__PURE__ */ jsx(
         UserBasicInfo,
         {

package/lib/UserCenter/components/user-info/address.js

@@ -3,7 +3,6 @@ import { Box } from "@mui/material";
 import { useMemoizedFn } from "ahooks";
 import { translate } from "@arcblock/ux/lib/Locale/util";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
-import { temp as colors } from "@arcblock/ux/lib/Colors";
 import CountrySelect from "@arcblock/ux/lib/PhoneInput/country-select";
 import { translations } from "../../libs/locales.js";
 import EditableField from "../editable-field.js";
@@ -14,11 +13,11 @@ const selectStyle = {
   borderRadius: 1,
   "&:hover": {
     "fieldset.MuiOutlinedInput-notchedOutline": {
-      borderColor: colors.dividerColor
+      borderColor: "divider"
     }
   },
   "fieldset.MuiOutlinedInput-notchedOutline": {
-    borderColor: colors.dividerColor,
+    borderColor: "divider",
     borderRadius: 1
   },
   ".MuiSelect-select": {

package/lib/UserCenter/components/user-info/link-preview-input.js

@@ -1,9 +1,8 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Box, Button, FormControl, IconButton, TextField, Typography } from "@mui/material";
 import styled from "@emotion/styled";
-import RemoveIcon from "@arcblock/icons/lib/Subtract";
+import RemoveIcon from "@mui/icons-material/Remove";
 import AddIcon from "@mui/icons-material/Add";
-import { temp as colors } from "@arcblock/ux/lib/Colors";
 import { useEffect, useMemo, useState } from "react";
 import { translate } from "@arcblock/ux/lib/Locale/util";
 import { useMemoizedFn } from "ahooks";
@@ -69,7 +68,7 @@ function DynamicLinkForm({ links = [], onChange }) {
     onChange(updatedLinks);
   };
   return /* @__PURE__ */ jsxs(Box, { width: "100%", children: [
-    /* @__PURE__ */ jsx(Box, { display: "flex", justifyContent: "space-between", alignItems: "center", gap: 1, children: /* @__PURE__ */ jsx(Typography, { variant: "subtitle1", gutterBottom: true, sx: { mb: 0, fontSize: "12px", color: "#4B5563" }, children: "Social Media" }) }),
+    /* @__PURE__ */ jsx(Box, { display: "flex", justifyContent: "space-between", alignItems: "center", gap: 1, children: /* @__PURE__ */ jsx(Typography, { variant: "subtitle1", gutterBottom: true, sx: { mb: 0, fontSize: "12px", color: "text.primary" }, children: "Social Media" }) }),
     links.map((link, index) => (
       // eslint-disable-next-line react/no-array-index-key
       /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "flex-start", mb: 1, children: [
@@ -81,7 +80,7 @@ function DynamicLinkForm({ links = [], onChange }) {
             errorMsg: errors[index] ? t("profile.invalidURL") : ""
           }
         ),
-        /* @__PURE__ */ jsx(IconButton, { sx: { color: colors.foregroundsFgMuted }, onClick: () => handleRemoveLink(index), children: /* @__PURE__ */ jsx(RemoveIcon, {}) })
+        /* @__PURE__ */ jsx(IconButton, { onClick: () => handleRemoveLink(index), children: /* @__PURE__ */ jsx(RemoveIcon, { sx: { color: "text.secondary" } }) })
       ] }, index)
     )),
     links.length < 5 && /* @__PURE__ */ jsxs(
@@ -94,11 +93,12 @@ function DynamicLinkForm({ links = [], onChange }) {
         size: "small",
         sx: {
           height: "40px",
-          border: `1px dashed ${colors.dividerColor}`,
-          color: colors.textBase,
+          border: "1px dashed",
+          borderColor: "grey.100",
+          color: "text.primary",
           "&:hover": {
-            border: `1px dashed ${colors.backgroundsBgSubtileHover}`,
-            backgroundColor: colors.backgroundsBgSubtileHover
+            borderColor: "grey.100",
+            backgroundColor: "action.hover"
           },
           "&.Mui-disabled": {
             borderStyle: "dashed"

package/lib/UserCenter/components/user-info/metadata.js

@@ -519,7 +519,7 @@ export default function UserMetadataComponent({
         PaperProps: {
           sx: {
             boxShadow: "0px -2px 16px 0px rgba(0, 0, 0, 0.08)",
-            borderRadius: 3,
+            borderRadius: 1.5,
             // 保持跟 DID Wallet 一致
             borderBottomLeftRadius: 0,
             borderBottomRightRadius: 0

package/lib/UserCenter/components/user-info/switch-role.js

@@ -1,9 +1,9 @@
 import { jsx } from "react/jsx-runtime";
 import { memo } from "react";
 import { Chip } from "@mui/material";
+import { Icon } from "@iconify/react";
+import SwapHorizRoundedIcon from "@iconify-icons/material-symbols/swap-horiz-rounded";
 import { useCreation } from "ahooks";
-import SwitchIcon from "@arcblock/icons/lib/Switch";
-import { temp as colors } from "@arcblock/ux/lib/Colors";
 function SwitchRole({ user, switchPassport }) {
   const currentRole = useCreation(
     () => (user?.passports || [])?.find((item) => item.name === user.role),
@@ -19,21 +19,18 @@ function SwitchRole({ user, switchPassport }) {
         flexShrink: 0,
         fontWeight: "bold",
         fontSize: "12px",
-        color: colors.textBase,
-        borderColor: colors.strokeBorderStrong,
+        color: "text.primary",
+        borderColor: "grey.100",
         backgroundColor: "transparent",
         textTransform: "capitalize",
         pr: 1,
         pl: 0.5,
-        "&:hover": {
-          backgroundColor: "rgba(0, 0, 0, 0.04)"
-        },
         "&:active": {
           boxShadow: "none"
         }
       },
       clickable: true,
-      deleteIcon: /* @__PURE__ */ jsx(SwitchIcon, { color: colors.textBase, width: 20, height: 20 }),
+      deleteIcon: /* @__PURE__ */ jsx(Icon, { icon: SwapHorizRoundedIcon, color: "inherit" }),
       onDelete: switchPassport,
       onClick: switchPassport
     }

package/lib/UserCenter/components/user-info/timezone-select.js

@@ -5,8 +5,7 @@ import Select from "@mui/material/Select";
 import ListSubheader from "@mui/material/ListSubheader";
 import TextField from "@mui/material/TextField";
 import debounce from "lodash/debounce";
-import { temp as colors } from "@arcblock/ux/lib/Colors";
-import ArrowDownwardIcon from "@arcblock/icons/lib/ArrowDown";
+import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
 import { getTimezones } from "./utils.js";
 const timezones = getTimezones();
 export function TimezoneSelect({ value, onChange, disabled = false, mode = "self" }) {
@@ -37,7 +36,13 @@ export function TimezoneSelect({ value, onChange, disabled = false, mode = "self
       displayEmpty: true,
       variant: "outlined",
       placeholder: "Timezone",
-      IconComponent: (props) => /* @__PURE__ */ jsx(ArrowDownwardIcon, { ...props, width: 20, height: 20 }),
+      IconComponent: (props) => /* @__PURE__ */ jsx(
+        KeyboardArrowDownIcon,
+        {
+          ...props,
+          sx: { fontSize: 18, color: (theme) => `${theme.palette.text.secondary} !important` }
+        }
+      ),
       MenuProps: {
         PaperProps: {
           style: {
@@ -52,11 +57,11 @@ export function TimezoneSelect({ value, onChange, disabled = false, mode = "self
         width: "100%",
         "&:hover": {
           "fieldset.MuiOutlinedInput-notchedOutline": {
-            borderColor: colors.dividerColor
+            borderColor: "divider"
           }
         },
         "fieldset.MuiOutlinedInput-notchedOutline": {
-          borderColor: colors.dividerColor
+          borderColor: "divider"
         }
       },
       children: [
@@ -76,14 +81,14 @@ export function TimezoneSelect({ value, onChange, disabled = false, mode = "self
               marginTop: "8px",
               "& .MuiOutlinedInput-root": {
                 "& fieldset": {
-                  borderColor: colors.dividerColor,
+                  borderColor: "divider",
                   borderWidth: "1px"
                 },
                 "&:hover fieldset": {
-                  borderColor: colors.dividerColor
+                  borderColor: "divider"
                 },
                 "&.Mui-focused fieldset": {
-                  borderColor: colors.dividerColor
+                  borderColor: "divider"
                 }
               }
             }

package/lib/UserCenter/components/user-info/user-basic-info.js

@@ -8,7 +8,6 @@ import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
 import noop from "lodash/noop";
 import { useEffect, useState } from "react";
 import Toast from "@arcblock/ux/lib/Toast";
-import { temp as colors } from "@arcblock/ux/lib/Colors";
 import { parseURL, joinURL } from "ufo";
 import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
 import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";
@@ -213,7 +212,7 @@ export default function UserBasicInfo({
         ] }),
         /* @__PURE__ */ jsx(UserMetadataComponent, { isMobile, isMyself, user, onSave }),
         isMyself ? /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(Divider, { sx: { my: isMobile ? 1 : 3, borderColor: colors.dividerColor } }),
+          /* @__PURE__ */ jsx(Divider, { sx: { my: isMobile ? 1 : 3 } }),
           isMobile && !onlyProfile ? /* @__PURE__ */ jsx(
             Box,
             {
@@ -228,9 +227,9 @@ export default function UserBasicInfo({
                   size: "small",
                   onClick: toggleExpand,
                   sx: {
-                    backgroundColor: colors.backgroundsBgField,
+                    backgroundColor: "grey.50",
                     "&:hover": {
-                      backgroundColor: colors.backgroundsBgField,
+                      backgroundColor: "grey.50",
                       opacity: 0.8
                     }
                   },

package/lib/UserCenter/components/user-info/user-info-item.js

@@ -1,7 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Box, Typography } from "@mui/material";
 import VerifiedIcon from "@mui/icons-material/Verified";
-import { temp as colors } from "@arcblock/ux/lib/Colors";
 export default function UserInfoItem({ data, verified, ...rest }) {
   return /* @__PURE__ */ jsxs(
     Box,
@@ -20,7 +19,7 @@ export default function UserInfoItem({ data, verified, ...rest }) {
             sx: {
               display: "flex",
               alignItems: "center",
-              color: colors.textBase,
+              color: "text.primary",
               fontSize: "14px",
               gap: 1,
               fontWeight: 500
@@ -36,7 +35,7 @@ export default function UserInfoItem({ data, verified, ...rest }) {
             Typography,
             {
               sx: {
-                color: colors.textSubtitle,
+                color: "text.secondary",
                 whiteSpace: "pre-wrap",
                 fontSize: "14px"
               },

package/lib/UserCenter/components/user-info/utils.d.ts

@@ -33,7 +33,7 @@ export declare const defaultButtonStyle: {
         backgroundColor: string;
     };
     py: number;
-    borderRadius: string;
+    borderRadius: number;
 };
 export declare const primaryButtonStyle: {
     color: string;
@@ -44,5 +44,5 @@ export declare const primaryButtonStyle: {
         backgroundColor: string;
     };
     py: number;
-    borderRadius: string;
+    borderRadius: number;
 };

package/lib/UserCenter/components/user-info/utils.js

@@ -1,6 +1,5 @@
 import moment from "moment-timezone";
 import dayjs from "dayjs";
-import { temp as colors } from "@arcblock/ux/lib/Colors";
 import { DurationEnum } from "../../../@types/index.js";
 const HOUR = 3600;
 const MINUTES_30 = 1800;
@@ -97,24 +96,24 @@ export const getTimeRemaining = (date) => {
   return 0;
 };
 export const defaultButtonStyle = {
-  color: colors.foregroundsFgBase,
-  borderColor: colors.strokeBorderBase,
-  backgroundColor: colors.buttonsButtonNeutral,
+  color: "text.primary",
+  borderColor: "grey.100",
+  backgroundColor: "background.default",
   "&:hover": {
-    borderColor: colors.strokeBorderBase,
-    backgroundColor: colors.buttonsButtonNeutralHover
+    borderColor: "grey.100",
+    backgroundColor: "action.hover"
   },
   py: 0.5,
-  borderRadius: "8px"
+  borderRadius: 1
 };
 export const primaryButtonStyle = {
-  color: colors.buttonsButtonNeutral,
-  borderColor: colors.foregroundsFgInteractive,
-  backgroundColor: colors.foregroundsFgInteractive,
+  color: "primary.contrastText",
+  borderColor: "primary.main",
+  backgroundColor: "primary.main",
   "&:hover": {
-    borderColor: colors.foregroundsFgInteractive,
-    backgroundColor: colors.foregroundsFgInteractive
+    borderColor: "primary.main",
+    backgroundColor: "primary.main"
   },
   py: 0.5,
-  borderRadius: "8px"
+  borderRadius: 1
 };

package/lib/UserCenter/components/webhook-item.js

@@ -12,7 +12,6 @@ import {
 import { useCreation, useMemoizedFn, useReactive } from "ahooks";
 import noop from "lodash/noop";
 import isUrl from "is-url";
-import { temp as colors } from "@arcblock/ux/lib/Colors";
 import { Icon } from "@iconify/react";
 import CloseRoundedIcon from "@iconify-icons/material-symbols/close-rounded";
 import CheckIcon from "@iconify-icons/material-symbols/check";
@@ -120,9 +119,9 @@ export default function WebhookItem({
           Select,
           {
             sx: {
-              borderRadius: 2,
+              borderRadius: 1,
               "&.Mui-disabled": {
-                backgroundColor: colors.backgroundsBgField
+                backgroundColor: "grey.50"
               }
             },
             disabled: !currentState.edit || currentState.loading,
@@ -153,9 +152,9 @@ export default function WebhookItem({
                   sx: {
                     flex: 1,
                     ".MuiInputBase-root": {
-                      borderRadius: 2,
+                      borderRadius: 1,
                       "&.Mui-disabled": {
-                        backgroundColor: colors.backgroundsBgField
+                        backgroundColor: "grey.50"
                       }
                     }
                   },
@@ -184,8 +183,9 @@ export default function WebhookItem({
                       currentState.edit = false;
                     }),
                     sx: {
-                      borderRadius: 2,
-                      border: `1px solid ${colors.strokeBorderBase}`
+                      borderRadius: 1,
+                      border: "1px solid",
+                      borderColor: "grey.200"
                     },
                     children: /* @__PURE__ */ jsx(Icon, { icon: CheckIcon })
                   }
@@ -196,8 +196,9 @@ export default function WebhookItem({
                     color: "error",
                     onClick: handleClose,
                     sx: {
-                      borderRadius: 2,
-                      border: `1px solid ${colors.strokeBorderBase}`
+                      borderRadius: 1,
+                      border: "1px solid",
+                      borderColor: "grey.200"
                     },
                     children: /* @__PURE__ */ jsx(Icon, { icon: CloseRoundedIcon })
                   }
@@ -210,8 +211,9 @@ export default function WebhookItem({
                       currentState.edit = true;
                     },
                     sx: {
-                      borderRadius: 2,
-                      border: `1px solid ${colors.strokeBorderBase}`
+                      borderRadius: 1,
+                      border: "1px solid",
+                      borderColor: "grey.200"
                     },
                     children: /* @__PURE__ */ jsx(Icon, { icon: EditSquareOutlineRoundedIcon })
                   }
@@ -227,8 +229,9 @@ export default function WebhookItem({
                       });
                     },
                     sx: {
-                      borderRadius: 2,
-                      border: `1px solid ${colors.strokeBorderBase}`
+                      borderRadius: 1,
+                      border: "1px solid",
+                      borderColor: "grey.200"
                     },
                     children: /* @__PURE__ */ jsx(Icon, { icon: DeleteOutlineRoundedIcon })
                   }

package/lib/UserSessions/components/user-session-info.js

@@ -2,7 +2,6 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { Box, Chip, Tooltip, Typography } from "@mui/material";
 import Avatar from "@arcblock/ux/lib/Avatar";
 import { useCreation } from "ahooks";
-import { temp as colors } from "@arcblock/ux/lib/Colors";
 export default function UserSessionInfo({ user, sessionUser }) {
   const currentRole = useCreation(() => {
     return (user?.passports || [])?.find((item) => item.name === sessionUser.role);
@@ -59,8 +58,8 @@ export default function UserSessionInfo({ user, sessionUser }) {
                       flexShrink: 0,
                       fontWeight: "bold",
                       fontSize: "12px",
-                      color: colors.textBase,
-                      borderColor: colors.strokeBorderStrong,
+                      color: "text.primary",
+                      borderColor: "grey.300",
                       backgroundColor: "transparent",
                       textTransform: "capitalize",
                       pr: 0.5,

package/lib/UserSessions/components/user-sessions.js

@@ -7,7 +7,6 @@ import RelativeTime from "@arcblock/ux/lib/RelativeTime";
 import UAParser from "ua-parser-js";
 import { getVisitorId } from "@arcblock/ux/lib/Util";
 import { useConfirm } from "@arcblock/ux/lib/Dialog";
-import { temp as colors } from "@arcblock/ux/lib/Colors";
 import PQueue from "p-queue";
 import {
   Box,
@@ -312,20 +311,23 @@ export default function UserSessions({
         maxWidth: isMobile ? "unset" : isLg ? "calc(100vw - 300px)" : "100%",
         ...isMobile && {
           ".pc-user-sessions-table > div:nth-child(2)": {
-            border: `1px solid ${colors.dividerColor}`,
-            borderRadius: "8px"
+            border: "1px solid",
+            borderColor: "divider",
+            borderRadius: 1
           }
         },
         ".MuiTableCell-head": {
           whiteSpace: "nowrap",
-          fontWeight: "bold"
+          fontWeight: "bold",
+          backgroundColor: "background.default"
         },
         ".MuiTableRow-root": {
           border: "unset",
+          backgroundColor: "background.default",
           "&:nth-child(even)": {
-            backgroundColor: "#F9FAFB",
+            backgroundColor: "grey.50",
             "&:hover": {
-              backgroundColor: "#F9FAFB !important"
+              backgroundColor: (theme) => `${theme.palette.grey[50]} !important`
             }
           }
         },
@@ -337,6 +339,7 @@ export default function UserSessions({
         ".MuiTableCell-root": {
           paddingRight: "8px",
           paddingLeft: "8px",
+          color: "text.secondary",
           ...isMobile && {
             padding: "8px !important",
             "&:first-child": {

package/lib/common/header-addons.js

@@ -35,7 +35,7 @@ export default function HeaderAddons({ formattedBlocklet, addons, showDomainWarn
     if (enableLocale && locale && languages.length > 1) {
       addonsArray.push(/* @__PURE__ */ jsx(LocaleSelector, { showText: false }, "locale-selector"));
     }
-    if (["1", "true"].includes(window.blocklet?.USE_DARK_THEME)) {
+    if (window.blocklet?.theme?.prefer === "system") {
       addonsArray.push(/* @__PURE__ */ jsx(ThemeModeToggle, {}, "theme-mode-toggle"));
     }
     if (enableConnect && sessionCtx) {

package/lib/hooks/use-blocklet-logo.d.ts

@@ -0,0 +1,8 @@
+import { type Breakpoint } from '@mui/material';
+import { type ThemeOptions } from '@blocklet/theme';
+export default function useBlockletLogo({ key, meta, theme: themeOverrides, square, }?: {
+    key?: number | Breakpoint;
+    meta?: any;
+    theme?: ThemeOptions;
+    square?: boolean;
+}): any;

package/lib/hooks/use-blocklet-logo.js

@@ -0,0 +1,23 @@
+import { useTheme } from "@arcblock/ux/lib/Theme";
+import { useCreation } from "ahooks";
+import useMobile from "./use-mobile.js";
+export default function useBlockletLogo({
+  key = "sm",
+  meta = {},
+  theme: themeOverrides = {},
+  square
+} = {}) {
+  const isMobileDevice = useMobile({ key });
+  const theme = useTheme();
+  const mode = useCreation(() => {
+    return themeOverrides?.palette?.mode || theme.palette.mode;
+  }, [theme, themeOverrides]);
+  const finalAppLogo = useCreation(() => {
+    const { appLogo, appLogoDark, appLogoRect, appLogoRectDark } = Object.assign(window.blocklet ?? {}, meta);
+    const isDark = mode === "dark";
+    const squareLogo = (isDark ? appLogoDark : appLogo) || appLogo;
+    const rectLogo = (isDark ? appLogoRectDark || appLogoDark : appLogoRect) || appLogoRect;
+    return isMobileDevice || square ? squareLogo : rectLogo || squareLogo || "";
+  }, [mode, meta, isMobileDevice, square]);
+  return finalAppLogo;
+}