Skip to content

Commit 60f2e8d

Browse files
qianmoQqianmoQ
authored
Merge pull request #219 from qianmoQ/dev-2025.1.5
feat: 文档适配暗黑模式
2 parents ed72e2d + 6b7a251 commit 60f2e8d

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

82 files changed

+2402
-1406
lines changed

‎docs/.vitepress/config.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,8 @@ export default {
1919
['link', {rel: 'icon', href: '/favicon.ico'}]
2020
],
2121

22+
appearance: true,
23+
2224
themeConfig: {
2325
logo: '/logo.svg',
2426
socialLinks: [
@@ -74,7 +76,7 @@ export default {
7476
link: 'https://playground.view-shadcn-ui.devlive.org'
7577
},
7678
{
77-
text: '2025.1.3 <span class="VPBadge danger" style="margin-left: -18px; position: absolute; bottom: 38px;">最新</span>',
79+
text: '2025.1.4 <span class="VPBadge danger" style="margin-left: -18px; position: absolute; bottom: 38px;">最新</span>',
7880
items: [
7981
{
8082
text: '贡献指南',

‎docs/.vitepress/theme/components/ApiTable.vue‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<ShadcnCard>
2+
<ShadcnCard :dark="darkMode">
33
<template #content>
44
<div class="p-2 border-b space-y-10">
55
<div class="font-bold">{{ title }}</div>
@@ -26,7 +26,10 @@
2626
</template>
2727

2828
<script setup lang="ts">
29-
const props = defineProps({
29+
import { useData } from "vitepress";
30+
import { computed } from "vue";
31+
32+
defineProps({
3033
title: {
3134
type: String,
3235
required: true
@@ -40,6 +43,9 @@ const props = defineProps({
4043
required: true
4144
}
4245
})
46+
47+
const { isDark } = useData()
48+
const darkMode = computed(() => isDark.value)
4349
</script>
4450

4551
<style scoped>

‎docs/.vitepress/theme/components/CodeRunner.vue‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
11
<template>
2-
<ShadcnCard>
2+
<ShadcnCard :dark="darkMode">
33
<template #content>
44
<div class="p-2 border-b">
55
<div class="font-bold">{{ title }}</div>
6-
<div class="text-sm text-muted-foreground">{{ description }}</div>
6+
<div :class="['text-sm text-muted-foreground', darkMode ? 'text-muted-foreground' : 'text-gray-500']">{{ description }}</div>
77
</div>
88

99
<div class="px-2" v-if="warning">
1010
<ShadcnAlert class="mt-2"
11-
:title="warning"
11+
:title="warning as string"
12+
:dark="darkMode"
1213
type="warning"
1314
show-icon
1415
closable/>
@@ -24,18 +25,23 @@
2425
class="flex items-center justify-center p-2 border-t w-full"
2526
target="_blank"
2627
:href="`https://playground.view-shadcn-ui.devlive.org/?codeKey=${codeKey}`">
27-
<ShadcnButton type="primary">在演练场中打开</ShadcnButton>
28+
<ShadcnButton type="primary" :dark="darkMode">在演练场中打开</ShadcnButton>
2829
</a>
2930
</template>
3031
</ShadcnCard>
3132
</template>
3233

3334
<script setup lang="ts">
35+
import { useData } from 'vitepress'
36+
import { computed } from 'vue'
37+
3438
withDefaults(defineProps<{
3539
title: String
3640
description?: String
3741
warning?: String
3842
codeKey?: String
3943
}>(), {})
4044
45+
const { isDark } = useData()
46+
const darkMode = computed(() => isDark.value)
4147
</script>

‎docs/.vitepress/theme/index.js‎

Lines changed: 22 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,18 @@
11
import DefaultTheme from 'vitepress/theme'
2+
import { h, onMounted, watch } from 'vue'
3+
import { useData } from 'vitepress'
24

35
import CodeRunner from './components/CodeRunner.vue'
4-
import ApiTable from "./components/ApiTable.vue";
6+
import ApiTable from './components/ApiTable.vue'
57

68
import './css/override.css'
79

810
export default {
9-
...DefaultTheme,
10-
enhanceApp: async ({app, router, siteData}) => {
11+
extends: DefaultTheme,
12+
Layout() {
13+
return h(DefaultTheme.Layout, null, {})
14+
},
15+
enhanceApp: async ({ app, router, siteData }) => {
1116
// Fixed window is not defined
1217
if (!import.meta.env.SSR) {
1318
const module = await import('view-shadcn-ui')
@@ -16,5 +21,19 @@ export default {
1621

1722
app.component('CodeRunner', CodeRunner)
1823
app.component('ApiTable', ApiTable)
24+
},
25+
setup() {
26+
const { isDark } = useData()
27+
28+
onMounted(() => {
29+
watch(isDark, (dark) => {
30+
if (dark) {
31+
document.documentElement.classList.add('dark')
32+
}
33+
else {
34+
document.documentElement.classList.remove('dark')
35+
}
36+
}, { immediate: true })
37+
})
1938
}
2039
}

‎docs/components/base/button.md‎

Lines changed: 48 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -13,13 +13,13 @@ title: 按钮 (Button)
1313
::: raw
1414

1515
<CodeRunner title="按钮类型">
16-
<ShadcnButton type="primary">Primary</ShadcnButton>
17-
<ShadcnButton type="success">Success</ShadcnButton>
18-
<ShadcnButton type="warning">Warning</ShadcnButton>
19-
<ShadcnButton type="danger">Danger</ShadcnButton>
20-
<ShadcnButton type="info">Info</ShadcnButton>
21-
<ShadcnButton type="text">Text</ShadcnButton>
22-
<ShadcnButton type="default">Default</ShadcnButton>
16+
<ShadcnButton type="primary" :dark="darkMode">Primary</ShadcnButton>
17+
<ShadcnButton type="success" :dark="darkMode">Success</ShadcnButton>
18+
<ShadcnButton type="warning" :dark="darkMode">Warning</ShadcnButton>
19+
<ShadcnButton type="danger" :dark="darkMode">Danger</ShadcnButton>
20+
<ShadcnButton type="info" :dark="darkMode">Info</ShadcnButton>
21+
<ShadcnButton type="text" :dark="darkMode">Text</ShadcnButton>
22+
<ShadcnButton type="default" :dark="darkMode">Default</ShadcnButton>
2323
</CodeRunner>
2424

2525
:::
@@ -48,9 +48,9 @@ title: 按钮 (Button)
4848
::: raw
4949

5050
<CodeRunner title="按钮尺寸">
51-
<ShadcnButton size="small">Small</ShadcnButton>
52-
<ShadcnButton size="default">Default</ShadcnButton>
53-
<ShadcnButton size="large">Large</ShadcnButton>
51+
<ShadcnButton size="small" :dark="darkMode">Small</ShadcnButton>
52+
<ShadcnButton size="default" :dark="darkMode">Default</ShadcnButton>
53+
<ShadcnButton size="large" :dark="darkMode">Large</ShadcnButton>
5454
</CodeRunner>
5555

5656
:::
@@ -75,19 +75,19 @@ title: 按钮 (Button)
7575
::: raw
7676

7777
<CodeRunner title="图标按钮">
78-
<ShadcnButton>
78+
<ShadcnButton :dark="darkMode">
7979
<template #icon>
8080
<ShadcnIcon icon="Save"/>
8181
</template>
8282
Icon
8383
</ShadcnButton>
84-
<ShadcnButton type="success">
84+
<ShadcnButton type="success" :dark="darkMode">
8585
<template #icon>
8686
<ShadcnIcon icon="Save"/>
8787
</template>
8888
Icon + Type
8989
</ShadcnButton>
90-
<ShadcnButton type="success" size="small">
90+
<ShadcnButton type="success" size="small" :dark="darkMode">
9191
<template #icon>
9292
<ShadcnIcon icon="Save"/>
9393
</template>
@@ -132,9 +132,9 @@ title: 按钮 (Button)
132132
::: raw
133133

134134
<CodeRunner title="圆角按钮">
135-
<ShadcnButton round>Round</ShadcnButton>
136-
<ShadcnButton type="danger" round>Round + Type</ShadcnButton>
137-
<ShadcnButton type="success" size="small" round>Round + Type + Size</ShadcnButton>
135+
<ShadcnButton round :dark="darkMode">Round</ShadcnButton>
136+
<ShadcnButton type="danger" round :dark="darkMode">Round + Type</ShadcnButton>
137+
<ShadcnButton type="success" size="small" round :dark="darkMode">Round + Type + Size</ShadcnButton>
138138
</CodeRunner>
139139

140140
:::
@@ -159,9 +159,9 @@ title: 按钮 (Button)
159159
::: raw
160160

161161
<CodeRunner title="禁用按钮">
162-
<ShadcnButton disabled>Disabled</ShadcnButton>
163-
<ShadcnButton type="danger" disabled>Disabled + Type</ShadcnButton>
164-
<ShadcnButton type="success" size="small" disabled>Disabled + Type + Size</ShadcnButton>
162+
<ShadcnButton disabled :dark="darkMode">Disabled</ShadcnButton>
163+
<ShadcnButton type="danger" disabled :dark="darkMode">Disabled + Type</ShadcnButton>
164+
<ShadcnButton type="success" size="small" disabled :dark="darkMode">Disabled + Type + Size</ShadcnButton>
165165
</CodeRunner>
166166

167167
:::
@@ -186,9 +186,9 @@ title: 按钮 (Button)
186186
::: raw
187187

188188
<CodeRunner title="圆形按钮">
189-
<ShadcnButton circle size="large"></ShadcnButton>
190-
<ShadcnButton type="danger" circle></ShadcnButton>
191-
<ShadcnButton type="success" size="small" circle></ShadcnButton>
189+
<ShadcnButton circle size="large" :dark="darkMode"></ShadcnButton>
190+
<ShadcnButton type="danger" circle :dark="darkMode"></ShadcnButton>
191+
<ShadcnButton type="success" size="small" circle :dark="darkMode"></ShadcnButton>
192192
</CodeRunner>
193193

194194
:::
@@ -213,9 +213,9 @@ title: 按钮 (Button)
213213
::: raw
214214

215215
<CodeRunner title="加载按钮">
216-
<ShadcnButton loading>Loading</ShadcnButton>
217-
<ShadcnButton type="success" loading>Loading + Type</ShadcnButton>
218-
<ShadcnButton type="success" size="small" loading>Loading + Type + Size</ShadcnButton>
216+
<ShadcnButton loading :dark="darkMode">Loading</ShadcnButton>
217+
<ShadcnButton type="success" loading :dark="darkMode">Loading + Type</ShadcnButton>
218+
<ShadcnButton type="success" size="small" loading :dark="darkMode">Loading + Type + Size</ShadcnButton>
219219
</CodeRunner>
220220

221221
:::
@@ -240,9 +240,9 @@ title: 按钮 (Button)
240240
::: raw
241241

242242
<CodeRunner title="自定义颜色">
243-
<ShadcnButton color="red">Red</ShadcnButton>
244-
<ShadcnButton type="danger" color="red">Red + Type</ShadcnButton>
245-
<ShadcnButton type="success" size="small" color="red">Red + Type + Size</ShadcnButton>
243+
<ShadcnButton color="red" :dark="darkMode">Red</ShadcnButton>
244+
<ShadcnButton type="danger" color="red" :dark="darkMode">Red + Type</ShadcnButton>
245+
<ShadcnButton type="success" size="small" color="red" :dark="darkMode">Red + Type + Size</ShadcnButton>
246246
</CodeRunner>
247247

248248
:::
@@ -267,13 +267,13 @@ title: 按钮 (Button)
267267
::: raw
268268

269269
<CodeRunner title="幽灵按钮">
270-
<ShadcnButton type="primary" ghost>Primary</ShadcnButton>
271-
<ShadcnButton type="success" ghost>Success</ShadcnButton>
272-
<ShadcnButton type="warning" ghost>Warning</ShadcnButton>
273-
<ShadcnButton type="danger" ghost>Danger</ShadcnButton>
274-
<ShadcnButton type="info" ghost>Info</ShadcnButton>
275-
<ShadcnButton type="text" ghost>Text</ShadcnButton>
276-
<ShadcnButton type="default" ghost>Default</ShadcnButton>
270+
<ShadcnButton type="primary" ghost :dark="darkMode">Primary</ShadcnButton>
271+
<ShadcnButton type="success" ghost :dark="darkMode">Success</ShadcnButton>
272+
<ShadcnButton type="warning" ghost :dark="darkMode">Warning</ShadcnButton>
273+
<ShadcnButton type="danger" ghost :dark="darkMode">Danger</ShadcnButton>
274+
<ShadcnButton type="info" ghost :dark="darkMode">Info</ShadcnButton>
275+
<ShadcnButton type="text" ghost :dark="darkMode">Text</ShadcnButton>
276+
<ShadcnButton type="default" ghost :dark="darkMode">Default</ShadcnButton>
277277
</CodeRunner>
278278

279279
:::
@@ -302,7 +302,7 @@ title: 按钮 (Button)
302302
::: raw
303303

304304
<CodeRunner title="按钮组">
305-
<ShadcnButtonGroup>
305+
<ShadcnButtonGroup :dark="darkMode">
306306
<ShadcnButton>Left</ShadcnButton>
307307
<ShadcnButton>Middle</ShadcnButton>
308308
<ShadcnButton>Right</ShadcnButton>
@@ -333,7 +333,7 @@ title: 按钮 (Button)
333333
::: raw
334334

335335
<CodeRunner title="按钮组方向">
336-
<ShadcnButtonGroup direction="vertical">
336+
<ShadcnButtonGroup direction="vertical" :dark="darkMode">
337337
<ShadcnButton type="primary">T</ShadcnButton>
338338
<ShadcnButton type="primary">C</ShadcnButton>
339339
<ShadcnButton type="primary">B</ShadcnButton>
@@ -400,11 +400,19 @@ title: 按钮 (Button)
400400

401401
## 按钮 (Button) 插槽
402402

403-
<ApiTable title="按钮 (Button) 插槽"
404-
:headers="['插槽', '描述']"
403+
<ApiTable title="按钮 (Button) 插槽"
404+
:headers="['插槽', '描述']"
405405
:columns="[
406406
['default', '默认插槽'],
407407
['icon', '图标插槽'],
408408
['loading', '加载状态插槽'],
409409
]">
410-
</ApiTable>
410+
</ApiTable>
411+
412+
<script setup lang="ts">
413+
import { useData } from 'vitepress'
414+
import { computed } from 'vue'
415+
416+
const { isDark } = useData()
417+
const darkMode = computed(() => isDark.value)
418+
</script>

‎docs/components/base/copy.md‎

Lines changed: 17 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ title: 复制 (Copy)
1313
::: raw
1414

1515
<CodeRunner title="用法">
16-
<ShadcnCopy text="Hello Shadcn UI"/>
16+
<ShadcnCopy text="Hello Shadcn UI" :dark="darkMode"/>
1717
</CodeRunner>
1818

1919
:::
@@ -38,11 +38,11 @@ title: 复制 (Copy)
3838
<CodeRunner title="提示">
3939
<div class="flex items-center gap-2">
4040
<span>显示提示</span>
41-
<ShadcnCopy text="Hello Shadcn UI"/>
41+
<ShadcnCopy text="Hello Shadcn UI" :dark="darkMode"/>
4242
</div>
4343
<div class="flex items-center gap-2">
4444
<span>不显示提示</span>
45-
<ShadcnCopy text="Hello Shadcn UI" :tooltip="false"/>
45+
<ShadcnCopy text="Hello Shadcn UI" :tooltip="false" :dark="darkMode"/>
4646
</div>
4747
</CodeRunner>
4848

@@ -67,19 +67,19 @@ title: 复制 (Copy)
6767
<CodeRunner title="位置">
6868
<div class="flex items-center gap-2">
6969
<span>顶部</span>
70-
<ShadcnCopy text="Position" position="top"/>
70+
<ShadcnCopy text="Position" position="top" :dark="darkMode"/>
7171
</div>
7272
<div class="flex items-center gap-2">
7373
<span>底部</span>
74-
<ShadcnCopy text="Position" position="bottom"/>
74+
<ShadcnCopy text="Position" position="bottom" :dark="darkMode"/>
7575
</div>
7676
<div class="flex items-center gap-2">
7777
<span>左侧</span>
78-
<ShadcnCopy text="Position" position="left"/>
78+
<ShadcnCopy text="Position" position="left" :dark="darkMode"/>
7979
</div>
8080
<div class="flex items-center gap-2">
8181
<span>右侧</span>
82-
<ShadcnCopy text="Position" position="right"/>
82+
<ShadcnCopy text="Position" position="right" :dark="darkMode"/>
8383
</div>
8484
</CodeRunner>
8585

@@ -123,8 +123,16 @@ title: 复制 (Copy)
123123
## 复制 (Copy) 插槽
124124

125125
<ApiTable title="复制 (Copy) 插槽"
126-
:headers="['插槽', '描述']"
126+
:headers="['插槽', '描述']"
127127
:columns="[
128128
['icon', '复制图标'],
129129
]">
130-
</ApiTable>
130+
</ApiTable>
131+
132+
<script setup lang="ts">
133+
import { useData } from 'vitepress'
134+
import { computed } from 'vue'
135+
136+
const { isDark } = useData()
137+
const darkMode = computed(() => isDark.value)
138+
</script>

0 commit comments

Comments
 (0)