From 41166811dd7dd5c36a3ed6cd46aa0cb24bef97d1 Mon Sep 17 00:00:00 2001
From: data <data@data-it-solution.de>
Date: Fri, 20 Feb 2026 19:29:34 +0100
Subject: [PATCH] CSS: Dark Mode via prefers-color-scheme + Dolibarr Theme
 Fallback
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Hintergrundfarben-Klassen reagieren jetzt auf OS Dark Mode
(für Dark Reader und mobilen Dark Mode). Dolibarr theme-eldy-dark
als Fallback beibehalten.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 css/stundenzettel-mobile.css | 89 ++++++++++++++++++++++++++++--------
 1 file changed, 69 insertions(+), 20 deletions(-)

diff --git a/css/stundenzettel-mobile.css b/css/stundenzettel-mobile.css
index 6a1ae6a..6bd3c0e 100755
--- a/css/stundenzettel-mobile.css
+++ b/css/stundenzettel-mobile.css
@@ -394,55 +394,104 @@
 
 /* ============================================
    DARK MODE SUPPORT
+   Greift bei:
+   1. OS/Browser Dark Mode (prefers-color-scheme: dark)
+      → Funktioniert mit Dark Reader + Handy Dark Mode
+   2. Dolibarr Dark Theme (body.theme-eldy-dark)
    ============================================ */
-body.theme-eldy-dark .mod-stundenzettel .tabsAction,
-body[class*="dark"] .mod-stundenzettel .tabsAction {
+
+/* --- OS/Browser Dark Mode (Dark Reader, Handy Dark Mode) --- */
+@media (prefers-color-scheme: dark) {
+    .mod-stundenzettel .liste_titre th {
+        border-bottom: 2px solid rgba(255,255,255,0.15) !important;
+    }
+
+    .mod-stundenzettel .tabsAction {
+        background: var(--colorbackbody, #1e1e1e);
+        box-shadow: 0 -2px 8px rgba(0,0,0,0.4);
+    }
+
+    .mod-stundenzettel .mobile-description-row {
+        background: var(--colorbacklineimpair2, #2d2d2d) !important;
+    }
+
+    .mod-stundenzettel .stz-info-box {
+        background-color: var(--colorbacklineimpair1, #2d2d2d) !important;
+    }
+
+    .mod-stundenzettel .stz-warning-box {
+        background-color: var(--colorbacklineimpair1, #3a3520) !important;
+        border-left-color: #ffc107;
+    }
+
+    .mod-stundenzettel .stz-section-header {
+        background-color: var(--colorbacktitle1, #333) !important;
+    }
+
+    .mod-stundenzettel .stz-subtable-bg {
+        background-color: var(--colorbacklineimpair2, #2a2a2a) !important;
+    }
+
+    .mod-stundenzettel .stz-subtable-header {
+        background-color: var(--colorbacktitle1, #333) !important;
+    }
+
+    .mod-stundenzettel .stz-mehraufwand-header {
+        background-color: var(--colorbacklineimpair1, #1e3320) !important;
+    }
+
+    .mod-stundenzettel .stz-current-stz {
+        background-color: var(--colorbacklineimpair2, #1e2e3a) !important;
+    }
+
+    .mod-stundenzettel .info {
+        background-color: var(--colorbacklineimpair1, #2d2d2d) !important;
+    }
+}
+
+/* --- Dolibarr Dark Theme (Fallback) --- */
+body.theme-eldy-dark.mod-stundenzettel .liste_titre th {
+    border-bottom: 2px solid rgba(255,255,255,0.15) !important;
+}
+
+body.theme-eldy-dark.mod-stundenzettel .tabsAction {
     background: var(--colorbackbody, #1e1e1e);
     box-shadow: 0 -2px 8px rgba(0,0,0,0.4);
 }
 
-body.theme-eldy-dark .mod-stundenzettel .mobile-description-row,
-body[class*="dark"] .mod-stundenzettel .mobile-description-row {
+body.theme-eldy-dark.mod-stundenzettel .mobile-description-row {
     background: var(--colorbacklineimpair2, #2d2d2d) !important;
 }
 
-body.theme-eldy-dark .mod-stundenzettel .stz-info-box,
-body[class*="dark"] .mod-stundenzettel .stz-info-box {
+body.theme-eldy-dark.mod-stundenzettel .stz-info-box {
     background-color: var(--colorbacklineimpair1, #2d2d2d) !important;
 }
 
-body.theme-eldy-dark .mod-stundenzettel .stz-warning-box,
-body[class*="dark"] .mod-stundenzettel .stz-warning-box {
+body.theme-eldy-dark.mod-stundenzettel .stz-warning-box {
     background-color: var(--colorbacklineimpair1, #3a3520) !important;
     border-left-color: #ffc107;
 }
 
-body.theme-eldy-dark .mod-stundenzettel .stz-section-header,
-body[class*="dark"] .mod-stundenzettel .stz-section-header {
+body.theme-eldy-dark.mod-stundenzettel .stz-section-header {
     background-color: var(--colorbacktitle1, #333) !important;
 }
 
-body.theme-eldy-dark .mod-stundenzettel .stz-subtable-bg,
-body[class*="dark"] .mod-stundenzettel .stz-subtable-bg {
+body.theme-eldy-dark.mod-stundenzettel .stz-subtable-bg {
     background-color: var(--colorbacklineimpair2, #2a2a2a) !important;
 }
 
-body.theme-eldy-dark .mod-stundenzettel .stz-subtable-header,
-body[class*="dark"] .mod-stundenzettel .stz-subtable-header {
+body.theme-eldy-dark.mod-stundenzettel .stz-subtable-header {
     background-color: var(--colorbacktitle1, #333) !important;
 }
 
-body.theme-eldy-dark .mod-stundenzettel .stz-mehraufwand-header,
-body[class*="dark"] .mod-stundenzettel .stz-mehraufwand-header {
+body.theme-eldy-dark.mod-stundenzettel .stz-mehraufwand-header {
     background-color: var(--colorbacklineimpair1, #1e3320) !important;
 }
 
-body.theme-eldy-dark .mod-stundenzettel .stz-current-stz,
-body[class*="dark"] .mod-stundenzettel .stz-current-stz {
+body.theme-eldy-dark.mod-stundenzettel .stz-current-stz {
     background-color: var(--colorbacklineimpair2, #1e2e3a) !important;
 }
 
-body.theme-eldy-dark .mod-stundenzettel .info,
-body[class*="dark"] .mod-stundenzettel .info {
+body.theme-eldy-dark.mod-stundenzettel .info {
     background-color: var(--colorbacklineimpair1, #2d2d2d) !important;
 }