Working on dynamic theme

src/pages/index.vue

@@ -1,20 +1,23 @@
 <script setup lang="ts">
 import { useThemeStore } from '~/store/theme'
 
-const { getColor, getTheme, nextColor, nextTheme } = useThemeStore()
+const { getColor, getTheme, swapColor, nextTheme } = useThemeStore()
 const { getThemeTextColor, getThemeBackgroundColor } = useTheme()
 
+onMounted(() => swapColor())
+
 const { query } = useRoute()
 const { $trpc } = useNuxtApp()
+const color = useColorMode()
 const user = await $trpc.hello.query({ name: query.name?.toString() })
 </script>
 
 <template>
   <section>
-    <h1 :class="`text-sm ${getThemeTextColor}`">
+    <h1 :class="`${getThemeTextColor}`" duration="1000">
       Main page
     </h1>
-    <h1 :class="`${getThemeBackgroundColor}`">
+    <h1 :class="`${getThemeBackgroundColor}`" duration="1000">
       Main Page
     </h1>
     <div>
@@ -26,12 +29,12 @@ const user = await $trpc.hello.query({ name: query.name?.toString() })
     <div>
       Theme colors : {{ getTheme.colors.map((color) => color.charAt(0).toUpperCase() + color.slice(1)).join(', ') }}
     </div>
-    <div @click="nextColor()">
-      setNextColor()
-    </div>
     <div @click="nextTheme()">
       setNextTheme()
     </div>
+    <div @click="color.preference = color.value === 'dark' ? 'light' : 'dark'">
+      toggleDarkMode()
+    </div>
     <div>
       {{ user.greeting }}
     </div>