Skip to content

Commit cc84224

Browse files
LittlefeanLittlefean
committed
💄 完善主题配色
1 parent 0e5e3e4 commit cc84224

File tree

3 files changed

+43
-23
lines changed

3 files changed

+43
-23
lines changed

‎app/src/index.css‎

Lines changed: 27 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -95,6 +95,7 @@
9595
--color-settings-page-bg: var(--color-settings-page-bg);
9696
--color-settings-text: var(--color-appmenu-item-text);
9797
--color-field-group-bg: var(--color-field-group-bg);
98+
--color-field-group-hover-bg: var(--color-field-group-hover-bg);
9899
}
99100
:root {
100101
--color-panel-bg: oklch(0.269 0 0);
@@ -164,6 +165,7 @@
164165
--color-settings-page-bg: oklch(0.145 0 0);
165166
--color-settings-text: var(--color-appmenu-item-text);
166167
--color-field-group-bg: oklch(0.269 0 0);
168+
--color-field-group-hover-bg: oklch(0.269 0 0);
167169
}
168170

169171
/* 暗色主题 */
@@ -213,9 +215,9 @@
213215
--color-slider-line: oklch(0.371 0 0);
214216
--color-slider-handle: oklch(0.707 0.165 254.624);
215217
--color-switch-false-bg: oklch(0.269 0 0);
216-
--color-switch-false-dot: #fff;
218+
--color-switch-false-dot: #adadad;
217219
--color-switch-true-bg: oklch(0.623 0.214 259.815);
218-
--color-switch-true-dot: #fff;
220+
--color-switch-true-dot: #f0f0f0;
219221
--color-switch-disabled-bg: oklch(0.439 0 0);
220222
--color-switch-disabled-dot: #fff;
221223
--color-appmenu-bg: oklch(0.269 0 0);
@@ -234,6 +236,8 @@
234236
--color-toolbar-collapsed-bg: #fff;
235237
--color-settings-page-bg: oklch(0.145 0 0);
236238
--color-settings-text: var(--color-appmenu-item-text);
239+
--color-field-group-bg: oklch(0.22 0 0);
240+
--color-field-group-hover-bg: oklch(0.26 0 0);
237241
}
238242
[data-theme="light"] {
239243
--color-panel-bg: oklch(0.98 0.01 0);
@@ -302,6 +306,8 @@
302306
--color-toolbar-collapsed-bg: oklch(0.15 0.05 0);
303307
--color-settings-page-bg: #d3d3d3;
304308
--color-settings-text: var(--color-appmenu-item-text);
309+
--color-field-group-bg: #acacac;
310+
--color-field-group-hover-bg: rgb(240, 240, 240);
305311
}
306312

307313
/* 马卡龙主题（暖色系：粉/紫/淡黄） */
@@ -361,12 +367,12 @@
361367
--color-select-option-selected-hover-border: transparent;
362368

363369
/* 滑动条 */
364-
--color-slider-line: oklch(0.9 0.04 30); /* 浅杏色轨道 */
365-
--color-slider-handle: oklch(0.8 0.07 340); /* 粉灰手柄 */
370+
--color-slider-line: #c59cb8; /* 浅杏色轨道 */
371+
--color-slider-handle: #865667; /* 粉灰手柄 */
366372

367373
/* 开关 */
368-
--color-switch-false-bg: oklch(0.94 0.05 60); /* 奶茶底色 */
369-
--color-switch-false-dot: oklch(0.45 0.08 340);
374+
--color-switch-false-bg: #e2c8d9; /* 奶茶底色 */
375+
--color-switch-false-dot: #b582a5;
370376
--color-switch-true-bg: oklch(0.8 0.07 340); /* 灰粉色 */
371377
--color-switch-true-dot: oklch(0.96 0.03 60);
372378

@@ -386,6 +392,9 @@
386392

387393
/* 设置页面 */
388394
--color-settings-page-bg: oklch(0.98 0.02 60); /* 珍珠白 */
395+
--color-field-group-bg: #f4dadd;
396+
--color-field-group-hover-bg: #fbd1d7;
397+
--color-settings-text: var(--color-appmenu-item-text);
389398
}
390399

391400
/* 莫兰迪主题（浅咖/脏粉/豆绿/雾霾蓝） */
@@ -448,14 +457,14 @@
448457
--color-select-option-selected-hover-border: transparent;
449458

450459
/* 滑动条 */
451-
--color-slider-line: var(--color-secondary); /* 冷蓝色轨道 */
452-
--color-slider-handle: var(--color-accent); /* 灰紫色手柄 */
460+
--color-slider-line: #949cae; /* 冷蓝色轨道 */
461+
--color-slider-handle: #666b75; /* 灰紫色手柄 */
453462

454463
/* 开关 */
455-
--color-switch-false-bg: oklch(0.85 0.02 240); /* 浅冷灰色 */
456-
--color-switch-false-dot: oklch(0.88 0.02 240);
457-
--color-switch-true-bg: var(--color-primary); /* 冷绿 */
458-
--color-switch-true-dot: oklch(0.95 0.02 240);
464+
--color-switch-false-bg: #b5c0c8; /* 浅冷灰色 */
465+
--color-switch-false-dot: #dde7ef;
466+
--color-switch-true-bg: #a4aaba; /* 冷绿 */
467+
--color-switch-true-dot: oklch(1 0.02 240);
459468

460469
/* 菜单系统 */
461470
--color-appmenu-bg: var(--color-panel-bg); /* 冷淡蓝色调的浅灰色 */
@@ -471,6 +480,9 @@
471480

472481
/* 特殊页面 */
473482
--color-settings-page-bg: oklch(0.94 0.005 240); /* 冷淡蓝色调的极浅灰色 */
483+
--color-field-group-bg: #d8dfe5;
484+
--color-field-group-hover-bg: #c9d2da;
485+
--color-settings-text: #14242f;
474486
}
475487

476488
/* 理刃科技主题 */
@@ -556,6 +568,9 @@
556568

557569
/* 特殊页面 */
558570
--color-settings-page-bg: #2d3238;
571+
--color-field-group-bg: #22272d;
572+
--color-field-group-hover-bg: #1b2127;
573+
--color-settings-text: var(--color-appmenu-item-text);
559574
}
560575

561576
@layer base {

‎app/src/pages/settings/_field.tsx‎

Lines changed: 15 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -105,14 +105,19 @@ export function ButtonField({
105105
}
106106

107107
const fieldColors = {
108-
default: "hover:bg-white/5",
109-
green: "bg-green-500/20 hover:bg-green-500/25",
110-
red: "bg-red-500/20 hover:bg-red-500/25",
111-
yellow: "bg-yellow-500/20 hover:bg-yellow-500/25",
112-
blue: "bg-blue-500/20 hover:bg-blue-500/25",
113-
purple: "bg-purple-500/20 hover:bg-purple-500/25",
108+
default: "hover:bg-field-group-hover-bg",
109+
celebrate: "border-2 border-green-500/20 hover:bg-green-500/25",
110+
danger: "border-2 border-red-500/20 hover:bg-red-500/25",
111+
warning: "border-2 border-yellow-500/20 hover:bg-yellow-500/25",
112+
thinking: "border-2 border-blue-500/20 hover:bg-blue-500/25",
113+
imaging: "border-2 border-purple-500/20 hover:bg-purple-500/25",
114114
};
115115

116+
/**
117+
* 每一个设置段
118+
* @param param0
119+
* @returns
120+
*/
116121
export function Field({
117122
title = "",
118123
description = "",
@@ -124,7 +129,7 @@ export function Field({
124129
title?: string;
125130
description?: string;
126131
children?: React.ReactNode;
127-
color?: "default" | "green" | "red" | "yellow" | "blue" | "purple";
132+
color?: "default" | "celebrate" | "danger" | "warning" | "thinking" | "imaging";
128133
icon?: React.ReactNode;
129134
className?: string;
130135
}) {
@@ -176,14 +181,14 @@ export function FieldGroup({
176181
return (
177182
<div className={cn("flex w-full flex-col gap-2", className)}>
178183
{/* 第一行，标题行 */}
179-
<div className="text-panel-text my-2 flex items-center gap-2 pl-4 pt-4 text-sm opacity-50">
184+
<div className="text-settings-text my-2 flex items-center gap-2 pl-4 pt-4 text-sm opacity-60">
180185
<span>{icon}</span>
181-
<span className="text-settings-text">{title}</span>
186+
<span>{title}</span>
182187
</div>
183188
{/* 可能的描述行 */}
184189
{description && <div className="text-panel-details-text pl-4 text-xs">{description}</div>}
185190
{/* 内容 */}
186-
<div className="bg-field-group-bg group/field-group flex w-full flex-col rounded-2xl text-sm *:rounded-none *:first:rounded-t-xl *:last:rounded-b-xl">
191+
<div className="bg-field-group-bg group/field-group flex w-full flex-col overflow-hidden rounded-2xl text-sm *:rounded-none *:first:rounded-t-xl *:last:rounded-b-xl">
187192
{children}
188193
</div>
189194
</div>

‎app/src/pages/settings/plugins.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ export default function PluginsPage() {
4444
<Field
4545
icon={<PartyPopper />}
4646
title={t("welcome.title")}
47-
color="green"
47+
color="celebrate"
4848
description={t("welcome.description")}
4949
></Field>
5050
<Field icon={<Plug />} title={t("title")}>

0 commit comments

Comments
 (0)