Niklas/shadcn-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: dark mode

Browse Source
This commit is contained in:
zernonia 2023-09-06 18:30:49 +08:00
parent 7200c53a8a
commit 167cfcdf4b
10 changed files with 22 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
apps/www/.vitepress/config.mts
View File

@ -27,7 +27,6 @@ export default defineConfig({
},
},
appearance: false,
lastUpdated: true,
themeConfig: {
search: {

3
apps/www/.vitepress/theme/layout/DocsLayout.vue
View File

@ -9,8 +9,7 @@ import RadixIconsCode from '~icons/radix-icons/code'
import ChevronRightIcon from '~icons/lucide/chevron-right'
const $route = useRoute()
const { frontmatter, ...a } = useData()
console.log(a)
const { frontmatter } = useData()
</script>
<template>

6
apps/www/.vitepress/theme/layout/MainLayout.vue
View File

@ -1,5 +1,5 @@
<script setup lang="ts">
import { useDark, useToggle } from '@vueuse/core'
import { useToggle } from '@vueuse/core'
import { Content, useData, useRoute } from 'vitepress'
import { docsConfig } from '../config/docs'
import Logo from '../components/Logo.vue'
@ -13,11 +13,9 @@ import TablerBrandX from '~icons/tabler/brand-x'
import RadixIconsMoon from '~icons/radix-icons/moon'
import RadixIconsSun from '~icons/radix-icons/sun'
const { frontmatter } = useData()
const { frontmatter, isDark } = useData()
const $route = useRoute()
const isDark = useDark()
const toggleDark = useToggle(isDark)
const links = [

8
apps/www/.vitepress/theme/styles/vp-doc.css
View File

@ -1,9 +1,9 @@
:root {
--vp-icon-copy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' height='20' width='20' stroke='rgba(128,128,128,1)' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2'/%3E%3C/svg%3E");
--vp-icon-copied: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' height='20' width='20' stroke='rgba(128,128,128,1)' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2m-6 9 2 2 4-4'/%3E%3C/svg%3E");
--vp-code-bg: hsl(240 3.7% 15.9%);
--vp-c-divider: hsl(240 3.7% 15.9%);
}
--vp-code-bg: hsl(var(--muted));
--vp-c-divider: hsl(var(--muted));
}
/**
@ -344,7 +344,7 @@
}
.vp-doc [class*='language-'] code .highlighted {
background-color: hsl(var(--muted));
background-color: hsl(240 3.7% 15.9%);
transition: background-color 0.5s;
/* margin: 0 -24px;
padding: 0 24px; */

4
apps/www/src/content/docs/components/radio-group.md
View File

@ -38,11 +38,11 @@ import { RadioGroup, RadioGroupItem } from '@/lib/registry/default/ui/radio-grou
<RadioGroup default-value="option-one">
<div className="flex items-center space-x-2">
<RadioGroupItem id="option-one" value="option-one" />
<Label html-for="option-one">Option One</Label>
<Label for="option-one">Option One</Label>
</div>
<div className="flex items-center space-x-2">
<RadioGroupItem id="option-two" value="option-two" />
<Label html-for="option-two">Option Two</Label>
<Label for="option-two">Option Two</Label>
</div>
</RadioGroup>
</template>

4
apps/www/src/examples/cards/components/CreateAccount.vue
View File

@ -50,11 +50,11 @@ import { Label } from '@/lib/registry/default/ui/label'
</div>
</div>
<div class="grid gap-2">
<Label html-for="email">Email</Label>
<Label for="email">Email</Label>
<Input id="email" type="email" placeholder="m@example.com" />
</div>
<div class="grid gap-2">
<Label html-for="password">Password</Label>
<Label for="password">Password</Label>
<Input id="password" type="password" />
</div>
</CardContent>

2
apps/www/src/examples/cards/components/DatePicker.vue
View File

@ -8,7 +8,7 @@ import { Label } from '@/lib/registry/default/ui/label'
<Card>
<CardContent class="pt-6">
<div class="space-y-2">
<Label html-for="date" class="shrink-0">
<Label for="date" class="shrink-0">
Pick a date
</Label>
<DatePickerWithRange class="[&>button]:w-[260px]" />

4
apps/www/src/lib/registry/default/example/CardWithForm.vue
View File

@ -29,11 +29,11 @@ import {
<form>
<div class="grid w-full items-center gap-4">
<div class="flex flex-col space-y-1.5">
<Label html-for="name">Name</Label>
<Label for="name">Name</Label>
<Input id="name" placeholder="Name of your project" />
</div>
<div class="flex flex-col space-y-1.5">
<Label html-for="framework">Framework</Label>
<Label for="framework">Framework</Label>
<Select>
<SelectTrigger id="framework">
<SelectValue placeholder="Select" />

8
apps/www/src/lib/registry/default/example/RadioGroupDemo.vue
View File

@ -4,18 +4,18 @@ import { RadioGroup, RadioGroupItem } from '@/lib/registry/default/ui/radio-grou
</script>
<template>
<RadioGroup default-value="comfortable">
<RadioGroup default-value="comfortable" :orientation="'vertical'">
<div className="flex items-center space-x-2">
<RadioGroupItem id="r1" value="default" />
<Label html-for="r1">Default</Label>
<Label for="r1">Default</Label>
</div>
<div className="flex items-center space-x-2">
<RadioGroupItem id="r2" value="comfortable" />
<Label html-for="r2">Comfortable</Label>
<Label for="r2">Comfortable</Label>
</div>
<div className="flex items-center space-x-2">
<RadioGroupItem id="r3" value="compact" />
<Label html-for="r3">Compact</Label>
<Label for="r3">Compact</Label>
</div>
</RadioGroup>
</template>

8
apps/www/src/lib/registry/default/example/TabsDemo.vue
View File

@ -38,11 +38,11 @@ import {
</CardHeader>
<CardContent class="space-y-2">
<div className="space-y-1">
<Label html-for="name">Name</Label>
<Label for="name">Name</Label>
<Input id="name" default-value="Pedro Duarte" />
</div>
<div className="space-y-1">
<Label html-for="username">Username</Label>
<Label for="username">Username</Label>
<Input id="username" default-value="@peduarte" />
</div>
</CardContent>
@ -61,11 +61,11 @@ import {
</CardHeader>
<CardContent class="space-y-2">
<div className="space-y-1">
<Label html-for="current">Current password</Label>
<Label for="current">Current password</Label>
<Input id="current" type="password" />
</div>
<div className="space-y-1">
<Label html-for="new">New password</Label>
<Label for="new">New password</Label>
<Input id="new" type="password" />
</div>
</CardContent>