Merge b607799836 into c7ff01183d

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

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { colors } from '@fmhy/colors'
 import { useStorage, useStyleTag } from '@vueuse/core'
-import { watch, onMounted } from 'vue'
+import { watch, onMounted, nextTick } from 'vue'
-import Switch from './Switch.vue'
+import amoledswitch from './amoledswitch.vue'
 
 const colorScales = [
   '50',
@@ -91,13 +91,19 @@ const updateThemeColor = (colorName: ColorNames, amoledEnabled: boolean) => {
   `
 }
 
-onMounted(() => {
+onMounted(async () => {
+  // Wait for next tick to ensure DOM is ready
+  await nextTick()
+  
+  // Small delay to ensure VitePress dark mode is initialized
+  setTimeout(() => {
     if (isAmoledMode.value) {
       document.documentElement.classList.add('theme-amoled')
     }
     
-  // Re-apply the theme to ensure everything is initialized
+    // Force re-apply the theme
     updateThemeColor(selectedColor.value, isAmoledMode.value)
+  }, 100)
 })
 
 watch([selectedColor, isAmoledMode], ([color, amoled]) => {
@@ -135,7 +141,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" @click="isAmoledMode = !isAmoledMode" />
+      <amoledswitch v-model="isAmoledMode" />
     </div>
   </div>
 </template>

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

@@ -2,7 +2,7 @@
 import { Switch } from '@headlessui/vue'
 import { ref } from 'vue'
 
-const enabled = ref(false)
+const enabled = defineModel({ default: false })
 </script>
 
 <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>