Update themes

src/composables/useTheme.ts

@@ -22,6 +22,12 @@ export const useTheme = () => {
         return 'text-red-500'
       case ColorsTheme.YELLOW:
         return 'text-yellow-500'
+      case ColorsTheme.FUCHSIA:
+        return 'text-fuchsia-500'
+      case ColorsTheme.PINK:
+        return 'text-pink-500'
+      case ColorsTheme.VIOLET:
+        return 'text-violet-500'
       case ColorsTheme.BLACK:
         return 'text-black dark:text-white'
       case ColorsTheme.WHITE:
@@ -47,6 +53,12 @@ export const useTheme = () => {
         return 'bg-red-500'
       case ColorsTheme.YELLOW:
         return 'bg-yellow-500'
+      case ColorsTheme.FUCHSIA:
+        return 'bg-fuchsia-500'
+      case ColorsTheme.PINK:
+        return 'bg-pink-500'
+      case ColorsTheme.VIOLET:
+        return 'bg-violet-500'
       case ColorsTheme.BLACK:
         return 'bg-black dark:bg-white dark:text-black text-white'
       case ColorsTheme.WHITE:

src/pages/index.vue

@@ -6,9 +6,10 @@ const { getThemeTextColor, getThemeBackgroundColor } = useTheme()
 
 onMounted(() => swapColor())
 
-const { query } = useRoute()
-const { $trpc } = useNuxtApp()
 const color = useColorMode()
+const { query } = useRoute()
+
+const { $trpc } = useNuxtApp()
 const user = await $trpc.hello.query({ name: query.name?.toString() })
 </script>
 
@@ -23,11 +24,10 @@ const user = await $trpc.hello.query({ name: query.name?.toString() })
     <div>
       Current color : {{ getColor }}
     </div>
-    <div>
-      Theme Name : {{ getTheme.name }}
-    </div>
-    <div>
-      Theme colors : {{ getTheme.colors.map((color) => color.charAt(0).toUpperCase() + color.slice(1)).join(', ') }}
+    <div my-12>
+      <div>Theme symbol : {{ getTheme.symbol }}</div>
+      <div>Theme Name : {{ getTheme.name }}</div>
+      <div>Theme colors : {{ getTheme.colors.map((color) => color.charAt(0).toUpperCase() + color.slice(1)).join(', ') }}</div>
     </div>
     <div @click="nextTheme()">
       setNextTheme()