fix: dark mode

apps/www/.vitepress/config.mts

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

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>

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 = [

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; */

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>

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>

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]" />

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" />

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>

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>