Skip to content

Commit 4856ada

Browse files
author
jay.yang
committed
style: enhance theme styles with new color variables and dark mode support
1 parent 467b3b2 commit 4856ada

File tree

2 files changed

+191
-16
lines changed

2 files changed

+191
-16
lines changed

‎docs/.vitepress/theme/styles.css

Lines changed: 187 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -7,17 +7,200 @@
77
}
88

99
:root {
10-
--vp-home-hero-image-filter: blur(44px);
1110
--vhp-func-bg: rgba(255, 255, 255, 0.08);
1211
--vp-home-hero-name-color: transparent;
12+
--vhp-demo-shadow-color: rgba(0, 0, 0, 0.3);
13+
--vp-code-line-number-color: var(--vp-c-text-dark-3);
14+
/* 浅色主题（灰白色调） */
15+
--vp-c-bg: #f5f5f5;
16+
--vp-c-bg-soft: #eaeaea;
17+
--vp-c-bg-mute: #e0e0e0;
18+
--vp-c-text: #1a1a1a;
19+
--vp-c-text-light: #444444;
20+
21+
/* 暗色主题 */
22+
--vp-c-bg-dark: #000;
23+
--vp-c-text-dark: #fff;
24+
25+
/* 主色调 */
26+
--vp-c-brand: #000;
27+
--vp-c-brand-light: #1a1a1a;
28+
--vp-c-brand-lighter: #333;
29+
--vp-c-brand-dark: #fff;
30+
31+
/* 链接颜色 */
32+
--vp-c-link: var(--vp-c-brand);
33+
--vp-c-link-hover: var(--vp-c-brand-light);
34+
35+
/* 代码块 */
36+
--vp-code-block-bg: #f0f0f0;
37+
--vp-code-block-color: #1a1a1a;
38+
--vp-code-line-highlight-bg: #e0e0e0;
39+
--vp-code-line-number-color: #999;
40+
41+
/* 边框 */
42+
--vp-c-border: rgba(0, 0, 0, 0.1);
43+
--vp-c-divider: rgba(0, 0, 0, 0.1);
44+
45+
/* 按钮 */
46+
--vp-button-brand-bg: #000;
47+
--vp-button-brand-text: #fff;
48+
--vp-button-brand-hover-bg: #1a1a1a;
49+
50+
/* 导航栏 */
51+
--vp-nav-bg-color: rgba(245, 245, 245, 0.8);
52+
--vp-nav-screen-bg-color: rgba(245, 245, 245, 1);
53+
54+
/* 侧边栏 */
55+
--vp-sidebar-bg-color: #f5f5f5;
56+
--vp-c-brand-1: oklch(57.61% 0.2508 258.23);
57+
58+
/* 自定义容器 */
59+
--vp-custom-block-info-bg: #f0f0f0;
60+
--vp-custom-block-info-border: #e0e0e0;
61+
--vp-custom-block-tip-bg: #f0f0f0;
62+
--vp-custom-block-tip-border: #e0e0e0;
63+
--vp-custom-block-warning-bg: #f0f0f0;
64+
--vp-custom-block-warning-border: #e0e0e0;
65+
66+
/* --vp-home-hero-name-color: transparent;
1367
--vp-home-hero-name-background: -webkit-linear-gradient(315deg, #42d392 25%, #647eff);
1468
--vp-home-hero-image-background-image: linear-gradient(-45deg,
1569
#42d392 50%,
1670
#647eff 50%);
1771
--vhp-demo-shadow-color: rgba(0, 0, 0, 0.3);
18-
--vp-code-line-number-color: var(--vp-c-text-dark-3);
72+
--vp-home-hero-image-filter: blur(15px); */
1973
}
2074

75+
/* 暗色主题下的特定样式 */
76+
.dark {
77+
--vp-c-bg: var(--vp-c-bg-dark);
78+
--vp-c-bg-soft: #111;
79+
--vp-c-bg-mute: #222;
80+
--vp-c-text: var(--vp-c-text-dark);
81+
--vp-c-text-light: #eee;
82+
--vp-c-brand: #fff;
83+
--vp-c-brand-light: #f5f5f5;
84+
--vp-c-brand-lighter: #eee;
85+
--vp-c-link: #fff;
86+
--vp-c-link-hover: #f5f5f5;
87+
--vp-code-block-bg: #111;
88+
--vp-code-block-color: #fff;
89+
--vp-code-line-highlight-bg: #222;
90+
--vp-c-border: rgba(255, 255, 255, 0.1);
91+
--vp-c-divider: rgba(255, 255, 255, 0.1);
92+
--vp-nav-bg-color: rgba(0, 0, 0, 0.8);
93+
--vp-nav-screen-bg-color: rgba(0, 0, 0, 1);
94+
--vp-sidebar-bg-color: #000;
95+
--vp-custom-block-info-bg: #111;
96+
--vp-custom-block-info-border: #333;
97+
--vp-custom-block-tip-bg: #111;
98+
--vp-custom-block-tip-border: #333;
99+
--vp-custom-block-warning-bg: #111;
100+
--vp-custom-block-warning-border: #333;
101+
--vp-c-brand-1: oklch(71.7% 0.1648 250.79360374054167)
102+
}
103+
104+
105+
input {
106+
opacity: 1;
107+
background-color: #e3e3e3;
108+
color: #000;
109+
padding-left: 8px;
110+
height: 36px;
111+
font-weight: 500;
112+
border-radius: 5px;
113+
font-size: 15px;
114+
transition: all 0.3s;
115+
}
116+
117+
/* 调整文本颜色 */
118+
.VPDoc {
119+
color: var(--vp-c-text);
120+
}
121+
122+
/* 调整链接样式 */
123+
.vp-doc a {
124+
color: var(--vp-c-link);
125+
text-decoration: none;
126+
}
127+
128+
.vp-doc a:hover {
129+
color: var(--vp-c-link-hover);
130+
}
131+
132+
/* 调整代码块样式 */
133+
.vp-doc div[class*='language-'] {
134+
background-color: var(--vp-code-block-bg);
135+
color: var(--vp-code-block-color);
136+
}
137+
138+
/* 调整导航栏样式 */
139+
.VPNav {
140+
background-color: var(--vp-nav-bg-color);
141+
backdrop-filter: blur(8px);
142+
}
143+
144+
/* 调整侧边栏样式 */
145+
.VPSidebar {
146+
background-color: var(--vp-sidebar-bg-color);
147+
}
148+
149+
/* 调整按钮样式 */
150+
.VPButton.brand,
151+
.VPButton.primary {
152+
background-color: var(--vp-button-brand-bg);
153+
color: var(--vp-button-brand-text);
154+
border: 1px solid transparent;
155+
transition: all 0.25s;
156+
}
157+
158+
.VPButton.brand:hover,
159+
.VPButton.primary:hover {
160+
background-color: var(--vp-button-brand-hover-bg);
161+
}
162+
163+
/* 次要按钮样式 */
164+
.VPButton.alt {
165+
border: 1px solid var(--vp-c-border);
166+
color: var(--vp-c-text);
167+
background-color: transparent;
168+
}
169+
170+
.VPButton.alt:hover {
171+
border-color: var(--vp-c-brand);
172+
color: var(--vp-c-brand);
173+
}
174+
175+
/* 确保暗色模式下按钮样式正确 */
176+
.dark .VPButton.brand,
177+
.dark .VPButton.primary {
178+
background-color: #fff;
179+
color: #000;
180+
}
181+
182+
.dark .VPButton.brand:hover,
183+
.dark .VPButton.primary:hover {
184+
background-color: #e0e0e0;
185+
color: #000;
186+
}
187+
188+
.dark .VPButton.alt {
189+
border-color: rgba(255, 255, 255, 0.1);
190+
color: #fff;
191+
}
192+
193+
.dark .VPButton.alt:hover {
194+
border-color: #fff;
195+
color: #e0e0e0;
196+
}
197+
198+
.VPNavScreen {
199+
background-color: var(--vp-nav-screen-bg-color);
200+
height: 100vh;
201+
}
202+
203+
21204
.dark {
22205
--vhp-demo-shadow-color: rgba(188, 189, 190, 0.3);
23206

@@ -51,16 +234,7 @@
51234
border: none;
52235
}
53236

54-
input {
55-
opacity: 1;
56-
background-color: var(--vhp-func-bg);
57-
padding-left: 8px;
58-
height: 36px;
59-
font-weight: 500;
60-
border-radius: 5px;
61-
font-size: 15px;
62-
transition: all 0.3s;
63-
}
237+
64238

65239
input:focus {
66240
color: var(--vp-button-brand-bg);
@@ -87,4 +261,4 @@ input:focus {
87261
img[src='/search.png'] {
88262
width: 100%;
89263
aspect-ratio: 1 / 1;
90-
}
264+
}

‎docs/components/button/button.vue

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@
77
<style lang="less" scoped>
88
.vhp-button {
99
border-color: var(--vp-button-brand-border);
10-
color: var(--vp-button-brand-text);
11-
background-color: var(--vp-button-brand-bg);
10+
color: var(--vp-c-bg);
11+
background-color: var(--vp-c-brand);
1212
padding-left: 6px;
1313
padding-right: 6px;
1414
border-radius: 5px;
@@ -24,7 +24,8 @@
2424
2525
.vhp-button:hover {
2626
border-color: var(--vp-button-brand-hover-border);
27-
background-color: var(--vp-button-brand-hover-bg);
27+
background-color: var(--vp-c-brand);
28+
opacity: 0.8;
2829
}
2930
3031
.vhp-button::after {

0 commit comments

Comments
 (0)