ruiling/tachybase_todo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
packages/core/client/src/css-variable/CSSVariableProvider.tsx
View File

@ -1,5 +1,6 @@
import { TinyColor } from '@ctrl/tinycolor'; import { TinyColor } from '@ctrl/tinycolor';
import { useEffect, useMemo } from 'react'; import { useEffect, useMemo } from 'react';
import { defaultTheme } from '../global-theme';
import { useToken } from '../style'; import { useToken } from '../style';
const CSSVariableProvider = ({ children }) => { const CSSVariableProvider = ({ children }) => {
@ -38,9 +39,15 @@ const CSSVariableProvider = ({ children }) => {
document.body.style.setProperty('--colorBgScrollBarHover', colorBgScrollBarHover); document.body.style.setProperty('--colorBgScrollBarHover', colorBgScrollBarHover);
document.body.style.setProperty('--colorBgScrollBarActive', colorBgScrollBarActive); document.body.style.setProperty('--colorBgScrollBarActive', colorBgScrollBarActive);
document.body.style.setProperty('--colorBgDrawer', colorBgDrawer); document.body.style.setProperty('--colorBgDrawer', colorBgDrawer);
document.body.style.setProperty('--colorSettings', token.colorSettings); document.body.style.setProperty('--colorSettings', token.colorSettings || defaultTheme.token.colorSettings);
document.body.style.setProperty('--colorBgSettingsHover', token.colorBgSettingsHover); document.body.style.setProperty(
document.body.style.setProperty('--colorBorderSettingsHover', token.colorBorderSettingsHover); '--colorBgSettingsHover',
token.colorBgSettingsHover || defaultTheme.token.colorBgSettingsHover,
);
document.body.style.setProperty(
'--colorBorderSettingsHover',
token.colorBorderSettingsHover || defaultTheme.token.colorBorderSettingsHover,
);
// 设置登录页面的背景色 // 设置登录页面的背景色
document.body.style.setProperty('background-color', token.colorBgContainer); document.body.style.setProperty('background-color', token.colorBgContainer);

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

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

2
packages/plugins/theme-editor/src/client/utils/compatOldTheme.ts
View File

@ -2,7 +2,7 @@ import { ThemeConfig, defaultTheme } from '@nocobase/client';
// 兼容旧主题 // 兼容旧主题
function compatOldTheme(theme: ThemeConfig) { function compatOldTheme(theme: ThemeConfig) {
if (!theme.token.colorSettings) { if (!theme.token?.colorSettings) {
theme.token = { ...theme.token, ...defaultTheme.token }; theme.token = { ...theme.token, ...defaultTheme.token };
} }