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()

types.ts

@@ -10,9 +10,13 @@ export enum ColorsTheme {
   CYAN = 'cyan',
   BLACK = 'black',
   WHITE = 'white',
+  PINK = 'pink',
+  FUCHSIA = 'fuchsia',
+  VIOLET = 'violet',
 }
 
 export interface Theme {
+  symbol: String
   name: String
   colors: ColorsTheme[]
   availability?: {
@@ -23,6 +27,7 @@ export interface Theme {
 
 // Create the themes
 const RainbowTheme: Theme = {
+  symbol: '🌈',
   name: 'Rainbow',
   colors: [
     ColorsTheme.ORANGE,
@@ -36,6 +41,7 @@ const RainbowTheme: Theme = {
 }
 
 const XMasTheme: Theme = {
+  symbol: '🎄',
   name: 'Xmas',
   colors: [ColorsTheme.RED, ColorsTheme.GREEN],
   availability: {
@@ -45,6 +51,7 @@ const XMasTheme: Theme = {
 }
 
 const EasterTheme: Theme = {
+  symbol: '🐣',
   name: 'Easter',
   colors: [ColorsTheme.ROSE, ColorsTheme.YELLOW, ColorsTheme.CYAN],
   availability: {
@@ -54,11 +61,13 @@ const EasterTheme: Theme = {
 }
 
 const BlackAndWhiteTheme: Theme = {
+  symbol: '📺',
   name: 'B & W',
   colors: [ColorsTheme.BLACK, ColorsTheme.WHITE],
 }
 
 const HalloweenTheme: Theme = {
+  symbol: '🎃',
   name: 'Halloween',
   colors: [
     ColorsTheme.ORANGE,
@@ -73,10 +82,14 @@ const HalloweenTheme: Theme = {
 }
 
 const ValentineTheme: Theme = {
+  symbol: '💖',
   name: 'Valentine',
   colors: [
     ColorsTheme.RED,
     ColorsTheme.ROSE,
+    ColorsTheme.PINK,
+    ColorsTheme.FUCHSIA,
+    ColorsTheme.VIOLET,
   ],
   availability: {
     start: '12/02',