From 167cfcdf4b16695ecd21c235b75640fbf5b55859 Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Wed, 6 Sep 2023 18:30:49 +0800
Subject: [PATCH] fix: dark mode

---
 apps/www/.vitepress/config.mts                            | 1 -
 apps/www/.vitepress/theme/layout/DocsLayout.vue           | 3 +--
 apps/www/.vitepress/theme/layout/MainLayout.vue           | 6 ++----
 apps/www/.vitepress/theme/styles/vp-doc.css               | 8 ++++----
 apps/www/src/content/docs/components/radio-group.md       | 4 ++--
 apps/www/src/examples/cards/components/CreateAccount.vue  | 4 ++--
 apps/www/src/examples/cards/components/DatePicker.vue     | 2 +-
 .../www/src/lib/registry/default/example/CardWithForm.vue | 4 ++--
 .../src/lib/registry/default/example/RadioGroupDemo.vue   | 8 ++++----
 apps/www/src/lib/registry/default/example/TabsDemo.vue    | 8 ++++----
 10 files changed, 22 insertions(+), 26 deletions(-)

diff --git a/apps/www/.vitepress/config.mts b/apps/www/.vitepress/config.mts
index d949813d..132fc897 100644
--- a/apps/www/.vitepress/config.mts
+++ b/apps/www/.vitepress/config.mts
@@ -27,7 +27,6 @@ export default defineConfig({
     },
   },
 
-  appearance: false,
   lastUpdated: true,
   themeConfig: {
     search: {
diff --git a/apps/www/.vitepress/theme/layout/DocsLayout.vue b/apps/www/.vitepress/theme/layout/DocsLayout.vue
index 989f856a..09c58c80 100644
--- a/apps/www/.vitepress/theme/layout/DocsLayout.vue
+++ b/apps/www/.vitepress/theme/layout/DocsLayout.vue
@@ -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>
diff --git a/apps/www/.vitepress/theme/layout/MainLayout.vue b/apps/www/.vitepress/theme/layout/MainLayout.vue
index 193fb41f..588eefc2 100644
--- a/apps/www/.vitepress/theme/layout/MainLayout.vue
+++ b/apps/www/.vitepress/theme/layout/MainLayout.vue
@@ -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 = [
diff --git a/apps/www/.vitepress/theme/styles/vp-doc.css b/apps/www/.vitepress/theme/styles/vp-doc.css
index 949b0628..86aa9812 100644
--- a/apps/www/.vitepress/theme/styles/vp-doc.css
+++ b/apps/www/.vitepress/theme/styles/vp-doc.css
@@ -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; */
diff --git a/apps/www/src/content/docs/components/radio-group.md b/apps/www/src/content/docs/components/radio-group.md
index 72bbab65..68755f3c 100644
--- a/apps/www/src/content/docs/components/radio-group.md
+++ b/apps/www/src/content/docs/components/radio-group.md
@@ -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>
diff --git a/apps/www/src/examples/cards/components/CreateAccount.vue b/apps/www/src/examples/cards/components/CreateAccount.vue
index 2bc17873..f407334b 100644
--- a/apps/www/src/examples/cards/components/CreateAccount.vue
+++ b/apps/www/src/examples/cards/components/CreateAccount.vue
@@ -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>
diff --git a/apps/www/src/examples/cards/components/DatePicker.vue b/apps/www/src/examples/cards/components/DatePicker.vue
index 66346dc3..0c1a1aa4 100644
--- a/apps/www/src/examples/cards/components/DatePicker.vue
+++ b/apps/www/src/examples/cards/components/DatePicker.vue
@@ -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]" />
diff --git a/apps/www/src/lib/registry/default/example/CardWithForm.vue b/apps/www/src/lib/registry/default/example/CardWithForm.vue
index 975abee5..8f74fdaa 100644
--- a/apps/www/src/lib/registry/default/example/CardWithForm.vue
+++ b/apps/www/src/lib/registry/default/example/CardWithForm.vue
@@ -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" />
diff --git a/apps/www/src/lib/registry/default/example/RadioGroupDemo.vue b/apps/www/src/lib/registry/default/example/RadioGroupDemo.vue
index f54cf380..43b204bb 100644
--- a/apps/www/src/lib/registry/default/example/RadioGroupDemo.vue
+++ b/apps/www/src/lib/registry/default/example/RadioGroupDemo.vue
@@ -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>
diff --git a/apps/www/src/lib/registry/default/example/TabsDemo.vue b/apps/www/src/lib/registry/default/example/TabsDemo.vue
index 5d40463b..2d364843 100644
--- a/apps/www/src/lib/registry/default/example/TabsDemo.vue
+++ b/apps/www/src/lib/registry/default/example/TabsDemo.vue
@@ -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>