docs: add dark mode to example

Author: codeacme17

example/package.json

@@ -10,7 +10,6 @@
     "type-check": "vue-tsc --noEmit"
   },
   "dependencies": {
-    "1llest-waveform-vue": "^1.0.3",
     "@vueuse/core": "^9.13.0",
     "nanoid": "^3.3.6",
     "sass": "^1.60.0",

example/pnpm-lock.yaml

@@ -3,8 +3,9 @@ import { reactive } from 'vue'
 import { useDark, useToggle } from '@vueuse/core'
 import { nanoid } from 'nanoid'
 import Demo from './components/Demo.vue'
-// import type { IllestWaveformProps } from '1llest-waveform-vue'
 import type { IllestWaveformProps } from '../../src/types/waveform'
+import SunIcon from '@/components/icons/Sun.vue'
+import MoonIcon from '@/components/icons/Moon.vue'
 
 type Props = {
   id: string
@@ -55,18 +56,32 @@ const items = reactive<Props[]>([
 
 <template>
   <section class="flex flex-col items-center">
-    <h1 class="flex flex-col items-center mt-2 mb-10">
+    <h1 class="flex flex-col items-center mt-2 mb-5">
       <img src="/favicon.svg" class="w-32 h-32" />
 
       <span class="ml-1 font-black text-[20px]">
         <span class="text-[24px]">1</span>LLEST-WAVEFORM-PLUGIN
       </span>
     </h1>
 
-    <div>
-      <button @click="toggleDark()">theme</button>
+    <div class="mb-6">
+      <button class="btn" @click="toggleDark()">
+        <SunIcon v-show="!isDark" />
+        <MoonIcon v-show="isDark" />
+        <div>{{ isDark ? 'dark' : 'light' }}</div>
+      </button>
     </div>
 
     <Demo v-for="item in items" :key="item.id" :props="item" />
   </section>
 </template>
+
+<style scoped lang="scss">
+.btn {
+  @apply flex items-center hover:opacity-80;
+
+  div {
+    @apply ml-1 mt-1;
+  }
+}
+</style>

example/src/App.vue

@@ -2,8 +2,6 @@
 import { onMounted, reactive, ref, watchEffect, defineProps } from 'vue'
 import type { Ref } from 'vue'
 import { useDark } from '@vueuse/core'
-// import { IllestWaveform } from '1llest-waveform-vue'
-// import type { IllestWaveformProps } from '1llest-waveform-vue'
 import IllestWaveform from '../../../src/components/IllestWaveform.vue'
 import type { IllestWaveformProps } from '../../../src/types/waveform'
 import '1llest-waveform-vue/dist/style.css'

example/src/components/Demo.vue

@@ -0,0 +1,16 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    class="feather feather-moon"
+  >
+    <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
+  </svg>
+</template>

example/src/components/icons/Moon.vue

@@ -0,0 +1,24 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    class="feather feather-sun"
+  >
+    <circle cx="12" cy="12" r="5"></circle>
+    <line x1="12" y1="1" x2="12" y2="3"></line>
+    <line x1="12" y1="21" x2="12" y2="23"></line>
+    <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
+    <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
+    <line x1="1" y1="12" x2="3" y2="12"></line>
+    <line x1="21" y1="12" x2="23" y2="12"></line>
+    <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
+    <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
+  </svg>
+</template>

example/src/components/icons/Sun.vue

@@ -9,7 +9,7 @@
 html {
   @apply text-slate-900 bg-white;
   font-family: "JetBrains Mono";
-  transition: background-color,color ease-in 0.2s
+  transition: all ease-in 0.2s
 }
 
 .dark {