From 8196e164a518897e45aa5b4cb4544e6be3219d7d Mon Sep 17 00:00:00 2001
From: Rain <958414905@qq.com>
Date: Fri, 21 Jul 2023 11:52:46 +0800
Subject: [PATCH] fix(theme-editor): fix color of UI settings and Header

---
 .../client/src/css-variable/CSSVariableProvider.tsx | 13 ++++++++++---
 .../src/client/components/ToEditTheme.tsx           |  1 +
 .../theme-editor/src/client/utils/compatOldTheme.ts |  2 +-
 3 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/packages/core/client/src/css-variable/CSSVariableProvider.tsx b/packages/core/client/src/css-variable/CSSVariableProvider.tsx
index e4c49a035..788e62ca4 100644
--- a/packages/core/client/src/css-variable/CSSVariableProvider.tsx
+++ b/packages/core/client/src/css-variable/CSSVariableProvider.tsx
@@ -1,5 +1,6 @@
 import { TinyColor } from '@ctrl/tinycolor';
 import { useEffect, useMemo } from 'react';
+import { defaultTheme } from '../global-theme';
 import { useToken } from '../style';
 
 const CSSVariableProvider = ({ children }) => {
@@ -38,9 +39,15 @@ const CSSVariableProvider = ({ children }) => {
     document.body.style.setProperty('--colorBgScrollBarHover', colorBgScrollBarHover);
     document.body.style.setProperty('--colorBgScrollBarActive', colorBgScrollBarActive);
     document.body.style.setProperty('--colorBgDrawer', colorBgDrawer);
-    document.body.style.setProperty('--colorSettings', token.colorSettings);
-    document.body.style.setProperty('--colorBgSettingsHover', token.colorBgSettingsHover);
-    document.body.style.setProperty('--colorBorderSettingsHover', token.colorBorderSettingsHover);
+    document.body.style.setProperty('--colorSettings', token.colorSettings || defaultTheme.token.colorSettings);
+    document.body.style.setProperty(
+      '--colorBgSettingsHover',
+      token.colorBgSettingsHover || defaultTheme.token.colorBgSettingsHover,
+    );
+    document.body.style.setProperty(
+      '--colorBorderSettingsHover',
+      token.colorBorderSettingsHover || defaultTheme.token.colorBorderSettingsHover,
+    );
 
     // 设置登录页面的背景色
     document.body.style.setProperty('background-color', token.colorBgContainer);
diff --git a/packages/plugins/theme-editor/src/client/components/ToEditTheme.tsx b/packages/plugins/theme-editor/src/client/components/ToEditTheme.tsx
index c175b0875..df632e176 100644
--- a/packages/plugins/theme-editor/src/client/components/ToEditTheme.tsx
+++ b/packages/plugins/theme-editor/src/client/components/ToEditTheme.tsx
@@ -24,6 +24,7 @@ const ToEditTheme = () => {
           <Button
             onClick={() => {
               setCurrentSettingTheme(theme);
+              setTheme(compatOldTheme(theme));
               setOpen(true);
               m.destroy();
             }}
diff --git a/packages/plugins/theme-editor/src/client/utils/compatOldTheme.ts b/packages/plugins/theme-editor/src/client/utils/compatOldTheme.ts
index 6843a147f..2033f51be 100644
--- a/packages/plugins/theme-editor/src/client/utils/compatOldTheme.ts
+++ b/packages/plugins/theme-editor/src/client/utils/compatOldTheme.ts
@@ -2,7 +2,7 @@ import { ThemeConfig, defaultTheme } from '@nocobase/client';
 
 // 兼容旧主题
 function compatOldTheme(theme: ThemeConfig) {
-  if (!theme.token.colorSettings) {
+  if (!theme.token?.colorSettings) {
     theme.token = { ...theme.token, ...defaultTheme.token };
   }