Skip to content

Commit 4f73c30

Browse files
shanhexishanhexi
committed
feat: 添加新的主题色
1 parent cffcc65 commit 4f73c30

11 files changed

Lines changed: 108 additions & 26 deletions

File tree

‎chat2db-client/src/blocks/Setting/BaseSetting/index.tsx‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,11 @@ const themeList = [
2525
name: i18n('setting.text.dark'),
2626
img: themeDarkImg,
2727
},
28+
{
29+
code: ThemeType.DarkDimmed,
30+
name: i18n('setting.text.dark2'),
31+
img: themeDarkImg
32+
},
2833
{
2934
code: ThemeType.FollowOs,
3035
name: i18n('setting.text.followOS'),
@@ -83,9 +88,9 @@ const colorList = [
8388
// baseBody 基础设置
8489
export default function BaseSetting() {
8590
const [lang, setLang] = useState(currentLang);
86-
const [currentTheme, setCurrentTheme] = useState<ThemeType>(localStorage.getItem('theme'));
87-
const [currentPrimaryColor, setCurrentPrimaryColor] = useState(localStorage.getItem('primary-color'));
8891
const [appTheme, setAppTheme] = useTheme();
92+
const [currentTheme, setCurrentTheme] = useState<ThemeType>(appTheme.backgroundColor);
93+
const [currentPrimaryColor, setCurrentPrimaryColor] = useState(localStorage.getItem('primary-color'));
8994

9095
const changePrimaryColor = (item: any) => {
9196
const html = document.documentElement;
@@ -103,12 +108,13 @@ export default function BaseSetting() {
103108
location.reload();
104109
}
105110

106-
function handleChangeTheme(theme: ThemeType) {
111+
// TODO: 这里写 ThemeType 为什么报错呢
112+
function handleChangeTheme(backgroundColor: any) {
107113
setAppTheme({
108114
...appTheme,
109-
backgroundColor: theme,
115+
backgroundColor,
110116
});
111-
setCurrentTheme(theme);
117+
setCurrentTheme(backgroundColor);
112118
}
113119

114120
return (

‎chat2db-client/src/components/Console/MonacoEditor/index.tsx‎

Lines changed: 16 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -67,12 +67,12 @@ function MonacoEditor(props: IProps, ref: ForwardedRef<IExportRefFunction>) {
6767
...options,
6868
value: defaultValue || '',
6969
language: language,
70-
theme: appTheme.backgroundColor === ThemeType.Light ? EditorThemeType.Default : EditorThemeType.BlackTheme,
70+
theme: appTheme.backgroundColor,
7171
});
7272
editorRef.current = editorIns;
7373
didMount && didMount(editorIns);
7474

75-
monaco.editor.defineTheme(EditorThemeType.Default, {
75+
monaco.editor.defineTheme(ThemeType.Light, {
7676
base: 'vs',
7777
inherit: true,
7878
rules: [{ background: '#15161a' }] as any,
@@ -82,7 +82,7 @@ function MonacoEditor(props: IProps, ref: ForwardedRef<IExportRefFunction>) {
8282
},
8383
});
8484

85-
monaco.editor.defineTheme(EditorThemeType.BlackTheme, {
85+
monaco.editor.defineTheme(ThemeType.Dark, {
8686
base: 'vs-dark',
8787
inherit: true,
8888
rules: [{ background: '#15161a' }] as any,
@@ -92,6 +92,16 @@ function MonacoEditor(props: IProps, ref: ForwardedRef<IExportRefFunction>) {
9292
'editor.background': '#0A0B0C', //背景色
9393
},
9494
});
95+
monaco.editor.defineTheme(ThemeType.DarkDimmed, {
96+
base: 'vs-dark',
97+
inherit: true,
98+
rules: [{ background: '#15161a' }] as any,
99+
colors: {
100+
// 相关颜色属性配置
101+
'editor.foreground': '#ffffff',
102+
'editor.background': '#1c2128', //背景色
103+
},
104+
});
95105

96106
monaco.editor.defineTheme(EditorThemeType.DashboardLightTheme, {
97107
base: 'vs',
@@ -136,12 +146,11 @@ function MonacoEditor(props: IProps, ref: ForwardedRef<IExportRefFunction>) {
136146

137147
// 监听主题色变化切换编辑器主题色
138148
useEffect(() => {
139-
const isDark = appTheme.backgroundColor === ThemeType.Dark;
140149
if (options?.theme) {
141150
monaco.editor.setTheme(options.theme);
142-
} else {
143-
monaco.editor.setTheme(isDark ? 'BlackTheme' : 'Default');
144-
}
151+
return
152+
}
153+
monaco.editor.setTheme(appTheme.backgroundColor);
145154
}, [appTheme.backgroundColor, options?.theme]);
146155

147156
// useEffect(() => {

‎chat2db-client/src/constants/theme.ts‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,15 @@
11
export enum ThemeType {
22
Light = 'light',
33
Dark = 'dark',
4+
DarkDimmed = 'darkDimmed',
45
FollowOs = 'followOs',
56
}
67

8+
export enum EditorThemeType {
9+
DashboardLightTheme = 'DashboardLightTheme',
10+
DashboardBlackTheme = 'DashboardBlackTheme',
11+
}
12+
713
export enum PrimaryColorType {
814
Polar_Green = 'polar-green',
915
Golden_Purple = 'golden-purple',
@@ -19,10 +25,3 @@ export enum LangType {
1925
EN_US = 'en-us',
2026
ZH_CN = 'zh-cn',
2127
}
22-
23-
export enum EditorThemeType {
24-
Default = 'Default',
25-
BlackTheme = 'BlackTheme',
26-
DashboardLightTheme = 'DashboardLightTheme',
27-
DashboardBlackTheme = 'DashboardBlackTheme',
28-
}

‎chat2db-client/src/i18n/en-us/setting.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ export default {
1010
'setting.label.green': 'Green',
1111
'setting.label.violet': 'Violet',
1212
'setting.text.dark': 'Dark',
13+
'setting.text.dark2': 'Dark-2',
1314
'setting.text.light': 'Light',
1415
'setting.text.followOS': 'FollowOS',
1516
'setting.title.language': 'Language',

‎chat2db-client/src/i18n/zh-cn/setting.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ export default {
1010
'setting.label.green': '极光绿',
1111
'setting.label.violet': '酱紫',
1212
'setting.text.dark': '暗色',
13+
'setting.text.dark2': '暗色2',
1314
'setting.text.light': '亮色',
1415
'setting.text.followOS': '自动',
1516
'setting.title.language': '语言',

chat2db-client/src/theme/dark.ts renamed to chat2db-client/src/theme/background/dark.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { theme } from 'antd';
22
import { PrimaryColorType } from '@/constants';
3-
import { commonToken } from './common';
3+
import { commonToken } from '../common';
44

55
type IAntdPrimaryColor = {
66
[key in PrimaryColorType]: any;
@@ -40,7 +40,7 @@ const antDarkTheme = {
4040
antdPrimaryColor,
4141
token: {
4242
...commonToken,
43-
colorText: "rgb(241, 241, 244)",
43+
colorTextBase: 'rgb(241, 241, 244)',
4444
colorBgBase: '#0a0b0c',
4545
colorHoverBg: 'hsla(0, 0%, 100%, 0.03)',
4646
colorBgContainer: '#0a0b0c',

‎chat2db-client/src/theme/background/darkDimmed.ts‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import { theme } from 'antd';
2+
import { PrimaryColorType } from '@/constants';
3+
import { commonToken } from '../common';
4+
5+
type IAntdPrimaryColor = {
6+
[key in PrimaryColorType]: any;
7+
};
8+
9+
// 主题色
10+
const antdPrimaryColor: IAntdPrimaryColor = {
11+
[PrimaryColorType.Polar_Green]: {
12+
colorPrimary: '#3c8618',
13+
},
14+
[PrimaryColorType.Golden_Purple]: {
15+
colorPrimary: '#7688c9',
16+
},
17+
[PrimaryColorType.Polar_Blue]: {
18+
colorPrimary: '#1677ff',
19+
},
20+
[PrimaryColorType.Silver]: {
21+
colorPrimary: '#c3b7a4',
22+
},
23+
[PrimaryColorType.Red]: {
24+
colorPrimary: '#fd6874',
25+
},
26+
[PrimaryColorType.Orange]: {
27+
colorPrimary: '#ffa940',
28+
},
29+
[PrimaryColorType.Blue2]: {
30+
colorPrimary: '#009cc7',
31+
},
32+
[PrimaryColorType.Gold]: {
33+
colorPrimary: '#b59a6d',
34+
},
35+
};
36+
37+
const antdLightTheme = {
38+
algorithm: [theme.defaultAlgorithm, theme.compactAlgorithm],
39+
customName: 'dark-dimmed',
40+
antdPrimaryColor,
41+
token: {
42+
...commonToken,
43+
colorTextBase: 'rgb(241, 241, 244)',
44+
colorBgBase: 'rgb(28, 33, 40)',
45+
colorHoverBg: 'hsla(0, 0%, 100%, 0.03)',
46+
colorBgContainer: 'rgb(28, 33, 40)',
47+
colorBgElevated: 'rgb(34, 39, 46)',
48+
colorBorder: 'rgb(68, 76, 86)',
49+
colorBorderSecondary: 'rgba(55, 62, 71, 0.4)',
50+
// ...commonToken,
51+
// colorText: "rgb(241, 241, 244)",
52+
// colorBgBase: '#191a23',
53+
// colorHoverBg: 'hsla(0, 0%, 100%, 0.03)',
54+
// colorBgContainer: '#191a23',
55+
// colorBgElevated: '#202123',
56+
// colorBorder: 'rgba(231, 235, 254, 0.075)',
57+
// colorBorderSecondary: 'rgba(231, 235, 254, 0.075)',
58+
},
59+
};
60+
61+
export default antdLightTheme;

chat2db-client/src/theme/light.ts renamed to chat2db-client/src/theme/background/light.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { theme } from 'antd';
22
import { PrimaryColorType } from '@/constants';
3-
import { commonToken } from './common';
3+
import { commonToken } from '../common';
44

55
type IAntdPrimaryColor = {
66
[key in PrimaryColorType]: any;
@@ -44,7 +44,7 @@ const antdLightTheme = {
4444
colorBgBase: '#fff',
4545
colorHoverBg: '#eee',
4646
colorBgContainer: '#fff',
47-
colorBgElevated: '#F8F9FA',
47+
colorBgElevated: '#f6f8fa',
4848
colorBorder: '#d3d3d4',
4949
},
5050
};

‎chat2db-client/src/theme/custom/dark.less‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
:root {
1+
:root [theme='dark'] {
22
--custom-color-icon: #5C5D5E;
33
}

‎chat2db-client/src/theme/custom/darkDimmed.less‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
:root [theme='darkDimmed'] {
2+
--custom-color-icon: #5C5D5E;
3+
}

0 commit comments

Comments
 (0)