From 55bb2589a4bf0e4cc6779ee379cfa77a09496bd5 Mon Sep 17 00:00:00 2001
From: florianfederspiel <florian@fedeo.de>
Date: Wed, 18 Mar 2026 18:47:02 +0100
Subject: [PATCH] Fix Darkmode Dashboard

---
 frontend/pages/index.client.vue | 33 +++++++++++----------------------
 1 file changed, 11 insertions(+), 22 deletions(-)

diff --git a/frontend/pages/index.client.vue b/frontend/pages/index.client.vue
index a818b41..8fe7920 100644
--- a/frontend/pages/index.client.vue
+++ b/frontend/pages/index.client.vue
@@ -385,15 +385,15 @@ onBeforeUnmount(() => {
           :gs-min-w="widget.minW"
           :gs-min-h="widget.minH"
       >
-        <div class="grid-stack-item-content dashboard-grid-item">
-          <div class="dashboard-widget-card">
-            <div class="dashboard-widget-header">
+          <div class="grid-stack-item-content dashboard-grid-item">
+            <div class="dashboard-widget-card border border-gray-200 dark:border-gray-800">
+              <div class="dashboard-widget-header border-b border-gray-200 dark:border-gray-800">
               <div class="flex items-start justify-between gap-3">
                 <div class="min-w-0">
-                  <div :class="['dashboard-widget-drag-handle font-semibold text-gray-900 dark:text-white', isEditMode ? 'cursor-move' : 'cursor-default']">
+                  <div :class="['dashboard-widget-drag-handle font-semibold', isEditMode ? 'cursor-move' : 'cursor-default']">
                     {{ widget.title }}
                   </div>
-                  <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
+                  <p class="mt-1 text-sm">
                     {{ widget.description }}
                   </p>
                 </div>
@@ -430,8 +430,8 @@ onBeforeUnmount(() => {
       </div>
     </div>
 
-    <div v-else class="rounded-xl border border-dashed border-gray-300 bg-white p-10 text-center dark:border-gray-700 dark:bg-gray-900">
-      <p class="text-sm text-gray-500 dark:text-gray-400">
+    <div class="rounded-xl border border-dashed border-gray-300 dark:border-gray-700 p-10 text-center">
+      <p class="text-sm">
         Es sind aktuell keine Dashboard-Karten sichtbar.
       </p>
       <UButton v-if="isEditMode" class="mt-4" icon="i-heroicons-plus" @click="manageCardsOpen = true">
@@ -445,7 +445,7 @@ onBeforeUnmount(() => {
           <div class="flex items-center justify-between gap-3">
             <div>
               <h2 class="font-semibold">Dashboard-Karten</h2>
-              <p class="text-sm text-gray-500 dark:text-gray-400">
+              <p class="text-sm">
                 Karten ein- oder ausblenden und bei Bedarf auf das Standardlayout zurücksetzen.
               </p>
             </div>
@@ -459,11 +459,11 @@ onBeforeUnmount(() => {
           <div
             v-for="definition in DASHBOARD_WIDGETS"
             :key="definition.id"
-            class="flex items-center justify-between gap-3 rounded-lg border border-gray-200 px-4 py-3 dark:border-gray-800"
+            class="flex items-center justify-between gap-3 rounded-lg border border-gray-200 dark:border-gray-800 px-4 py-3"
           >
             <div>
-              <p class="font-medium text-gray-900 dark:text-white">{{ definition.title }}</p>
-              <p class="text-sm text-gray-500 dark:text-gray-400">{{ definition.description }}</p>
+              <p class="font-medium">{{ definition.title }}</p>
+              <p class="text-sm">{{ definition.description }}</p>
             </div>
 
             <UButton
@@ -508,14 +508,11 @@ onBeforeUnmount(() => {
   flex-direction: column;
   overflow: hidden;
   border-radius: 0.75rem;
-  border: 1px solid rgb(229 231 235);
-  background: white;
   box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
 }
 
 .dashboard-widget-header {
   flex: 0 0 auto;
-  border-bottom: 1px solid rgb(229 231 235);
   padding: 1rem 1rem 0.875rem;
 }
 
@@ -553,12 +550,4 @@ onBeforeUnmount(() => {
   display: none;
 }
 
-:deep(.dark .dashboard-widget-card) {
-  border-color: rgb(31 41 55);
-  background: rgb(17 24 39);
-}
-
-:deep(.dark .dashboard-widget-header) {
-  border-color: rgb(31 41 55);
-}
 </style>