docs: update

docs/app.vue

@@ -11,10 +11,7 @@
 
           <div class="flex items-center gap-3">
             <UButton to="https://github.com/nuxtlabs/ui" target="_blank" variant="transparent" icon="fa-brands:github" />
-
-            <UseDark v-slot="{ isDark, toggleDark }">
-              <UButton variant="transparent" :icon="isDark ? 'heroicons-outline:moon' : 'heroicons-outline:sun'" @click="toggleDark()" />
-            </UseDark>
+            <UButton variant="transparent" :icon="colorMode.value === 'dark' ? 'heroicons-outline:moon' : 'heroicons-outline:sun'" @click="toggleDark" />
           </div>
         </div>
       </UContainer>
@@ -60,17 +57,17 @@
 </template>
 
 <script setup>
-import { UseDark } from '@vueuse/components'
-
 useMeta({
-  htmlAttrs: {
-    class: 'bg-white dark:bg-black'
-  },
   bodyAttrs: {
     class: 'antialiased font-sans text-gray-700 bg-gray-50 dark:bg-gray-900 dark:text-gray-200'
   }
 })
 
+const colorMode = useColorMode()
+const toggleDark = () => {
+  colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
+}
+
 const sections = [
   { label: 'Getting Started', links: [{ label: 'Usage', to: '/' }, { label: 'Examples', to: '/examples' }, { label: 'Migration', to: '/migration' }, { label: 'Dark mode', to: '/dark' }] },
   { label: 'Elements', links: [{ label: 'Avatar', to: '/components/Avatar' }, { label: 'AvatarGroup', to: '/components/AvatarGroup' }, { label: 'Badge', to: '/components/Badge' }, { label: 'Button', to: '/components/Button' }, { label: 'Dropdown', to: '/components/Dropdown' }, { label: 'Icon', to: '/components/Icon' }] },

docs/nuxt.config.ts

@@ -12,7 +12,10 @@ export default defineNuxtConfig({
     ],
     link: [
       { rel: 'stylesheet', href: 'https://rsms.me/inter/inter.css' }
-    ]
+    ],
+    htmlAttrs: {
+      class: 'bg-white dark:bg-black'
+    }
   },
   buildModules: [
     module

docs/pages/components/[component].vue

@@ -72,7 +72,7 @@
         </UFormGroup>
       </div>
 
-      <div class="border-t u-border-gray-200 u-bg-gray-50">
+      <div class="border-t u-border-gray-200">
         <pre class="text-sm leading-6 u-text-gray-900 flex-1 relative flex ligatures-none lg:overflow-y-auto overflow-x-hidden px-4 sm:px-6 py-5 sm:py-6">
           <code class="flex-none min-w-full whitespace-pre-wrap break-all">{{ code }}</code>
 

docs/pages/dark.vue

@@ -8,7 +8,7 @@
       </div>
 
       <p class="mt-1 text-lg u-text-gray-500">
-        Dark mode implementation with <a href="https://vueuse.org" target="_blank" class="underline">VueUse</a>.
+        Dark mode implementation with <a href="https://color-mode.nuxtjs.org/" target="_blank" class="underline">Color Mode</a> module.
       </p>
     </div>
 
@@ -16,13 +16,7 @@
       Usage
     </h2>
 
-    <pre class="u-bg-gray-900 rounded-md u-text-white px-4">
-      <code class="text-sm">
-        {{ code5 }}
-      </code>
-    </pre>
-
-    <p>The VueUse <a href="https://vueuse.org/core/useDark" target="_blank" class="underline">useDark</a> composable makes use of the `dark` class on the html tag so you can easily take advantage of the UnoCSS `dark` variant.</p>
+    <p>TailwindCSS takes advantage of the `dark` class on the html tag:</p>
 
     <pre class="u-bg-gray-900 rounded-md u-text-white px-4">
       <code class="text-sm">
@@ -30,13 +24,8 @@
       </code>
     </pre>
 
-    <p>You can implement a toggle button easily by doing:</p>
+    <p>The `@nuxtjs/color-mode` module is now installed by default, you can easily implement a toggle button:</p>
 
-    <pre class="u-bg-gray-900 rounded-md u-text-white px-4">
-      <code class="text-sm">
-        {{ code2 }}
-      </code>
-    </pre>
     <pre class="u-bg-gray-900 rounded-md u-text-white px-4">
       <code class="text-sm">
         {{ code1 }}
@@ -63,19 +52,14 @@
 
 <script setup>
 const code1 = `
-<UseDark v-slot="{ isDark, toggleDark }">
-  <UButton variant="transparent" :icon="isDark ? 'heroicons-outline:moon' : 'heroicons-outline:sun'" @click="toggleDark()" />
-</UseDark>`
-const code2 = `
-import { UseDark } from '@vueuse/components'
-`
+const colorMode = useColorMode()
+const toggleDark = () => {
+  colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
+}`
 const code3 = `
 <div class="u-bg-gray-100 border u-border-gray-200 u-text-gray-700"></div>
 `
 const code4 = `
 <div class="bg-white dark:bg-black"></div>
 `
-const code5 = `
-yarn add @vueuse/components @vueuse/core
-`
 </script>