From a1cf9b203f6e1ab0c83779816ebee3cdc4bfad81 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Wed, 24 Nov 2021 18:37:50 +0100
Subject: [PATCH] docs: improve

---
 docs/app.vue         |  8 ++++-
 docs/pages/dark.vue  | 74 ++++++++++++++++++++++++++++++++++++++++++++
 docs/pages/index.vue |  2 +-
 3 files changed, 82 insertions(+), 2 deletions(-)
 create mode 100644 docs/pages/dark.vue

diff --git a/docs/app.vue b/docs/app.vue
index 2a2eb96d..114d07f4 100644
--- a/docs/app.vue
+++ b/docs/app.vue
@@ -55,7 +55,7 @@
 import { UseDark } from '@vueuse/components'
 
 const sections = [
-  { label: 'Getting Started', links: [{ label: 'Installation', to: '/' }, { label: 'Examples', to: '/examples' }, { label: 'Migration', to: '/migration' }] },
+  { label: 'Getting Started', links: [{ label: 'Installation', 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' }, { label: 'Link', to: '/components/Link' }, { label: 'Toggle', to: '/components/Toggle' }] },
   { label: 'Feedback', links: [{ label: 'Alert', to: '/components/Alert' }] },
   { label: 'Forms', links: [{ label: 'Checkbox', to: '/components/Checkbox' }, { label: 'Input', to: '/components/Input' }, { label: 'InputGroup', to: '/components/InputGroup' }, { label: 'Radio', to: '/components/Radio' }, { label: 'RadioGroup', to: '/components/RadioGroup' }, { label: 'Select', to: '/components/Select' }, { label: 'SelectCustom', to: '/components/SelectCustom' }, { label: 'Textarea', to: '/components/Textarea' }] },
@@ -64,3 +64,9 @@ const sections = [
   { label: 'Overlays', links: [{ label: 'Modal', to: '/components/Modal' }, { label: 'Notification', to: '/components/Notification' }, { label: 'Popover', to: '/components/Popover' }, { label: 'Slideover', to: '/components/Slideover' }, { label: 'Tooltip', to: '/components/Tooltip' }] }
 ]
 </script>
+
+<style>
+html.dark {
+  background-color: black;
+}
+</style>
diff --git a/docs/pages/dark.vue b/docs/pages/dark.vue
new file mode 100644
index 00000000..6feaadaa
--- /dev/null
+++ b/docs/pages/dark.vue
@@ -0,0 +1,74 @@
+<template>
+  <div class="space-y-4">
+    <div class="pb-10 border-b u-border-gray-200 mb-10">
+      <div>
+        <h1 class="inline-block text-3xl font-extrabold u-text-gray-900 tracking-tight">
+          Dark mode
+        </h1>
+      </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>.
+      </p>
+    </div>
+
+    <h2 class="font-bold text-2xl u-text-gray-900">
+      Usage
+    </h2>
+
+    <p>VueUse <a href="https://vueuse.org/core/useDark" target="_blank" class="underline">useDark</a> composable is instancied through a plugin injected by the module.</p>
+
+    <p>This composable makes use of the `dark` class on the html tag so you can easily take advantage of the UnoCSS `dark` variant.</p>
+
+    <pre class="u-bg-gray-900 rounded-md u-text-white px-4">
+      <code class="text-sm">
+        {{ code4 }}
+      </code>
+    </pre>
+
+    <p>You can implement a toggle button easily by doing:</p>
+
+    <pre class="u-bg-gray-900 rounded-md u-text-white px-4">
+      <code class="text-sm">
+        {{ code1 }}
+      </code>
+    </pre>
+    <pre class="u-bg-gray-900 rounded-md u-text-white px-4">
+      <code class="text-sm">
+        {{ code2 }}
+      </code>
+    </pre>
+
+    <h2 class="font-bold text-2xl u-text-gray-900">
+      Shortcuts
+    </h2>
+
+    <p>A number of shortcuts are available to make your life with colors easier.</p>
+
+    <p>For each color utilities: `bg`, `text`, `border`, `ring` and `divide`, shortcuts for `white`, `black` and `gray` colors are generated (based on your prefix `u` by default) that handles the dark mode automatically:</p>
+
+    <pre class="u-bg-gray-900 rounded-md u-text-white px-4">
+      <code class="text-sm">
+        {{ code3 }}
+      </code>
+    </pre>
+
+    <p>For example `u-bg-gray-100` is a shortcut for `bg-gray-100 dark:bg-gray-800`. Take a look at the <a href="https://github.com/nuxtlabs/ui/blob/dev/src/index.ts#L61" target="_blank" class="underline">shortcuts definitions</a>.</p>
+  </div>
+</template>
+
+<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 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>
+`
+</script>
diff --git a/docs/pages/index.vue b/docs/pages/index.vue
index 92f74216..8c618c9d 100644
--- a/docs/pages/index.vue
+++ b/docs/pages/index.vue
@@ -8,7 +8,7 @@
       </div>
 
       <p class="mt-1 text-lg u-text-gray-500">
-        Components library as a Nuxt3 module using <a href="https://github.com/antfu/unocss" target="_blank">UnoCSS</a>.
+        Components library as a Nuxt3 module using <a href="https://github.com/antfu/unocss" target="_blank" class="underline">UnoCSS</a>.
       </p>
     </div>