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:
parent
c9cbd54fa3
commit
41166811dd
1 changed files with 69 additions and 20 deletions
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue