docs: handle dark mode

docs/app.vue

@@ -1,16 +1,22 @@
 <template>
-  <div class="bg-tw-gray-50">
+  <div>
     <UContainer class="pt-8 min-h-screen">
       <div class="lg:grid lg:grid-cols-12 lg:gap-10 lg:relative">
         <aside class="lg:flex lg:flex-col lg:relative pb-8 lg:pb-0 lg:sticky lg:top-0 px-4 sm:px-6 lg:px-0 lg:pt-8 lg:-mt-8 lg:self-start lg:col-span-3 lg:overflow-hidden lg:h-[calc(100vh-2rem)]" style="position: sticky;height: calc(100vh - 0rem);">
-          <NuxtLink to="/" class="block font-bold text-lg mb-6">
-            @nuxthq/ui
-          </NuxtLink>
+          <div class="flex items-center justify-between mb-6">
+            <NuxtLink to="/" class="block font-bold text-lg text-tw-gray-900">
+              @nuxthq/ui
+            </NuxtLink>
+
+            <UseDark v-slot="{ isDark, toggleDark }">
+              <UButton variant="transparent" size="sm" :icon="isDark ? 'heroicons-outline:moon' : 'heroicons-outline:sun'" @click="toggleDark()" />
+            </UseDark>
+          </div>
 
           <nav class="overflow-y-auto h-auto pb-12">
             <ul class="space-y-6">
               <li>
-                <ULink to="/examples" class="mb-3 uppercase tracking-wide font-semibold text-xs" active-class="text-primary-700" inactive-class="text-tw-gray-700 hover:text-tw-gray-900" exact>
+                <ULink to="/examples" class="mb-3 uppercase tracking-wide font-semibold text-xs" active-class="text-primary-600" inactive-class="text-tw-gray-700 hover:text-tw-gray-900" exact>
                   Examples
                 </ULink>
               </li>
@@ -23,7 +29,7 @@
                     <ULink
                       :to="`/components/${component}`"
                       class="relative block text-sm rounded-md"
-                      active-class="text-primary-700"
+                      active-class="text-primary-600"
                       inactive-class="text-tw-gray-500 hover:text-tw-gray-900"
                       exact
                     >
@@ -45,12 +51,14 @@
 </template>
 
 <script setup>
+import { UseDark } from '@vueuse/components'
+
 useMeta({
   title: '@nuxthq/ui',
   meta: [
     { name: 'viewport', content: 'width=device-width, initial-scale=1, maximum-scale=1' }
   ],
-  htmlAttrs: {
+  bodyAttrs: {
     class: 'bg-tw-gray-50'
   }
 })

docs/pages/components/[component].vue

@@ -1,5 +1,5 @@
 <template>
-  <UCard v-if="component" footer-class="px-4 py-4 sm:px-6 bg-tw-gray-100">
+  <UCard v-if="component" footer-class="px-4 py-4 sm:px-6">
     <div class="flex justify-center">
       <component :is="is" v-bind="boundProps" />
     </div>

docs/pages/examples.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="space-y-4">
-    <div class="pb-10 border-b border-gray-200 mb-10">
+    <div class="pb-10 border-b border-tw-gray-200 mb-10">
       <div>
-        <h1 class="inline-block text-3xl font-extrabold text-gray-900 tracking-tight">
+        <h1 class="inline-block text-3xl font-extrabold text-tw-gray-900 tracking-tight">
           Examples
         </h1>
       </div>
 
-      <p class="mt-1 text-lg text-gray-500">
+      <p class="mt-1 text-lg text-tw-gray-500">
         Examples of real-life usage of components.
       </p>
     </div>
@@ -45,11 +45,11 @@
             <UIcon name="heroicons-outline:exclamation" class="h-6 w-6 text-red-600" aria-hidden="true" />
           </div>
           <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
-            <h3 class="text-lg leading-6 font-medium text-gray-900">
+            <h3 class="text-lg leading-6 font-medium text-tw-gray-900">
               Deactivate account
             </h3>
             <div class="mt-2">
-              <p class="text-sm text-gray-500">
+              <p class="text-sm text-tw-gray-500">
                 Are you sure you want to deactivate your account? All of your data will be permanently removed from our servers forever. This action cannot be undone.
               </p>
             </div>
@@ -59,7 +59,7 @@
           <button type="button" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm" @click="open = false">
             Deactivate
           </button>
-          <button ref="cancelButtonRef" type="button" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:w-auto sm:text-sm" @click="open = false">
+          <button ref="cancelButtonRef" type="button" class="mt-3 w-full inline-flex justify-center rounded-md border border-tw-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-tw-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:w-auto sm:text-sm" @click="open = false">
             Cancel
           </button>
         </div>
@@ -124,10 +124,10 @@
                   <div v-html="item.icon" />
                 </div>
                 <div class="ml-4">
-                  <p class="text-sm font-medium text-gray-900">
+                  <p class="text-sm font-medium text-tw-gray-900">
                     {{ item.name }}
                   </p>
-                  <p class="text-sm text-gray-500">
+                  <p class="text-sm text-tw-gray-500">
                     {{ item.description }}
                   </p>
                 </div>
@@ -139,11 +139,11 @@
                 class="flow-root px-2 py-2 transition duration-150 ease-in-out rounded-md hover:bg-gray-100 focus:outline-none focus-visible:ring focus-visible:ring-orange-500 focus-visible:ring-opacity-50"
               >
                 <span class="flex items-center">
-                  <span class="text-sm font-medium text-gray-900">
+                  <span class="text-sm font-medium text-tw-gray-900">
                     Documentation
                   </span>
                 </span>
-                <span class="block text-sm text-gray-500">
+                <span class="block text-sm text-tw-gray-500">
                   Start integrating products and tools
                 </span>
               </a>
@@ -167,7 +167,7 @@
       <div class="font-medium text-sm mb-1 text-tw-gray-700">
         Toggle:
       </div>
-      <UToggle v-model="isSwitchEnabled" />
+      <UToggle v-model="isSwitchEnabled" icon-off="heroicons-solid:x" icon-on="heroicons-solid:check" />
     </div>
 
     <div>
@@ -177,11 +177,11 @@
 
       <UCard @submit.prevent="onSubmit">
         <UInputGroup label="Email" name="email" class="mb-3">
-          <UInput type="email" name="email" />
+          <UInput type="email" name="email" autofocus />
         </UInputGroup>
 
         <UInputGroup label="Description" name="description" class="mb-3">
-          <UTextarea v-model="description" type="description" name="description" autofocus autoresize />
+          <UTextarea v-model="description" type="description" name="description" autoresize />
         </UInputGroup>
 
         <UButton type="submit" label="Submit" />

docs/pages/index.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="space-y-4">
-    <div class="pb-10 border-b border-gray-200 mb-10">
+    <div class="pb-10 border-b border-tw-gray-200 mb-10">
       <div>
-        <h1 class="inline-block text-3xl font-extrabold text-gray-900 tracking-tight">
+        <h1 class="inline-block text-3xl font-extrabold text-tw-gray-900 tracking-tight">
           Documentation
         </h1>
       </div>
 
-      <p class="mt-1 text-lg text-gray-500">
+      <p class="mt-1 text-lg text-tw-gray-500">
         Components library as a Nuxt3 module using <a href="https://github.com/antfu/unocss" target="_blank">UnoCSS</a>.
       </p>
     </div>