fix(theme-editor): fix color of UI settings and Header

This commit is contained in:
Rain 2023-07-21 11:52:46 +08:00
parent 08b2f374c8
commit 8196e164a5
3 changed files with 12 additions and 4 deletions

View File

@ -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);

View File

@ -24,6 +24,7 @@ const ToEditTheme = () => {
<Button
onClick={() => {
setCurrentSettingTheme(theme);
setTheme(compatOldTheme(theme));
setOpen(true);
m.destroy();
}}

View File

@ -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 };
}