Working on dynamic theme

src/assets/css/main.scss

@@ -0,0 +1,4 @@
+body {
+  font-family: 'DM Sans', sans-serif;
+  @apply bg-gray-100 dark:bg-dark-900 dark:text-white duration-200
+}

src/composables/useTheme.ts

@@ -48,9 +48,9 @@ export const useTheme = () => {
       case ColorsTheme.YELLOW:
         return 'bg-yellow-500'
       case ColorsTheme.BLACK:
-        return 'bg-black dark:(bg-white text-black) text-white'
+        return 'bg-black dark:bg-white dark:text-black text-white'
       case ColorsTheme.WHITE:
-        return 'bg-black dark:(bg-white text-black) text-white'
+        return 'bg-black dark:bg-white dark:text-black text-white'
     }
   })
 

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>

src/server/trpc/routers/index.ts

@@ -8,7 +8,7 @@ export const appRouter = router({
     }))
     .query(({ input }) => {
       return {
-        greeting: `Hello ${input.name ?? 'world'}!`,
+        greeting: `Hello ${input.name ?? 'World'}!`,
       }
     }),
 })

src/store/theme.ts

@@ -7,20 +7,47 @@ export const useThemeStore = defineStore(
   () => {
     const currentTheme = ref<Theme>(Themes[THEMES.RainbowTheme])
     const currentColor = ref<ColorsTheme>(currentTheme.value.colors[0])
+    let intervalId: NodeJS.Timeout | null = null
+
+    const isAvailable = (next: Theme): boolean => {
+      if (!next.availability)
+        return true
+
+      const today = new Date()
+      const [startDay, startMonth] = next.availability.start.split('/')
+      const [endDay, endMonth] = next.availability.end.split('/')
+      const start = new Date(today.getFullYear(), Number(startMonth) - 1, Number(startDay))
+      const end = new Date(today.getFullYear(), Number(endMonth) - 1, Number(endDay))
+
+      return today >= start && today <= end
+    }
+
+    const swapColor = () => {
+      if (intervalId !== null)
+        clearInterval(intervalId)
+
+      intervalId = setInterval(() => {
+        const colors = currentTheme.value.colors
+        const currentIndex = colors.indexOf(currentColor.value)
+        const nextIndex = (currentIndex + 1) % colors.length
+        currentColor.value = colors[nextIndex]
+      }, 5000)
+    }
 
     const nextTheme = () => {
       const themes = Object.values(Themes)
       const currentIndex = themes.findIndex(theme => theme.name === currentTheme.value.name)
-      const nextIndex = (currentIndex + 1) % themes.length
+      let nextIndex = (currentIndex + 1) % themes.length
+
+      while (!isAvailable(themes[nextIndex])) {
+        nextIndex = (nextIndex + 1) % themes.length
+        if (nextIndex === currentIndex)
+          return
+      }
+
       currentTheme.value = themes[nextIndex]
       currentColor.value = currentTheme.value.colors[0]
-    }
-
-    const nextColor = () => {
-      const colors = currentTheme.value.colors
-      const currentIndex = colors.indexOf(currentColor.value)
-      const nextIndex = (currentIndex + 1) % colors.length
-      currentColor.value = colors[nextIndex]
+      swapColor()
     }
 
     const getTheme = computed(() => currentTheme)
@@ -30,7 +57,7 @@ export const useThemeStore = defineStore(
       getTheme,
       getColor,
       nextTheme,
-      nextColor,
+      swapColor,
     }
   },
   {