feat: dark mode different color

src/components/StatCardComponent.vue

@@ -6,6 +6,7 @@ const props = defineProps<{
     amount: number;
     label: string;
   }[];
+  dark?: boolean;
 }>();
 
 const color = ['pink', 'purple'];
@@ -15,7 +16,7 @@ const color = ['pink', 'purple'];
   <div
     class="row"
     style="gap: var(--size-4)"
-    :class="{ 'justify-between': $q.screen.lt.md }"
+    :class="{ 'justify-between': $q.screen.lt.md, dark }"
   >
     <AppBox
       v-for="(v, i) in props.branch"
@@ -38,7 +39,7 @@ const color = ['pink', 'purple'];
 
       <div class="column justify-around stat-card-content">
         <div class="col-4 text-h5 text-weight-bold">{{ v.amount }}</div>
-        <div class="text-weight-bold">{{ v.label }}</div>
+        <div class="text-weight-bold">{{ $t(v.label) }}</div>
       </div>
     </AppBox>
   </div>
@@ -77,4 +78,8 @@ svg {
 .color-pink {
   --_color-stat-card: var(--pink-6);
 }
+
+.dark .color-purple {
+  --_color-stat-card: var(--purple-8);
+}
 </style>