CSS: Dark Mode via prefers-color-scheme + Dolibarr Theme Fallback

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>
This commit is contained in:
Eduard Wisch 2026-02-20 19:29:34 +01:00
parent c9cbd54fa3
commit 41166811dd

View file

@ -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);
}
body.theme-eldy-dark .mod-stundenzettel .mobile-description-row,
body[class*="dark"] .mod-stundenzettel .mobile-description-row {
.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 {
.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 {
.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 {
.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 {
.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 {
.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 {
.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 {
.mod-stundenzettel .stz-current-stz {
background-color: var(--colorbacklineimpair2, #1e2e3a) !important;
}
body.theme-eldy-dark .mod-stundenzettel .info,
body[class*="dark"] .mod-stundenzettel .info {
.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 {
background: var(--colorbacklineimpair2, #2d2d2d) !important;
}
body.theme-eldy-dark.mod-stundenzettel .stz-info-box {
background-color: var(--colorbacklineimpair1, #2d2d2d) !important;
}
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 {
background-color: var(--colorbacktitle1, #333) !important;
}
body.theme-eldy-dark.mod-stundenzettel .stz-subtable-bg {
background-color: var(--colorbacklineimpair2, #2a2a2a) !important;
}
body.theme-eldy-dark.mod-stundenzettel .stz-subtable-header {
background-color: var(--colorbacktitle1, #333) !important;
}
body.theme-eldy-dark.mod-stundenzettel .stz-mehraufwand-header {
background-color: var(--colorbacklineimpair1, #1e3320) !important;
}
body.theme-eldy-dark.mod-stundenzettel .stz-current-stz {
background-color: var(--colorbacklineimpair2, #1e2e3a) !important;
}
body.theme-eldy-dark.mod-stundenzettel .info {
background-color: var(--colorbacklineimpair1, #2d2d2d) !important;
}