data/dolibarr.stundenzettel
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source 
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
1 changed files with 69 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

89
css/stundenzettel-mobile.css
View file

@ -394,55 +394,104 @@
/* ============================================ /* ============================================
DARK MODE SUPPORT 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); background: var(--colorbackbody, #1e1e1e);
box-shadow: 0 -2px 8px rgba(0,0,0,0.4); box-shadow: 0 -2px 8px rgba(0,0,0,0.4);
} }
body.theme-eldy-dark .mod-stundenzettel .mobile-description-row, body.theme-eldy-dark.mod-stundenzettel .mobile-description-row {
body[class*="dark"] .mod-stundenzettel .mobile-description-row {
background: var(--colorbacklineimpair2, #2d2d2d) !important; background: var(--colorbacklineimpair2, #2d2d2d) !important;
} }
body.theme-eldy-dark .mod-stundenzettel .stz-info-box, body.theme-eldy-dark.mod-stundenzettel .stz-info-box {
body[class*="dark"] .mod-stundenzettel .stz-info-box {
background-color: var(--colorbacklineimpair1, #2d2d2d) !important; background-color: var(--colorbacklineimpair1, #2d2d2d) !important;
} }
body.theme-eldy-dark .mod-stundenzettel .stz-warning-box, body.theme-eldy-dark.mod-stundenzettel .stz-warning-box {
body[class*="dark"] .mod-stundenzettel .stz-warning-box {
background-color: var(--colorbacklineimpair1, #3a3520) !important; background-color: var(--colorbacklineimpair1, #3a3520) !important;
border-left-color: #ffc107; border-left-color: #ffc107;
} }
body.theme-eldy-dark .mod-stundenzettel .stz-section-header, body.theme-eldy-dark.mod-stundenzettel .stz-section-header {
body[class*="dark"] .mod-stundenzettel .stz-section-header {
background-color: var(--colorbacktitle1, #333) !important; background-color: var(--colorbacktitle1, #333) !important;
} }
body.theme-eldy-dark .mod-stundenzettel .stz-subtable-bg, body.theme-eldy-dark.mod-stundenzettel .stz-subtable-bg {
body[class*="dark"] .mod-stundenzettel .stz-subtable-bg {
background-color: var(--colorbacklineimpair2, #2a2a2a) !important; background-color: var(--colorbacklineimpair2, #2a2a2a) !important;
} }
body.theme-eldy-dark .mod-stundenzettel .stz-subtable-header, body.theme-eldy-dark.mod-stundenzettel .stz-subtable-header {
body[class*="dark"] .mod-stundenzettel .stz-subtable-header {
background-color: var(--colorbacktitle1, #333) !important; background-color: var(--colorbacktitle1, #333) !important;
} }
body.theme-eldy-dark .mod-stundenzettel .stz-mehraufwand-header, body.theme-eldy-dark.mod-stundenzettel .stz-mehraufwand-header {
body[class*="dark"] .mod-stundenzettel .stz-mehraufwand-header {
background-color: var(--colorbacklineimpair1, #1e3320) !important; background-color: var(--colorbacklineimpair1, #1e3320) !important;
} }
body.theme-eldy-dark .mod-stundenzettel .stz-current-stz, body.theme-eldy-dark.mod-stundenzettel .stz-current-stz {
body[class*="dark"] .mod-stundenzettel .stz-current-stz {
background-color: var(--colorbacklineimpair2, #1e2e3a) !important; background-color: var(--colorbacklineimpair2, #1e2e3a) !important;
} }
body.theme-eldy-dark .mod-stundenzettel .info, body.theme-eldy-dark.mod-stundenzettel .info {
body[class*="dark"] .mod-stundenzettel .info {
background-color: var(--colorbacklineimpair1, #2d2d2d) !important; background-color: var(--colorbacklineimpair1, #2d2d2d) !important;
} }