Skip to content

Commit ce4af66

Browse files
vastsavastsa
committed
fix: improve admin theme color adaptation
1 parent 45ef99a commit ce4af66

5 files changed

Lines changed: 157 additions & 89 deletions

File tree

‎src/App.vue‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -85,11 +85,13 @@ onMounted(() => {
8585
}
8686
8787
.light {
88-
@apply bg-[#f5f5f7] text-zinc-900;
88+
background-color: rgb(var(--color-page));
89+
color: rgb(var(--color-text));
8990
}
9091
9192
.dark {
92-
@apply bg-zinc-950 text-zinc-100;
93+
background-color: rgb(var(--color-page));
94+
color: rgb(var(--color-text));
9395
}
9496
9597
.fade-enter-active,
@@ -132,18 +134,18 @@ onMounted(() => {
132134
left: 0;
133135
width: 100%;
134136
height: 100%;
135-
background-color: rgba(0, 0, 0, 0.5);
137+
background-color: rgb(var(--color-overlay) / var(--loading-overlay-opacity));
136138
display: flex;
137139
justify-content: center;
138140
align-items: center;
139141
z-index: 9999;
140142
}
141143
142144
.loading-spinner {
143-
width: 50px;
144-
height: 50px;
145-
border: 3px solid #fff;
146-
border-top: 3px solid #27272a;
145+
width: var(--spinner-size);
146+
height: var(--spinner-size);
147+
border: var(--spinner-border-width) solid rgb(var(--color-accent-contrast));
148+
border-top-color: rgb(var(--color-accent));
147149
border-radius: 50%;
148150
animation: spin 1s linear infinite;
149151
}

‎src/assets/style/main.css‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,68 @@
22
@import 'tailwindcss/components';
33
@import 'tailwindcss/utilities';
44

5+
:root {
6+
color-scheme: light;
7+
--color-page: 245 245 247;
8+
--color-surface: 255 255 255;
9+
--color-surface-raised: 255 255 255;
10+
--color-surface-muted: 244 244 245;
11+
--color-surface-input: 255 255 255;
12+
--color-text: 24 24 27;
13+
--color-text-strong: 9 9 11;
14+
--color-text-muted: 82 82 91;
15+
--color-text-subtle: 113 113 122;
16+
--color-border: 228 228 231;
17+
--color-border-strong: 161 161 170;
18+
--color-accent: 24 24 27;
19+
--color-accent-contrast: 255 255 255;
20+
--color-danger: 220 38 38;
21+
--color-warning: 217 119 6;
22+
--color-success: 4 120 87;
23+
--color-overlay: 9 9 11;
24+
--surface-glass: rgb(var(--color-surface) / 0.78);
25+
--surface-glass-strong: rgb(var(--color-surface) / 0.92);
26+
--border-glass: rgb(var(--color-border) / 0.85);
27+
--shadow-color: 24 24 27;
28+
--shadow-panel: 0 22px 54px -36px rgb(var(--shadow-color) / 0.28);
29+
--shadow-sidebar: 12px 0 40px -28px rgb(var(--shadow-color) / 0.24);
30+
--color-scrollbar: 161 161 170;
31+
--color-scrollbar-hover: 113 113 122;
32+
--color-focus-ring: 113 113 122;
33+
--loading-overlay-opacity: 0.5;
34+
--spinner-size: 50px;
35+
--spinner-border-width: 3px;
36+
}
37+
38+
:root.dark {
39+
color-scheme: dark;
40+
--color-page: 16 16 18;
41+
--color-surface: 24 24 27;
42+
--color-surface-raised: 39 39 42;
43+
--color-surface-muted: 39 39 42;
44+
--color-surface-input: 9 9 11;
45+
--color-text: 228 228 231;
46+
--color-text-strong: 250 250 250;
47+
--color-text-muted: 161 161 170;
48+
--color-text-subtle: 113 113 122;
49+
--color-border: 63 63 70;
50+
--color-border-strong: 113 113 122;
51+
--color-accent: 244 244 245;
52+
--color-accent-contrast: 9 9 11;
53+
--color-danger: 248 113 113;
54+
--color-warning: 251 191 36;
55+
--color-success: 52 211 153;
56+
--surface-glass: rgb(var(--color-surface) / 0.82);
57+
--surface-glass-strong: rgb(var(--color-surface) / 0.94);
58+
--border-glass: rgb(var(--color-border) / 0.7);
59+
--shadow-color: 255 255 255;
60+
--shadow-panel: 0 22px 54px -36px rgb(var(--shadow-color) / 0.2);
61+
--shadow-sidebar: 12px 0 40px -28px rgb(var(--shadow-color) / 0.18);
62+
--color-scrollbar: 82 82 91;
63+
--color-scrollbar-hover: 113 113 122;
64+
--color-focus-ring: 161 161 170;
65+
}
66+
567
@font-face {
668
font-family: 'DingTalk';
769
src: url('@/assets/font/DingTalk.ttf') format('truetype');
@@ -10,4 +72,32 @@
1072

1173
body {
1274
font-family: 'DingTalk', sans-serif;
75+
background-color: rgb(var(--color-page));
76+
color: rgb(var(--color-text));
77+
}
78+
79+
::selection {
80+
background-color: rgb(var(--color-accent) / 0.16);
81+
}
82+
83+
@layer components {
84+
.theme-page { background-color: rgb(var(--color-page)); color: rgb(var(--color-text)); }
85+
.theme-surface { background: var(--surface-glass); border-color: var(--border-glass); }
86+
.theme-surface-strong { background: var(--surface-glass-strong); border-color: var(--border-glass); }
87+
.theme-panel { background: var(--surface-glass); border-color: var(--border-glass); box-shadow: var(--shadow-panel); }
88+
.theme-divider { border-color: rgb(var(--color-border) / 0.7); }
89+
.theme-text { color: rgb(var(--color-text)); }
90+
.theme-text-strong { color: rgb(var(--color-text-strong)); }
91+
.theme-text-muted { color: rgb(var(--color-text-muted)); }
92+
.theme-icon-button { color: rgb(var(--color-text-muted)); }
93+
.theme-icon-button:hover { background-color: rgb(var(--color-accent) / 0.08); color: rgb(var(--color-text-strong)); }
94+
.theme-brand { background-color: rgb(var(--color-accent)); color: rgb(var(--color-accent-contrast)); }
95+
.theme-nav-item { border-color: transparent; color: rgb(var(--color-text-muted)); }
96+
.theme-nav-item:hover { background-color: rgb(var(--color-accent) / 0.06); color: rgb(var(--color-text-strong)); }
97+
.theme-nav-item-active { border-color: rgb(var(--color-accent)); background-color: rgb(var(--color-accent) / 0.1); color: rgb(var(--color-text-strong)); }
98+
.theme-control { background-color: rgb(var(--color-surface-input) / 0.8); border-color: rgb(var(--color-border)); color: rgb(var(--color-text-strong)); }
99+
.theme-control::placeholder { color: rgb(var(--color-text-subtle)); }
100+
.theme-control:hover { border-color: rgb(var(--color-border-strong)); }
101+
.theme-control:focus { border-color: rgb(var(--color-focus-ring)); --tw-ring-color: rgb(var(--color-focus-ring) / 0.25); }
102+
.theme-warning { color: rgb(var(--color-warning)); }
13103
}

‎src/layout/AdminLayout/AdminLayout.vue‎

Lines changed: 18 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,34 @@
11
<template>
22
<div
3-
class="flex h-screen overflow-hidden flex-col transition-colors duration-300 lg:flex-row"
4-
:class="[isDarkMode ? 'bg-[#101012]' : 'bg-[#f5f5f7]']"
3+
class="theme-page flex h-screen overflow-hidden flex-col transition-colors duration-300 lg:flex-row"
54
>
65
<!-- Sidebar -->
76
<aside
8-
class="fixed inset-y-0 left-0 z-50 flex h-full w-64 shrink-0 transform flex-col border-r lg:relative lg:h-screen lg:translate-x-0"
7+
class="theme-surface fixed inset-y-0 left-0 z-50 flex h-full w-64 shrink-0 transform flex-col border-r shadow-[var(--shadow-sidebar)] backdrop-blur-2xl lg:relative lg:h-screen lg:translate-x-0"
98
:class="[
10-
isDarkMode
11-
? 'border-white/10 bg-zinc-900/80 backdrop-blur-2xl shadow-[12px_0_40px_-28px_rgba(255,255,255,0.18)]'
12-
: 'border-white/80 bg-white/70 backdrop-blur-2xl shadow-[12px_0_40px_-28px_rgba(24,24,27,0.24)]',
139
isSidebarOpen ? 'translate-x-0' : '-translate-x-full',
1410
'transition-transform duration-300 ease-in-out lg:transition-none'
1511
]"
1612
>
1713
<!-- Logo区域 -->
1814
<div
19-
class="flex h-16 shrink-0 items-center justify-between gap-3 border-b px-4"
20-
:class="[isDarkMode ? 'border-white/10' : 'border-zinc-200/70']"
15+
class="theme-divider flex h-16 shrink-0 items-center justify-between gap-3 border-b px-4"
2116
>
2217
<div class="flex min-w-0 items-center">
2318
<div
24-
class="flex h-10 w-10 shrink-0 items-center justify-center rounded-2xl transition-colors"
25-
:class="[isDarkMode ? 'bg-white/10 text-zinc-100' : 'bg-zinc-950 text-white']"
19+
class="theme-brand flex h-10 w-10 shrink-0 items-center justify-center rounded-2xl transition-colors"
2620
>
2721
<BoxIcon class="h-5 w-5 shrink-0" />
2822
</div>
2923
<h1
3024
@click="router.push('/')"
31-
class="ml-2 min-w-0 truncate text-xl font-semibold cursor-pointer"
32-
:class="[isDarkMode ? 'text-white' : 'text-gray-800']"
25+
class="theme-text-strong ml-2 min-w-0 truncate text-xl font-semibold cursor-pointer"
3326
>
3427
{{ t('common.appName') }}
3528
</h1>
3629
</div>
3730
<button @click="toggleSidebar" class="shrink-0 lg:hidden">
38-
<XIcon class="w-6 h-6" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']" />
31+
<XIcon class="theme-text-muted w-6 h-6" />
3932
</button>
4033
</div>
4134

@@ -46,15 +39,7 @@
4639
<RouterLink
4740
:to="item.redirect"
4841
class="flex h-10 w-full items-center rounded-lg border-l-4 px-3 text-sm font-medium"
49-
:class="[
50-
route.name === item.id
51-
? isDarkMode
52-
? 'border-zinc-200 bg-white/10 text-zinc-50 shadow-[inset_0_1px_0_rgba(255,255,255,0.05)]'
53-
: 'border-zinc-900 bg-zinc-900/[0.06] text-zinc-950 shadow-sm'
54-
: isDarkMode
55-
? 'border-transparent text-zinc-400 hover:bg-white/5 hover:text-zinc-100'
56-
: 'border-transparent text-zinc-500 hover:bg-zinc-900/[0.04] hover:text-zinc-900'
57-
]"
42+
:class="route.name === item.id ? 'theme-nav-item-active' : 'theme-nav-item'"
5843
>
5944
<component :is="item.icon" class="mr-3 h-5 w-5 shrink-0" />
6045
{{ item.name }}
@@ -64,15 +49,10 @@
6449
</nav>
6550

6651
<!-- 退出登录按钮 -->
67-
<div class="p-4 border-t" :class="[isDarkMode ? 'border-white/10' : 'border-zinc-200/70']">
52+
<div class="theme-divider p-4 border-t">
6853
<button
6954
@click="handleLogout"
70-
class="flex items-center w-full p-2 rounded-lg transition-colors duration-200"
71-
:class="[
72-
isDarkMode
73-
? 'text-zinc-400 hover:bg-white/5 hover:text-white'
74-
: 'text-zinc-500 hover:bg-zinc-900/[0.04] hover:text-zinc-950'
75-
]"
55+
class="theme-icon-button flex items-center w-full p-2 rounded-lg transition-colors duration-200"
7656
>
7757
<LogOutIcon class="w-5 h-5 mr-3" />
7858
{{ t('admin.logout') }}
@@ -84,20 +64,18 @@
8464
<div class="flex h-full min-h-0 min-w-0 flex-1 flex-col">
8565
<!-- Header -->
8666
<header
87-
class="border-b transition-colors duration-300 h-16 backdrop-blur-xl"
88-
:class="[isDarkMode ? 'border-white/10 bg-zinc-900/70' : 'border-white/80 bg-white/60']"
67+
class="theme-surface border-b transition-colors duration-300 h-16 backdrop-blur-xl"
8968
>
9069
<div class="flex items-center justify-between h-16 px-4">
9170
<button @click="toggleSidebar" class="lg:hidden">
92-
<MenuIcon class="w-6 h-6" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']" />
71+
<MenuIcon class="theme-text-muted w-6 h-6" />
9372
</button>
9473
</div>
9574
</header>
9675

9776
<!-- Content -->
9877
<main
99-
class="min-h-0 flex-1 overflow-y-auto transition-colors duration-300 custom-scrollbar"
100-
:class="[isDarkMode ? 'bg-[#101012]' : 'bg-[#f5f5f7]']"
78+
class="theme-page min-h-0 flex-1 overflow-y-auto transition-colors duration-300 custom-scrollbar"
10179
>
10280
<router-view />
10381
</main>
@@ -106,7 +84,7 @@
10684
</template>
10785

10886
<script setup lang="ts">
109-
import { ref, inject, onMounted, onUnmounted } from 'vue'
87+
import { ref, onMounted, onUnmounted } from 'vue'
11088
import {
11189
BoxIcon,
11290
MenuIcon,
@@ -131,7 +109,6 @@ interface MenuItem {
131109
const router = useRouter()
132110
const route = useRoute()
133111
const { t } = useI18n()
134-
const isDarkMode = inject('isDarkMode')
135112
const { verifySession, logout } = useAdminSession()
136113
const menuItems: MenuItem[] = [
137114
{
@@ -210,20 +187,12 @@ const handleLogout = async () => {
210187
left: 0;
211188
right: 0;
212189
bottom: 0;
213-
background-color: #e5e7eb;
190+
background-color: rgb(var(--color-surface-muted));
214191
transition: 0.4s;
215192
}
216193
217-
.dark .slider {
218-
background-color: #4b5563;
219-
}
220-
221194
input:checked + .slider {
222-
background-color: #18181b;
223-
}
224-
225-
.dark input:checked + .slider {
226-
background-color: #f4f4f5;
195+
background-color: rgb(var(--color-accent));
227196
}
228197
229198
.slider:before {
@@ -233,14 +202,10 @@ input:checked + .slider {
233202
width: 26px;
234203
left: 4px;
235204
bottom: 4px;
236-
background-color: white;
205+
background-color: rgb(var(--color-accent-contrast));
237206
transition: 0.4s;
238207
}
239208
240-
.dark .slider:before {
241-
background-color: #e5e7eb;
242-
}
243-
244209
.slider.round {
245210
border-radius: 34px;
246211
}
@@ -279,23 +244,13 @@ input:checked + .slider {
279244
}
280245
281246
&::-webkit-scrollbar-thumb {
282-
background-color: #cbd5e0;
247+
background-color: rgb(var(--color-scrollbar));
283248
border-radius: 3px;
284249
285250
&:hover {
286-
background-color: #a0aec0;
251+
background-color: rgb(var(--color-scrollbar-hover));
287252
}
288253
}
289254
}
290255
291-
/* 暗黑模式下的滚动条样式 */
292-
:global(.dark) .custom-scrollbar {
293-
&::-webkit-scrollbar-thumb {
294-
background-color: #4a5568;
295-
296-
&:hover {
297-
background-color: #2d3748;
298-
}
299-
}
300-
}
301256
</style>

‎src/views/manage/DashboardView.vue‎

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -175,12 +175,12 @@
175175
</div>
176176
</section>
177177

178-
<section class="rounded-lg p-5 shadow-sm" :class="[panelClass]">
178+
<section class="theme-text rounded-lg p-5 shadow-sm" :class="[panelClass]">
179179
<div class="mb-5">
180-
<h3 class="text-lg font-semibold" :class="[primaryTextClass]">
180+
<h3 class="theme-text-strong text-lg font-semibold">
181181
{{ t('admin.dashboard.storagePolicy') }}
182182
</h3>
183-
<p class="text-sm" :class="[mutedTextClass]">
183+
<p class="theme-text-muted text-sm">
184184
{{ t('admin.dashboard.storagePolicyDesc') }}
185185
</p>
186186
</div>
@@ -203,15 +203,14 @@
203203

204204
<div class="mt-5">
205205
<div class="mb-2 flex items-center justify-between text-sm">
206-
<span :class="[mutedTextClass]">{{ t('admin.dashboard.todayCapacityReference') }}</span>
207-
<span :class="[primaryTextClass]">{{ dashboardData.todaySizeRatio }}%</span>
206+
<span class="theme-text-muted">{{ t('admin.dashboard.todayCapacityReference') }}</span>
207+
<span class="theme-text-strong">{{ dashboardData.todaySizeRatio }}%</span>
208208
</div>
209209
<div
210-
class="h-2 overflow-hidden rounded-full"
211-
:class="[isDarkMode ? 'bg-gray-700' : 'bg-gray-100']"
210+
class="h-2 overflow-hidden rounded-full bg-[rgb(var(--color-surface-muted))]"
212211
>
213212
<div
214-
class="h-full rounded-full bg-zinc-500"
213+
class="h-full rounded-full bg-[rgb(var(--color-accent))]"
215214
:style="{ width: `${dashboardData.todaySizeRatio}%` }"
216215
></div>
217216
</div>
@@ -414,11 +413,11 @@ const PolicyRow = defineComponent({
414413
'div',
415414
{
416415
class:
417-
'flex items-center justify-between gap-4 border-b border-gray-200/60 pb-3 last:border-b-0 dark:border-gray-700'
416+
'theme-divider flex items-center justify-between gap-4 border-b pb-3 last:border-b-0'
418417
},
419418
[
420-
h('span', { class: 'text-sm text-gray-500 dark:text-gray-400' }, props.label),
421-
h('span', { class: 'text-sm font-medium text-gray-900 dark:text-white' }, props.value)
419+
h('span', { class: 'theme-text-muted text-sm' }, props.label),
420+
h('span', { class: 'theme-text-strong text-sm font-medium' }, props.value)
422421
]
423422
)
424423
}

0 commit comments

Comments
 (0)