fix(theme-editor): fix color of menu when it is selected

packages/core/client/src/css-variable/CSSVariableProvider.tsx

@@ -40,14 +40,8 @@ const CSSVariableProvider = ({ children }) => {
     document.body.style.setProperty('--colorBgScrollBarActive', colorBgScrollBarActive);
     document.body.style.setProperty('--colorBgDrawer', colorBgDrawer);
     document.body.style.setProperty('--colorSettings', token.colorSettings || defaultTheme.token.colorSettings);
-    document.body.style.setProperty(
+    document.body.style.setProperty('--colorBgSettingsHover', token.colorBgSettingsHover);
-      '--colorBgSettingsHover',
+    document.body.style.setProperty('--colorBorderSettingsHover', token.colorBorderSettingsHover);
-      token.colorBgSettingsHover || defaultTheme.token.colorBgSettingsHover,
-    );
-    document.body.style.setProperty(
-      '--colorBorderSettingsHover',
-      token.colorBorderSettingsHover || defaultTheme.token.colorBorderSettingsHover,
-    );
 
     // 设置登录页面的背景色
     document.body.style.setProperty('background-color', token.colorBgContainer);

packages/core/client/src/global-theme/compatOldTheme.ts

@@ -1,4 +1,5 @@
-import { ThemeConfig, defaultTheme } from '@nocobase/client';
+import defaultTheme from './defaultTheme';
+import { ThemeConfig } from './type';
 
 // 兼容旧主题
 function compatOldTheme(theme: ThemeConfig) {

packages/core/client/src/global-theme/index.tsx

@@ -1,6 +1,7 @@
 import { ConfigProvider, theme as antdTheme } from 'antd';
 import _ from 'lodash';
 import React, { createContext, useCallback, useMemo, useRef } from 'react';
+import compatOldTheme from './compatOldTheme';
 import defaultTheme from './defaultTheme';
 import { ThemeConfig } from './type';
 
@@ -77,12 +78,13 @@ export const GlobalThemeProvider = ({ children, theme: themeFromProps }) => {
 
   return (
     <GlobalThemeContext.Provider value={value}>
-      <ConfigProvider theme={theme}>{children}</ConfigProvider>
+      <ConfigProvider theme={compatOldTheme(theme)}>{children}</ConfigProvider>
     </GlobalThemeContext.Provider>
   );
 };
 
 export { default as AntdAppProvider } from './AntdAppProvider';
+export { default as compatOldTheme } from './compatOldTheme';
 export * from './type';
 export { defaultTheme };
 

packages/plugins/theme-editor/src/client/components/ThemeCard.tsx

@@ -1,5 +1,12 @@
 import { DeleteOutlined, EditOutlined, EllipsisOutlined } from '@ant-design/icons';
-import { useAPIClient, useCurrentUserContext, useGlobalTheme, useSystemSettings, useToken } from '@nocobase/client';
+import {
+  compatOldTheme,
+  useAPIClient,
+  useCurrentUserContext,
+  useGlobalTheme,
+  useSystemSettings,
+  useToken,
+} from '@nocobase/client';
 import { error } from '@nocobase/utils/client';
 import { App, Card, ConfigProvider, Dropdown, Space, Switch, Tag, message } from 'antd';
 import React, { useCallback, useMemo } from 'react';
@@ -7,7 +14,6 @@ import { ThemeConfig, ThemeItem } from '../../types';
 import { Primary } from '../antd-token-previewer';
 import { useUpdateThemeSettings } from '../hooks/useUpdateThemeSettings';
 import { useTranslation } from '../locale';
-import compatOldTheme from '../utils/compatOldTheme';
 import { useCurrentThemeId } from './InitializeTheme';
 import { useThemeEditorContext } from './ThemeEditorProvider';
 

packages/plugins/theme-editor/src/client/components/ToEditTheme.tsx

@@ -1,9 +1,8 @@
 import { PlusOutlined } from '@ant-design/icons';
-import { defaultTheme, useGlobalTheme, useToken } from '@nocobase/client';
+import { compatOldTheme, defaultTheme, useGlobalTheme, useToken } from '@nocobase/client';
 import { App, Button, Space } from 'antd';
 import React, { useCallback } from 'react';
 import { useTranslation } from '../locale';
-import compatOldTheme from '../utils/compatOldTheme';
 import { useThemeEditorContext } from './ThemeEditorProvider';
 
 const ToEditTheme = () => {