Add AMOLED switch component and update usage

docs/.vitepress/theme/components/ColorPicker.vue

@@ -2,7 +2,7 @@
 import { colors } from '@fmhy/colors'
 import { useStorage, useStyleTag } from '@vueuse/core'
 import { watch, onMounted } from 'vue'
-import Switch from './Switch.vue'
+import amoledswitch from './amoledswitch.vue'
 
 const colorScales = [
   '50',
@@ -135,7 +135,7 @@ const normalizeColorName = (colorName: string) =>
     <!-- AMOLED toggle -->
     <div class="mt-4 flex items-center gap-2">
       <span class="text-sm text-$vp-c-text-2">AMOLED</span>
-      <Switch v-model="isAmoledMode" />
+      <amoledswitch v-model="isAmoledMode" />
     </div>
   </div>
 </template>

docs/.vitepress/theme/components/Switch.vue

@@ -2,11 +2,11 @@
 import { Switch } from '@headlessui/vue'
 import { ref } from 'vue'
 
-const model = defineModel()
+const enabled = defineModel({ default: false })
 </script>
 
 <template>
-  <Switch v-model="model" class="switch" :class="{ enabled: model }">
+  <Switch v-model="enabled" class="switch" :class="{ enabled }">
     <span class="thumb" />
   </Switch>
 </template>

docs/.vitepress/theme/components/amoledswitch.vue

@@ -0,0 +1,52 @@
+<script setup>
+import { Switch } from '@headlessui/vue'
+import { ref } from 'vue'
+
+const enabled = defineModel({ default: false })
+</script>
+
+<template>
+  <Switch v-model="enabled" class="switch" :class="{ enabled }">
+    <span class="thumb" />
+  </Switch>
+</template>
+
+<style>
+.switch {
+  display: inline-flex;
+  position: relative;
+  width: 40px;
+  height: 22px;
+  flex-shrink: 0;
+  border: 1px solid var(--vp-input-border-color);
+  background-color: var(--vp-input-switch-bg-color);
+  transition:
+    border-color 0.25s,
+    background-color 0.4s ease;
+  border-radius: 11px;
+}
+
+.switch.enabled {
+  background-color: var(--vp-c-brand);
+}
+</style>
+
+<style scoped>
+.switch:hover {
+  border-color: var(--vp-input-hover-border-color);
+}
+
+.thumb {
+  display: inline-block;
+  background-color: #fff;
+  transition: transform 0.25s;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  box-shadow: var(--vp-shadow-1);
+}
+
+.switch.enabled .thumb {
+  transform: translateX(18px);
+}
+</style>