added dark mode

src/pages/dashboard/components/dashboardItem.vue

@@ -28,25 +28,25 @@ const props = defineProps<Prop>()
 const bgColor = computed(() => {
   switch (props.color) {
     case 'fuchsia':
-      return 'bg-fuchsia-100'
+      return 'bg-fuchsia-100 dark:bg-fuchsia-500/20'
     case 'orange':
-      return 'bg-orange-100'
+      return 'bg-orange-100 dark:bg-orange-500/20'
     case 'green':
-      return 'bg-green-100'
+      return 'bg-green-100 dark:bg-green-500/20'
     case 'blue':
-      return 'bg-blue-100'
+      return 'bg-blue-100 dark:bg-blue-500/20'
   }
 })
 const textColor = computed(() => {
   switch (props.color) {
     case 'fuchsia':
-      return 'text-fuchsia-600'
+      return 'text-fuchsia-600 dark:text-fuchsia-300'
     case 'orange':
-      return 'text-orange-600'
+      return 'text-orange-600 dark:text-orange-300'
     case 'green':
-      return 'text-green-600'
+      return 'text-green-600 dark:text-green-300'
     case 'blue':
-      return 'text-blue-600'
+      return 'text-blue-600 dark:text-blue-300'
   }
 })
 </script>

src/pages/dashboard/index.vue

@@ -859,7 +859,9 @@ onMounted(() => {
 }
 
 .selected_item {
-@apply ! bg- [ #0A1B37 ] ! text-white rounded-lg;
+  background: #2563eb !important;
+  color: #fff !important;
+  border-radius: 0.5rem;
 }
 
 .dashboard-chart-toolbar {
@@ -869,10 +871,10 @@ onMounted(() => {
   gap: 0.5rem;
 
   button {
-    border: 1px solid #d1d5db;
+    border: 1px solid var(--admin-border-strong);
     border-radius: 0.5rem;
-    background: #fff;
-    color: #374151;
+    background: var(--admin-bg-elevated);
+    color: var(--admin-text);
     cursor: pointer;
     font-family: inherit;
     font-size: 0.75rem;
@@ -881,8 +883,8 @@ onMounted(() => {
 
     &.active,
     &:hover {
-      background: #0a1b37;
-      border-color: #0a1b37;
+      background: #2563eb;
+      border-color: #2563eb;
       color: #fff;
     }
   }