Skip to content

Commit 480f267

Browse files
tbphptbphp
authored
feat: Supports dark mode (#249)
* feat: Supports dark mode * feat: login dark
1 parent 376c458 commit 480f267

22 files changed

+930
-370
lines changed

‎web/.npmrc‎

Lines changed: 0 additions & 30 deletions
This file was deleted.

‎web/src/assets/style.css‎

Lines changed: 46 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
/* 导入CSS变量定义 */
2+
@import "./variables.css";
3+
14
:root {
25
overflow-y: scroll;
36
scrollbar-gutter: stable;
@@ -17,60 +20,6 @@
1720
text-rendering: optimizeLegibility;
1821
-webkit-font-smoothing: antialiased;
1922
-moz-osx-font-smoothing: grayscale;
20-
21-
/* 主题颜色变量 - 白天模式 */
22-
--bg-color: #f5f7fa;
23-
--bg-color-gradient: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
24-
--card-bg-color: rgba(255, 255, 255, 0.95);
25-
--card-border-color: rgba(255, 255, 255, 0.2);
26-
--text-color-primary: #1e293b;
27-
--text-color-secondary: #475569;
28-
--text-color-tertiary: #94a3b8;
29-
--border-color: #e2e8f0;
30-
--scrollbar-track-bg: rgba(0, 0, 0, 0.05);
31-
--selection-bg-color: rgba(102, 126, 234, 0.2);
32-
--focus-outline-color: rgba(102, 126, 234, 0.5);
33-
--loading-overlay-bg: rgba(255, 255, 255, 0.8);
34-
--glass-effect-bg: rgba(255, 255, 255, 0.25);
35-
--glass-effect-border: rgba(255, 255, 255, 0.18);
36-
37-
/* 现代化颜色方案 */
38-
--primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
39-
--secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
40-
--success-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
41-
--warning-gradient: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
42-
--surface-gradient: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
43-
--dark-gradient: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
44-
45-
/* 阴影效果 */
46-
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
47-
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
48-
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
49-
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
50-
51-
/* 边框半径 */
52-
--border-radius-sm: 8px;
53-
--border-radius-md: 12px;
54-
--border-radius-lg: 16px;
55-
--border-radius-xl: 24px;
56-
}
57-
58-
html.dark {
59-
/* 主题颜色变量 - 暗夜模式 */
60-
--bg-color: #1a202c;
61-
--bg-color-gradient: linear-gradient(135deg, #2d3748 0%, #1a202c 100%);
62-
--card-bg-color: rgba(45, 55, 72, 0.85);
63-
--card-border-color: rgba(255, 255, 255, 0.1);
64-
--text-color-primary: #e2e8f0;
65-
--text-color-secondary: #a0aec0;
66-
--text-color-tertiary: #718096;
67-
--border-color: #4a5568;
68-
--scrollbar-track-bg: rgba(255, 255, 255, 0.1);
69-
--selection-bg-color: rgba(102, 126, 234, 0.3);
70-
--focus-outline-color: rgba(102, 126, 234, 0.6);
71-
--loading-overlay-bg: rgba(26, 32, 44, 0.8);
72-
--glass-effect-bg: rgba(45, 55, 72, 0.25);
73-
--glass-effect-border: rgba(255, 255, 255, 0.1);
7423
}
7524

7625
* {
@@ -79,12 +28,15 @@ html.dark {
7928
box-sizing: border-box;
8029
}
8130

82-
html,
31+
html {
32+
background: var(--header-bg);
33+
}
34+
8335
body {
8436
height: 100%;
85-
color: var(--text-color-primary);
86-
background: var(--bg-color-gradient);
37+
background: var(--bg-gradient);
8738
background-attachment: fixed;
39+
color: var(--text-primary);
8840
}
8941

9042
#app {
@@ -176,33 +128,53 @@ body {
176128
transform: translateX(100%);
177129
}
178130

179-
/* 美化滚动条 */
180-
::-webkit-scrollbar {
131+
/* 美化滚动条 - 浅色模式 */
132+
:root:not(.dark) ::-webkit-scrollbar {
181133
width: 6px;
182134
height: 6px;
183135
}
184136

185-
::-webkit-scrollbar-track {
186-
background: var(--scrollbar-track-bg);
137+
:root:not(.dark) ::-webkit-scrollbar-track {
138+
background: rgba(0, 0, 0, 0.05);
187139
border-radius: 1px;
188140
}
189141

190-
::-webkit-scrollbar-thumb {
142+
:root:not(.dark) ::-webkit-scrollbar-thumb {
191143
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
192144
border-radius: 1px;
193145
}
194146

195-
::-webkit-scrollbar-thumb:hover {
147+
:root:not(.dark) ::-webkit-scrollbar-thumb:hover {
196148
background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
197149
}
198150

151+
/* 美化滚动条 - 深色模式 */
152+
:root.dark ::-webkit-scrollbar {
153+
width: 6px;
154+
height: 6px;
155+
}
156+
157+
:root.dark ::-webkit-scrollbar-track {
158+
background: rgba(0, 0, 0);
159+
border-radius: 1px;
160+
}
161+
162+
:root.dark ::-webkit-scrollbar-thumb {
163+
background: linear-gradient(135deg, #7c8aac 0%, #646e8a 100%);
164+
border-radius: 1px;
165+
}
166+
167+
:root.dark ::-webkit-scrollbar-thumb:hover {
168+
background: linear-gradient(135deg, #8b9df5 0%, #a97dd4 100%);
169+
}
170+
199171
/* 通用卡片样式 */
200172
.modern-card {
201-
background: var(--card-bg-color);
173+
background: rgba(255, 255, 255, 0.95);
202174
backdrop-filter: blur(10px);
203175
border-radius: var(--border-radius-lg);
204176
box-shadow: var(--shadow-lg);
205-
border: 1px solid var(--card-border-color);
177+
border: 1px solid rgba(255, 255, 255, 0.2);
206178
transition: all 0.2s ease;
207179
}
208180

@@ -231,18 +203,18 @@ body {
231203
}
232204

233205
.modern-input:focus {
234-
box-shadow: 0 0 0 3px var(--selection-bg-color);
206+
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
235207
}
236208

237209
/* 选择文本样式 */
238210
::selection {
239-
background: var(--selection-bg-color);
240-
color: var(--text-color-primary);
211+
background: rgba(102, 126, 234, 0.2);
212+
color: #1e293b;
241213
}
242214

243215
::-moz-selection {
244-
background: var(--selection-bg-color);
245-
color: var(--text-color-primary);
216+
background: rgba(102, 126, 234, 0.2);
217+
color: #1e293b;
246218
}
247219

248220
/* Focus样式增强 */
@@ -251,7 +223,7 @@ body {
251223
}
252224

253225
*:focus-visible {
254-
outline: 2px solid var(--focus-outline-color);
226+
outline: 2px solid rgba(102, 126, 234, 0.5);
255227
outline-offset: 2px;
256228
}
257229

@@ -262,7 +234,7 @@ body {
262234
left: 0;
263235
right: 0;
264236
bottom: 0;
265-
background: var(--loading-overlay-bg);
237+
background: rgba(255, 255, 255, 0.8);
266238
backdrop-filter: blur(4px);
267239
display: flex;
268240
align-items: center;
@@ -294,9 +266,9 @@ body {
294266

295267
/* 玻璃态效果 */
296268
.glass-effect {
297-
background: var(--glass-effect-bg);
269+
background: rgba(255, 255, 255, 0.25);
298270
backdrop-filter: blur(16px);
299-
border: 1px solid var(--glass-effect-border);
271+
border: 1px solid rgba(255, 255, 255, 0.18);
300272
}
301273

302274
/* 悬停效果增强 */

‎web/src/assets/variables.css‎

Lines changed: 140 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,140 @@
1+
/* 全局 CSS 变量定义 */
2+
3+
/* 浅色主题变量 */
4+
:root,
5+
:root.light {
6+
/* 背景色 */
7+
--bg-primary: #ffffff;
8+
--bg-secondary: #f5f7fa;
9+
--bg-tertiary: #e5e7eb;
10+
--bg-gradient: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
11+
12+
/* 文字颜色 */
13+
--text-primary: #1e293b;
14+
--text-secondary: #475569;
15+
--text-tertiary: #94a3b8;
16+
--text-inverse: #ffffff;
17+
18+
/* 边框颜色 */
19+
--border-color: #e2e8f0;
20+
--border-color-light: rgba(0, 0, 0, 0.08);
21+
22+
/* 卡片背景 */
23+
--card-bg: rgba(255, 255, 255, 0.95);
24+
--card-bg-solid: #ffffff;
25+
26+
/* 组件颜色 */
27+
--header-bg: rgba(255, 255, 255, 0.95);
28+
--footer-bg: rgba(255, 255, 255, 0.95);
29+
30+
/* 状态颜色 */
31+
--success-bg: rgba(24, 160, 88, 0.1);
32+
--success-border: rgba(24, 160, 88, 0.3);
33+
--error-bg: rgba(255, 193, 7, 0.1);
34+
--error-border: rgba(255, 193, 7, 0.5);
35+
--invalid-bg: rgb(250, 250, 252);
36+
--invalid-border: #ddd;
37+
38+
/* 图表颜色 */
39+
--chart-bg: white;
40+
--chart-grid: #f0f0f0;
41+
--chart-axis: #e0e0e0;
42+
--chart-text: #666;
43+
--chart-legend-bg: rgba(255, 255, 255, 0.6);
44+
--chart-legend-text: #334155;
45+
--chart-legend-secondary: #475569;
46+
47+
/* 阴影 */
48+
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
49+
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
50+
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
51+
52+
/* 其他 */
53+
--overlay-bg: rgba(255, 255, 255, 0.8);
54+
--code-bg: #f8f9fa;
55+
--scrollbar-bg: rgba(0, 0, 0, 0.05);
56+
--hover-bg: rgba(102, 126, 234, 0.08);
57+
--modal-color: rgba(255, 255, 255, 0.95);
58+
--success-color: #18a058;
59+
--error-color: #d03050;
60+
}
61+
62+
/* 深色主题变量 */
63+
:root.dark {
64+
/* 背景色 - 外层浅色，内容深色 */
65+
--bg-primary: #2b3038;
66+
--bg-secondary: #323841;
67+
--bg-tertiary: #3a414d;
68+
--bg-gradient: linear-gradient(135deg, #323841 0%, #2b3038 100%);
69+
70+
/* 文字颜色 - 浅色高对比 */
71+
--text-primary: #e8e8e8;
72+
--text-secondary: #b4b4b4;
73+
--text-tertiary: #888888;
74+
--text-inverse: #1a1d23;
75+
76+
/* 边框颜色 */
77+
--border-color: #1a1d23;
78+
--border-color-light: rgba(255, 255, 255, 0.06);
79+
80+
/* 卡片背景 - 深黑色内容 */
81+
--card-bg: rgba(15, 17, 21, 0.95);
82+
--card-bg-solid: #0f1115;
83+
84+
/* 组件颜色 - 深黑色 */
85+
--header-bg: rgba(15, 17, 21, 0.95);
86+
--footer-bg: rgba(15, 17, 21, 0.95);
87+
88+
/* 状态颜色 */
89+
--success-bg: rgba(24, 160, 88, 0.12);
90+
--success-border: rgba(24, 160, 88, 0.35);
91+
--error-bg: rgba(255, 193, 7, 0.12);
92+
--error-border: rgba(255, 193, 7, 0.35);
93+
--invalid-bg: rgba(15, 17, 21, 0.6);
94+
--invalid-border: #2a2f38;
95+
96+
/* 图表颜色 - 深黑色背景 */
97+
--chart-bg: rgba(12, 14, 18, 0.98);
98+
--chart-grid: #2a2f38;
99+
--chart-axis: #2a2f38;
100+
--chart-text: #b4b4b4;
101+
--chart-legend-bg: rgba(15, 17, 21, 0.95);
102+
--chart-legend-text: #e8e8e8;
103+
--chart-legend-secondary: #b4b4b4;
104+
105+
/* 阴影 */
106+
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
107+
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
108+
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
109+
110+
/* 其他 */
111+
--overlay-bg: rgba(15, 17, 21, 0.8);
112+
--code-bg: #0f1115;
113+
--scrollbar-bg: rgba(255, 255, 255, 0.1);
114+
--hover-bg: rgba(102, 126, 234, 0.15);
115+
--modal-color: rgba(15, 17, 21, 0.98);
116+
--success-color: #52c41a;
117+
--error-color: #ff4d4f;
118+
}
119+
120+
/* 通用颜色（不受主题影响） */
121+
:root {
122+
/* 主题色 */
123+
--primary-color: #667eea;
124+
--primary-color-hover: #5a6fd8;
125+
--primary-color-pressed: #4c63d2;
126+
--primary-color-suppl: rgba(102, 126, 234, 0.1);
127+
--primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
128+
--secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
129+
--success-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
130+
--warning-gradient: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
131+
132+
/* 边框半径 */
133+
--border-radius-sm: 8px;
134+
--border-radius-md: 12px;
135+
--border-radius-lg: 16px;
136+
--border-radius-xl: 24px;
137+
138+
/* 阴影（添加到通用部分） */
139+
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
140+
}

0 commit comments

Comments
 (0)