@blocklet/ui-react 2.13.12 → 2.13.14

package/src/UserCenter/components/third-party-login/index.tsx

@@ -6,6 +6,7 @@ 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 type { ConnectedAccount, OAuthAccount, User, SessionContext as TSessionContext } from '../../../@types';
 import ThirdPartyItem from './third-party-item';
@@ -18,6 +19,7 @@ export default function ThirdPartyLogin({ user }: { user: User }) {
   const { session } = useContext<TSessionContext>(SessionContext);
   const [oauthConfigs, setOauthConfigs] = useState<Record<string, ConnectedAccountProps>>({});
   const { getOAuthConfigs } = session.useOAuth();
+  const browser = useBrowser();
 
   useAsyncEffect(async () => {
     const data = await getOAuthConfigs({
@@ -174,20 +176,22 @@ export default function ThirdPartyLogin({ user }: { user: User }) {
           {walletAccounts.map((account) => {
             return <ThirdPartyItem key={account.id} item={account as OAuthAccount} />;
           })}
-          <PasskeyActions
-            behavior="only-new"
-            action="connect"
-            createMode="connect"
-            createButtonText="Add New Passkey"
-            onSuccess={noop}
-            onError={noop}
-            dense
-            sx={{
-              px: 1.5,
-              py: 1,
-              gap: 0.75,
-            }}
-          />
+          {browser.wallet || browser.arcSphere ? null : (
+            <PasskeyActions
+              behavior="only-new"
+              action="connect"
+              createMode="connect"
+              createButtonText="Add New Passkey"
+              onSuccess={noop}
+              onError={noop}
+              dense
+              sx={{
+                px: 1.5,
+                py: 1,
+                gap: 0.75,
+              }}
+            />
+          )}
         </>
       )}
     </Box>

package/src/UserCenter/components/third-party-login/third-party-item.tsx

@@ -1,7 +1,6 @@
 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';
@@ -158,9 +157,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,
@@ -232,7 +232,7 @@ export default function ThirdPartyItem({
               <Box
                 component={Icon}
                 icon={InfoOutlineRoundedIcon}
-                color={colors.textSubtitle}
+                color="text.secondary"
                 fontSize={16}
                 sx={{ cursor: 'pointer', flexShrink: 0 }}
               />
@@ -246,18 +246,23 @@ export default function ThirdPartyItem({
           <Button
             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
             startIcon={currentState.loading ? null : <Icon icon={LinkRoundedIcon} />}

package/src/UserCenter/components/user-center.tsx

@@ -9,7 +9,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';
@@ -179,7 +178,7 @@ export default function UserCenter({
     fullScreen: isMobile,
     sx: {
       '.MuiDialog-paper': {
-        borderRadius: 2,
+        borderRadius: 1,
         maxWidth: 1200,
       },
       '.ux-dialog_title': {
@@ -328,10 +327,10 @@ export default function UserCenter({
             gap: 2.5,
           }}>
           {isMyself ? (
-            <Box sx={{ border: `1px solid ${colors.dividerColor}`, borderRadius: 2, p: 2 }}>
+            <Box sx={{ border: '1px solid', borderColor: 'divider', borderRadius: 1.5, p: 2 }}>
               <Typography
                 sx={{
-                  color: colors.foregroundsFgBase,
+                  color: 'text.primary',
                   fontWeight: 600,
                   mb: 2.5,
                 }}>
@@ -385,7 +384,7 @@ export default function UserCenter({
             alignItems: 'center',
             flex: 1,
           }}>
-          <CircularProgress sx={{ color: colors.primary100 }} />
+          <CircularProgress />
         </Box>
       );
     }
@@ -540,7 +539,7 @@ export default function UserCenter({
                       display: 'block',
                       width: '100%',
                       height: '1px',
-                      backgroundColor: `${colors.dividerColor} !important`,
+                      backgroundColor: 'divider',
                     },
                   },
                 }}
@@ -550,7 +549,7 @@ export default function UserCenter({
           ) : null}
           {userCenterTabs.length === 0 && emptyContent}
         </Box>
-        {!isMobile && <Divider orientation="vertical" sx={{ borderColor: colors.dividerColor, ml: 5 }} />}
+        {!isMobile && <Divider orientation="vertical" sx={{ ml: 5 }} />}
         <UserBasicInfo
           isMobile={isMobile}
           order={isMobile ? 1 : 'unset'}

package/src/UserCenter/components/user-info/address.tsx

@@ -5,12 +5,12 @@ 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 type { UserAddress } from '../../../@types';
 import { translations } from '../../libs/locales';
 import EditableField from '../editable-field';
 
+/** only for sx */
 const selectStyle = {
   width: '100%',
   px: 2,
@@ -18,11 +18,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/src/UserCenter/components/user-info/link-preview-input.tsx

@@ -1,9 +1,7 @@
 import { Box, Button, FormControl, IconButton, TextField, Typography } from '@mui/material';
 import styled from '@emotion/styled';
-// eslint-disable-next-line import/no-extraneous-dependencies
-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 { ChangeEvent, useEffect, useMemo, useState } from 'react';
 import { translate } from '@arcblock/ux/lib/Locale/util';
 import { useMemoizedFn } from 'ahooks';
@@ -100,7 +98,7 @@ function DynamicLinkForm({ links = [], onChange }: { links: string[]; onChange:
   return (
     <Box width="100%">
       <Box display="flex" justifyContent="space-between" alignItems="center" gap={1}>
-        <Typography variant="subtitle1" gutterBottom sx={{ mb: 0, fontSize: '12px', color: '#4B5563' }}>
+        <Typography variant="subtitle1" gutterBottom sx={{ mb: 0, fontSize: '12px', color: 'text.primary' }}>
           Social Media
         </Typography>
       </Box>
@@ -112,8 +110,8 @@ function DynamicLinkForm({ links = [], onChange }: { links: string[]; onChange:
             onChange={(value) => handleInputChange(index, value)}
             errorMsg={errors[index] ? t('profile.invalidURL') : ''}
           />
-          <IconButton sx={{ color: colors.foregroundsFgMuted }} onClick={() => handleRemoveLink(index)}>
-            <RemoveIcon />
+          <IconButton onClick={() => handleRemoveLink(index)}>
+            <RemoveIcon sx={{ color: 'text.secondary' }} />
           </IconButton>
         </Box>
       ))}
@@ -126,11 +124,12 @@ function DynamicLinkForm({ links = [], onChange }: { links: string[]; 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/src/UserCenter/components/user-info/metadata.tsx

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

package/src/UserCenter/components/user-info/switch-role.tsx

@@ -1,9 +1,8 @@
 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';
-// eslint-disable-next-line import/no-extraneous-dependencies
-import SwitchIcon from '@arcblock/icons/lib/Switch';
-import { temp as colors } from '@arcblock/ux/lib/Colors';
 import type { User } from '../../../@types';
 
 function SwitchRole({ user, switchPassport }: { user: User; switchPassport: () => void }) {
@@ -11,6 +10,7 @@ function SwitchRole({ user, switchPassport }: { user: User; switchPassport: () =
     () => (user?.passports || [])?.find((item) => item.name === user.role),
     [user?.passports, user?.role]
   );
+
   return (
     <Chip
       label={currentRole?.title || user?.role || 'Guest'}
@@ -20,21 +20,18 @@ function SwitchRole({ user, switchPassport }: { user: 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
-      deleteIcon={<SwitchIcon color={colors.textBase} width={20} height={20} />}
+      deleteIcon={<Icon icon={SwapHorizRoundedIcon} color="inherit" />}
       onDelete={switchPassport}
       onClick={switchPassport}
     />

package/src/UserCenter/components/user-info/timezone-select.tsx

@@ -4,9 +4,7 @@ import Select, { SelectChangeEvent } 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';
-// eslint-disable-next-line import/no-extraneous-dependencies
-import ArrowDownwardIcon from '@arcblock/icons/lib/ArrowDown';
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 import { getTimezones } from './utils';
 
 const timezones = getTimezones();
@@ -51,7 +49,12 @@ export function TimezoneSelect({ value, onChange, disabled = false, mode = 'self
       variant="outlined"
       placeholder="Timezone"
       // eslint-disable-next-line react/no-unstable-nested-components
-      IconComponent={(props) => <ArrowDownwardIcon {...props} width={20} height={20} />}
+      IconComponent={(props) => (
+        <KeyboardArrowDownIcon
+          {...props}
+          sx={{ fontSize: 18, color: (theme) => `${theme.palette.text.secondary} !important` }}
+        />
+      )}
       MenuProps={{
         PaperProps: {
           style: {
@@ -66,11 +69,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',
         },
       }}>
       <ListSubheader>
@@ -88,14 +91,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/src/UserCenter/components/user-info/user-basic-info.tsx

@@ -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 type { AxiosError } from 'axios';
 import { parseURL, joinURL } from 'ufo';
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
@@ -219,7 +218,7 @@ export default function UserBasicInfo({
       <UserMetadataComponent isMobile={isMobile} isMyself={isMyself} user={user} onSave={onSave} />
       {isMyself ? (
         <>
-          <Divider sx={{ my: isMobile ? 1 : 3, borderColor: colors.dividerColor }} />
+          <Divider sx={{ my: isMobile ? 1 : 3 }} />
           {isMobile && !onlyProfile ? (
             <Box
               sx={{
@@ -231,9 +230,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/src/UserCenter/components/user-info/user-info-item.tsx

@@ -1,6 +1,5 @@
 import { Box, BoxProps, Typography } from '@mui/material';
 import VerifiedIcon from '@mui/icons-material/Verified';
-import { temp as colors } from '@arcblock/ux/lib/Colors';
 
 type TUserInfoItemProps = {
   data: {
@@ -25,7 +24,7 @@ export default function UserInfoItem({ data, verified, ...rest }: TUserInfoItemP
         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 }: TUserInfoItemP
       <Box display="flex" flexDirection="row" alignItems="center">
         <Typography
           sx={{
-            color: colors.textSubtitle,
+            color: 'text.secondary',
             whiteSpace: 'pre-wrap',
             fontSize: '14px',
           }}>

package/src/UserCenter/components/user-info/utils.ts

@@ -1,6 +1,5 @@
 import moment from 'moment-timezone';
 import dayjs from 'dayjs';
-import { temp as colors } from '@arcblock/ux/lib/Colors';
 import { DurationEnum, UserMetadata } from '../../../@types';
 
 const HOUR = 3600;
@@ -133,26 +132,27 @@ export const getTimeRemaining = (date: Date) => {
   return 0; // 如果时间已过期，返回0
 };
 
+// 只支持在 sx 中使用
 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/src/UserCenter/components/webhook-item.tsx

@@ -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';
@@ -137,9 +136,9 @@ export default function WebhookItem({
       }}>
       <Select
         sx={{
-          borderRadius: 2,
+          borderRadius: 1,
           '&.Mui-disabled': {
-            backgroundColor: colors.backgroundsBgField,
+            backgroundColor: 'grey.50',
           },
         }}
         disabled={!currentState.edit || currentState.loading}
@@ -162,9 +161,9 @@ export default function WebhookItem({
           sx={{
             flex: 1,
             '.MuiInputBase-root': {
-              borderRadius: 2,
+              borderRadius: 1,
               '&.Mui-disabled': {
-                backgroundColor: colors.backgroundsBgField,
+                backgroundColor: 'grey.50',
               },
             },
           }}
@@ -193,8 +192,9 @@ export default function WebhookItem({
                   currentState.edit = false;
                 })}
                 sx={{
-                  borderRadius: 2,
-                  border: `1px solid ${colors.strokeBorderBase}`,
+                  borderRadius: 1,
+                  border: '1px solid',
+                  borderColor: 'grey.200',
                 }}>
                 <Icon icon={CheckIcon} />
               </IconButton>
@@ -202,8 +202,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',
                 }}>
                 <Icon icon={CloseRoundedIcon} />
               </IconButton>
@@ -215,8 +216,9 @@ export default function WebhookItem({
                   currentState.edit = true;
                 }}
                 sx={{
-                  borderRadius: 2,
-                  border: `1px solid ${colors.strokeBorderBase}`,
+                  borderRadius: 1,
+                  border: '1px solid',
+                  borderColor: 'grey.200',
                 }}>
                 <Icon icon={EditSquareOutlineRoundedIcon} />
               </IconButton>
@@ -229,8 +231,9 @@ export default function WebhookItem({
                   });
                 }}
                 sx={{
-                  borderRadius: 2,
-                  border: `1px solid ${colors.strokeBorderBase}`,
+                  borderRadius: 1,
+                  border: '1px solid',
+                  borderColor: 'grey.200',
                 }}>
                 <Icon icon={DeleteOutlineRoundedIcon} />
               </IconButton>

package/src/UserSessions/components/user-session-info.tsx

@@ -1,7 +1,6 @@
 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';
 
 import { User } from '../../@types';
 
@@ -51,8 +50,8 @@ export default function UserSessionInfo({ user, sessionUser }: { readonly user:
               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/src/UserSessions/components/user-sessions.tsx

@@ -8,7 +8,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,
@@ -376,6 +375,7 @@ export default function UserSessions({
       },
     },
   ].filter(Boolean);
+
   return (
     <Box
       className="pc-user-sessions"
@@ -383,20 +383,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',
+          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`,
             },
           },
         },
@@ -408,6 +411,7 @@ export default function UserSessions({
         '.MuiTableCell-root': {
           paddingRight: '8px',
           paddingLeft: '8px',
+          color: 'text.secondary',
           ...(isMobile && {
             padding: '8px !important',
             '&:first-child': {

package/src/common/header-addons.jsx

@@ -47,8 +47,8 @@ export default function HeaderAddons({ formattedBlocklet, addons, showDomainWarn
       addonsArray.push(<LocaleSelector key="locale-selector" showText={false} />);
     }
 
-    // 启用了黑夜主题
-    if (['1', 'true'].includes(window.blocklet?.USE_DARK_THEME)) {
+    // 允许切换明暗主题
+    if (window.blocklet?.theme?.prefer === 'system') {
       addonsArray.push(<ThemeModeToggle key="theme-mode-toggle" />);
     }