Skip to content

Commit 1680e3e

Browse files
wuyiping0628wuyiping0628
authored
feat: adapt to dark mode styles (#20)
1 parent e4e04f0 commit 1680e3e

File tree

9 files changed

+236
-36
lines changed

9 files changed

+236
-36
lines changed

‎.vitepress/theme/components/CustomHeader.vue‎

Lines changed: 19 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<!-- Logo 区域 -->
77
<div class="logo-section">
88
<a href="/" class="logo-link">
9-
<img src="/logo-opentiny-next-text.svg" alt="OpenTiny NEXT" class="logo-icon" />
9+
<img :src="isDark ? '/logo-opentiny-next-text-dark.svg' : '/logo-opentiny-next-text.svg'" alt="OpenTiny NEXT" class="logo-icon" />
1010
<span v-if="false" class="logo-text">{{ site.title }}</span>
1111
</a>
1212
<!-- 产品区域 -->
@@ -235,14 +235,16 @@ const openSearch = () => {
235235
236236
const prefix = site.value.base || '/'
237237
238-
// 产品Tab配置
239-
const productTabs = [
240-
{ key: 'next-sdk', name: 'NEXT-SDKs', link: `${prefix}next-sdk/guide`, src: `${prefix}logo-next-sdk.svg` },
241-
{ key: 'tiny-robot', name: 'TinyRobot', link: `${prefix}tiny-robot/guide/installation`, src: `${prefix}logo-tiny-robot.svg` },
242-
]
243-
244238
// 默认激活NEXT-SDKs
245239
const activeProductTab = ref('')
240+
// 产品Tab配置
241+
const productTabs = computed(() =>[
242+
{ key: 'next-sdk', name: 'NEXT-SDKs', link: `${prefix}next-sdk/guide`, src: `${prefix}logo-${activeProductTab.value==='next-sdk'?'active':'normal'}-next-sdk.svg` },
243+
{ key: 'tiny-robot', name: 'TinyRobot', link: `${prefix}tiny-robot/guide/installation`, src: `${prefix}logo-${activeProductTab.value==='tiny-robot'?'active':'normal'}-tiny-robot.svg` },
244+
])
245+
246+
247+
246248
247249
// 切换tab时路由跳转
248250
const handleProductTabChange = (tabKey: string) => {
@@ -288,7 +290,8 @@ watch(
288290
289291
.dark .custom-header {
290292
--vp-c-divider: #282c34;
291-
--search-border-color: #a8b1ff;
293+
--search-border-color: rgba(255, 255, 255, 0.2);
294+
background-color: #000000;
292295
}
293296
294297
.header-container {
@@ -415,6 +418,7 @@ watch(
415418
.home-link {
416419
--home-link-bg-color: #191919;
417420
--home-link-text-color: #ffffff;
421+
--tool-button-color: #f5f5f5;
418422
419423
display: inline-flex;
420424
align-items: center;
@@ -430,20 +434,21 @@ watch(
430434
}
431435
432436
.dark .home-link {
433-
--home-link-bg-color: #ffffff;
434-
--home-link-text-color: #191919;
437+
--home-link-bg-color: #1476ff;
438+
--home-link-text-color: #ffffff;
439+
--tool-button-color: #1a1a1a;
435440
}
436441
437442
.tool-button {
438443
display: inline-flex;
439444
align-items: center;
440445
justify-content: center;
441-
width: 40px;
442-
height: 40px;
446+
width: 32px;
447+
height: 32px;
443448
border: none;
444449
background: none;
445-
border-radius: 8px;
446-
color: var(--vp-c-text-2);
450+
border-radius: 32px;
451+
color: var(--tool-button-color);
447452
cursor: pointer;
448453
transition: all 0.2s ease;
449454
text-decoration: none;

‎.vitepress/theme/components/TabNavigation.vue‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -276,21 +276,31 @@ onUnmounted(() => {
276276
}
277277
278278
&__item {
279-
color: var(--vp-c-text-2);
279+
color: #808080;
280280
281281
&:hover:not(&--disabled) {
282-
color: var(--vp-c-text-1);
282+
color: #e6e6e6;
283283
}
284284
285285
&--active {
286-
color: #191919;
286+
color: #e6e6e6;
287+
.custom-tabs__item-title {
288+
color: #e6e6e6;
289+
}
287290
}
288291
289292
&--disabled {
290293
.custom-tabs__item-title {
291294
color: var(--vp-c-text-3);
292295
}
293296
}
297+
298+
&-underline {
299+
background: #ffffff;
300+
&--active {
301+
background: #ffffff;
302+
}
303+
}
294304
}
295305
}
296306

‎.vitepress/theme/home/index.vue‎

Lines changed: 34 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@ const nextDates = [
7171
{
7272
nextDateLeft: [
7373
{
74-
icon: '/logo-next-sdk.svg',
74+
icon: '/logo-normal-next-sdk.svg',
7575
title: 'NEXT-SDKs',
7676
desc: 'OpenTiny NEXT-SDKs 是一套前端智能应用开发工具包，旨在简化 WebAgent 的集成与使用，支持多种编程语言和前端框架，帮助开发者快速实现智能化功能。'
7777
},
@@ -92,8 +92,8 @@ const nextDates = [
9292
title: '快速开始',
9393
desc: '使用 OpenTiny NEXT-SDKs，只需要以下四步，就可以把你的前端应用变成智能应用。',
9494
links: [
95-
{ text: '让你的应用智能化',icon: '/logo-next-sdk.svg', url: '/next-sdk/guide/#让你的应用智能化' },
96-
{ text: '浏览器直接引入',icon: '/logo-next-sdk.svg', url: '/next-sdk/guide/#浏览器直接引入' },
95+
{ text: '让你的应用智能化',icon: '/logo-normal-next-sdk.svg', url: '/next-sdk/guide/#让你的应用智能化' },
96+
{ text: '浏览器直接引入',icon: '/logo-normal-next-sdk.svg', url: '/next-sdk/guide/#浏览器直接引入' },
9797
]
9898
},
9999
{
@@ -111,7 +111,7 @@ const nextDates = [
111111
nextDateLeft: [
112112
{
113113
title: 'TinyRobot',
114-
icon: '/logo-next-sdk.svg',
114+
icon: '/logo-normal-tiny-robot.svg',
115115
desc: 'TinyRobot是符合OpenTiny Design 设计体系的 AI 组件库，提供了丰富的AI交互组件，助力开发者快速构建AI应用。'
116116
},
117117
{
@@ -140,8 +140,8 @@ const nextDates = [
140140
title: '指南',
141141
desc: 'TinyRobot是符合OpenTiny Design 设计体系的 AI 组件库，提供了丰富的AI交互组件，助力开发者快速构建AI应用。',
142142
links: [
143-
{ text: '安装',icon: '/logo-next-sdk.svg', url: '/tiny-robot/guide/installation.html#安装' },
144-
{ text: '引入与使用',icon: '/logo-next-sdk.svg', url: '/tiny-robot/guide/usage.html#引入与使用' },
143+
{ text: '安装',icon: '/logo-normal-next-sdk.svg', url: '/tiny-robot/guide/installation.html#安装' },
144+
{ text: '引入与使用',icon: '/logo-normal-next-sdk.svg', url: '/tiny-robot/guide/usage.html#引入与使用' },
145145
]
146146
},
147147
{
@@ -165,19 +165,38 @@ const nextDates = [
165165
</script>
166166
<style scoped>
167167
168+
169+
168170
.next-home {
169171
margin: 80px auto;
172+
--next-home-bg-color: #ffffff;
173+
--next-home-border-color: #f0f0f0;
174+
--next-home-title-color: #000000;
175+
--next-home-content-title-color: #000000;
176+
--next-home-desc-color: #666666;
177+
--next-home-li-bg-color: #f5f5f5;
178+
179+
}
180+
181+
.dark .next-home {
182+
--next-home-bg-color: #000000;
183+
--next-home-border-color: rgba(255, 255, 255, 0.2);
184+
--next-home-title-color: #DEE1E6;
185+
--next-home-content-title-color: #e6e6e6;
186+
--next-home-desc-color: #b3b3b3;
187+
--next-home-li-bg-color: #1A1A1A;
188+
170189
}
171190
.next-desc {
172191
font-size: 16px;
173-
color: #666;
192+
color: var(--next-home-desc-color);
174193
margin-top: 8px;
175194
margin-bottom: 40px;
176195
}
177196
.next-title {
178197
display: flex;
179198
height: 60px;
180-
color: #191919;
199+
color: var(--next-home-title-color);
181200
font-size: 40px;
182201
font-weight: 600;
183202
}
@@ -203,10 +222,10 @@ const nextDates = [
203222
gap: 40px;
204223
}
205224
.next-content-box {
206-
border: 1px solid #f0f0f0;
225+
border: 1px solid var(--next-home-border-color);
207226
border-radius: 12px;
208227
padding: 32px;
209-
background: #fff;
228+
background: var(--next-home-bg-color);
210229
display: flex;
211230
flex-direction: column;
212231
align-items: flex-start;
@@ -224,12 +243,12 @@ const nextDates = [
224243
font-size: 28px;
225244
font-weight: 600;
226245
line-height: 37px;
227-
color: #000000;
246+
color: var(--next-home-content-title-color);
228247
margin-bottom: 24px;
229248
}
230249
.next-content-desc {
231250
font-size: 16px;
232-
color: #595959;
251+
color: var(--next-home-desc-color);
233252
line-height: 32px;
234253
}
235254
.next-content-desc-right {
@@ -261,7 +280,7 @@ const nextDates = [
261280
width: 100%;
262281
}
263282
.bg-list li{
264-
background: #f5f5f5;
283+
background: var(--next-home-li-bg-color);
265284
border-radius: 8px;
266285
padding: 24px;
267286
width: 100%;
@@ -281,4 +300,6 @@ const nextDates = [
281300
margin: 40px 0;
282301
width: 100%;
283302
}
303+
304+
284305
</style>

‎.vitepress/theme/style.css‎

Lines changed: 89 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,11 @@ body,
1616
--vp-home-hero-image-filter: blur(80px);
1717
}
1818

19+
20+
.dark .VPContent {
21+
background: #000000;
22+
}
23+
1924
* {
2025
scrollbar-width: thin;
2126
}
@@ -39,7 +44,7 @@ body,
3944
/* 暗色模式下的 Demo 插件样式 */
4045
.dark .vitepress-demo-plugin__container {
4146
background-color: #191919;
42-
border-color: rgba(255, 255, 255, 0.1);
47+
border-color: rgba(255, 255, 255, 0.2);
4348
}
4449

4550
/* ===== VitePress 导航覆盖 ===== */
@@ -61,6 +66,10 @@ body,
6166
border-right: 1px solid var(--vp-c-divider);
6267
}
6368

69+
.dark .VPSidebar {
70+
background-color: #000000 !important;
71+
}
72+
6473
.VPSidebar .curtain {
6574
display: none;
6675
}
@@ -89,7 +98,19 @@ body,
8998
.VPSidebarItem.level-1.is-link.is-active.has-active>.item .link>.text {
9099
color: #1476FF;
91100
}
92-
101+
/* 暗色主题侧边栏项目样式增强 */
102+
.dark .VPSidebarItem .link:hover {
103+
background: #262626;
104+
}
105+
.dark .VPSidebarItem.level-1.is-link>.item .link:hover .text {
106+
color: #e6e6e6;
107+
}
108+
.dark .VPSidebarItem.is-active .link {
109+
background-color: #152A47;
110+
}
111+
.dark .VPSidebarItem.level-1.is-link.is-active.has-active>.item .link>.text {
112+
color: #5291FF;
113+
}
93114
.main-content .group {
94115
margin-top: 22px;
95116
}
@@ -218,12 +239,14 @@ body,
218239
}
219240

220241
.vp-doc a:not(.header-anchor):not(.VPButton) {
221-
color: #191919;
222-
text-decoration: underline;
223-
text-decoration-color: #1476FF; /* 设置下划线颜色为蓝色 */
242+
color: #1476FF;
243+
text-decoration: none;
224244
}
245+
225246
.vp-doc a:not(.header-anchor):not(.VPButton):hover {
226-
color: #191919;
247+
text-decoration: underline;
248+
text-decoration-color: #1476FF; /* 设置下划线颜色为蓝色 */
249+
227250
}
228251

229252
.VPFeatures .items .item {
@@ -239,6 +262,66 @@ body,
239262
min-height: calc(100dvh - 113px);
240263
}
241264

265+
/* 暗色模式下全局样式 */
266+
.dark h1{
267+
color: #DEE1E6;
268+
}
269+
.dark h2{
270+
color: #F2F5FA;
271+
}
272+
.dark h3{
273+
color: #F2F5FA;
274+
}
275+
.dark h4{
276+
color: #F2F5FA;
277+
}
278+
.dark p{
279+
color: #9EA1A6;
280+
}
281+
.dark li{
282+
color: #9EA1A6;
283+
}
284+
.dark strong{
285+
color: #F2F5FA;
286+
}
287+
.dark th{
288+
background-color: #1a1a1a;
289+
}
290+
.dark tr{
291+
background-color: #000000;
292+
}
293+
.dark .vp-doc tbody tr:nth-child(even) {
294+
background-color: #000000;
295+
}
296+
.dark .vp-doc tbody tr:hover {
297+
background-color: #1a1a1a;
298+
}
299+
.dark .VPDocAside .content {
300+
border-left-color: rgba(255, 255, 255, 0.2);
301+
}
302+
303+
.dark .title{
304+
color: #9EA1A6;
305+
}
306+
.dark .VPLocalNav{
307+
background-color: #000000;
308+
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
309+
}
310+
.dark .VPDoc .vp-doc .vp-adaptive-theme {
311+
background: #000000;
312+
border: 1px solid rgba(255, 255, 255, 0.2);
313+
}
314+
.dark .outline-link.active {
315+
color: #F2F5FA;
316+
}
317+
.dark .vp-doc a:not(.header-anchor):not(.VPButton) {
318+
color: #5291FF;
319+
text-decoration: none;
320+
}
321+
.dark .vp-doc a:not(.header-anchor):not(.VPButton):hover {
322+
text-decoration: underline;
323+
text-decoration-color: #5291FF; /* 设置下划线颜色为蓝色 */
324+
}
242325
/* ===== 响应式布局 ===== */
243326
@media (min-width: 960px) {
244327
.VPSidebar {

‎public/logo-next-sdk.svg‎ renamed to ‎public/logo-active-next-sdk.svg‎

File renamed without changes.

‎public/logo-tiny-robot.svg‎ renamed to ‎public/logo-active-tiny-robot.svg‎

File renamed without changes.

0 commit comments

Comments
 (0)