/** * AccessGranted – Dark Mode Overlay * --------------------------------- * Kanonische Quelle: shared/ui-dark-mode/dark-mode.css * Identisch kopiert nach: * - app.access-granted.de/ui/assets/css/dark-mode.css * - internal.access-granted.de/ui/assets/css/dark-mode.css * - admin.access-granted.de/ui/assets/css/dark-mode.css * (siehe CLAUDE.md, Abschnitt "Dark Mode" - jede der 3 Apps ist ein eigener, * unabhaengiger Webroot ohne gemeinsame Auslieferung von /shared/, deshalb * physische Kopie statt Symlink/Include. Bei Aenderungen bitte hier UND in * allen 3 Kopien nachziehen.) * * Aktiviert wird Dark Mode ausschliesslich ueber das Attribut * data-bs-theme="dark" auf (siehe theme-toggle.js). Bootstrap 5.3 * bringt fuer seine eigenen Komponenten (Formulare, Dropdowns, Modals, * Tabellen, Buttons, Alerts, Badges, Pagination, ...) bereits vollstaendigen * nativen Dark-Mode-Support ueber genau dieses Attribut mit - die Regeln * unten decken NUR ab, was das NiceAdmin-Template (style.css) und einzelne * Templates mit eigenen, hart codierten Inline-Farben zusaetzlich ueberschreiben * und dadurch selbst wieder dark-mode-tauglich gemacht werden muessen. * * Aufbau dieser Datei: * 1. Basis (html/body/Links) * 2. NiceAdmin-Template-Komponenten (Header, Sidebar, Cards, Dropdowns, ...) * 3. simple-datatables (einzige tatsaechlich genutzte Tabellen-/Such-Widget-Lib) * 4. Formulare/Modals/Vault - Detailkorrekturen, die Bootstrap nicht von allein loest * 5. Theme-Toggle-Button (Header-Icon) * 6. Login-Seiten (eigenes, separates Template - login100 by colorlib) * 7. Generische Ueberschreibung hart codierter Inline-style-Farben * (automatisch aus der tatsaechlich in allen 3 Apps verwendeten Farbpalette * erzeugt - siehe Kommentar dort fuer die Regeln) */ /* ========================================================================== 1. Basis ========================================================================== */ /* Bootstrap selbst ist bereits vollstaendig dark-mode-faehig, zieht seine Farben dafuer aber aus eigenen CSS-Variablen (--bs-body-bg, --bs-border-color, --bs-secondary-bg, ...), die es fuer [data-bs-theme=dark] auf neutrales Grau setzt (z.B. --bs-body-bg:#212529) - unabhaengig davon, was WIR weiter unten auf dem konkreten -Element setzen. Jede Komponente, die intern var(--bs-body-bg)/var(--bs-border-color)/var(--bs-secondary-bg) verwendet (z.B. .table, dessen Zellen-Hintergrund exakt var(--bs-body-bg) ist!), bekaeme sonst weiterhin Bootstraps neutrales Grau statt unser Navy-Blau - das war die Ursache fuer "an manchen Stellen ist noch das alte Grau da" (Tabellen, Listen, Formulare). Deshalb hier die Variablen selbst ueberschreiben statt nur einzelne Komponenten. */ [data-bs-theme="dark"] { color-scheme: dark; --bs-body-color: #e4e6eb; --bs-body-bg: #030d1d; --bs-emphasis-color: #fff; --bs-secondary-color: rgba(228, 230, 235, 0.75); --bs-secondary-bg: #04182F; --bs-tertiary-color: rgba(228, 230, 235, 0.5); --bs-tertiary-bg: #0a2540; --bs-border-color: #0a2540; --bs-border-color-translucent: rgba(125, 177, 255, 0.15); --bs-link-color: #7db1ff; --bs-link-hover-color: #a4c8ff; --bs-link-color-rgb: 125, 177, 255; --bs-link-hover-color-rgb: 164, 200, 255; } [data-bs-theme="dark"] body { background: #030d1d !important; color: #e4e6eb; } /* :not(.btn) ist Pflicht: ein (Link, der wie ein Button aussieht - sehr haeufig fuer "Neues X anlegen"-Buttons) ist auch ein -Element. Ohne :not(.btn) gewinnt diese Regel gegen Bootstraps eigene .btn-primary-Regel (per Spezifitaet: Element+Attribut > nur Klasse) und macht aus dem eigentlich weissen Button-Text ploetzlich helles Blau - auf einem blauen Button dann kaum noch lesbar. */ [data-bs-theme="dark"] a:not(.btn) { color: #7db1ff; } [data-bs-theme="dark"] a:not(.btn):hover { color: #a4c8ff; } [data-bs-theme="dark"] hr { border-color: #0a2540; opacity: 1; } [data-bs-theme="dark"] ::selection { background: #3a5a8f; color: #fff; } /* Scrollbar (webkit) */ [data-bs-theme="dark"] ::-webkit-scrollbar { background-color: #030d1d; } [data-bs-theme="dark"] ::-webkit-scrollbar-thumb { background-color: #12406b; } /* ========================================================================== 2. NiceAdmin-Template (ui/assets/css/style.css) - identisch in allen 3 Apps ========================================================================== */ [data-bs-theme="dark"] .pagetitle h1 { color: #cfe0ff; } /* Dropdown menus */ [data-bs-theme="dark"] .dropdown-menu { background-color: #04182F; box-shadow: 0 5px 30px 0 rgba(0, 0, 0, 0.45); border: 1px solid #0a2540; } [data-bs-theme="dark"] .dropdown-menu .dropdown-footer a { color: #e4e6eb; } [data-bs-theme="dark"] .dropdown-menu .dropdown-divider { border-color: #0a2540; } [data-bs-theme="dark"] .dropdown-menu .dropdown-item { color: #e4e6eb; } [data-bs-theme="dark"] .dropdown-menu .dropdown-item:hover, [data-bs-theme="dark"] .dropdown-menu .dropdown-item:focus { background-color: #0d2844; color: #fff; } [data-bs-theme="dark"] .dropdown-menu-arrow::before { background: #04182F; border-top-color: #0a2540; border-left-color: #0a2540; } /* Light Backgrounds (badges) - bewusst NICHT auf reines Grau abgedunkelt, diese sind bereits eigenstaendige, gut lesbare Text/Hintergrund-Paare (siehe .badge-*-light zusammen mit Bootstrap .text-*-emphasis-Klassen), nur die Flaeche wird ans dunkle Theme angepasst, kraeftiger getoent statt blass, damit der (dunkle) Text darauf weiterhin lesbar bleibt. */ [data-bs-theme="dark"] .bg-primary-light { background-color: #1d3a66; border-color: #1d3a66; color: #cfe2ff; } [data-bs-theme="dark"] .bg-secondary-light { background-color: #383a3d; border-color: #383a3d; color: #e2e3e5; } [data-bs-theme="dark"] .bg-success-light { background-color: #1c3a2c; border-color: #1c3a2c; color: #d1e7dd; } [data-bs-theme="dark"] .bg-danger-light { background-color: #4a2226; border-color: #4a2226; color: #f8d7da; } [data-bs-theme="dark"] .bg-warning-light { background-color: #4a3c15; border-color: #4a3c15; color: #fff3cd; } [data-bs-theme="dark"] .bg-info-light { background-color: #17414a; border-color: #17414a; color: #cff4fc; } [data-bs-theme="dark"] .bg-dark-light { background-color: #3a3a3c; border-color: #3a3a3c; color: #d3d3d4; } /* Card */ [data-bs-theme="dark"] .card { background-color: #04182F; box-shadow: 0 0 20px rgba(0, 0, 0, 0.35); } [data-bs-theme="dark"] .card-header, [data-bs-theme="dark"] .card-footer { border-color: #0a2540; background-color: #04182F; color: #a9b4cc; } [data-bs-theme="dark"] .card-title { color: #cfe0ff; } [data-bs-theme="dark"] .card-title span { color: #8b96ad; } [data-bs-theme="dark"] .card-img-overlay { background-color: rgba(18, 20, 26, 0.65); } /* Accordion */ [data-bs-theme="dark"] .accordion-item { border-color: #0a2540; background-color: #04182F; } [data-bs-theme="dark"] .accordion-button:not(.collapsed) { color: #cfe0ff; background-color: #04182F; } [data-bs-theme="dark"] .accordion-flush .accordion-button:not(.collapsed) { color: #7db1ff; } [data-bs-theme="dark"] .accordion-flush .accordion-body { color: #b7c2d9; } /* Breadcrumbs */ [data-bs-theme="dark"] .breadcrumb, [data-bs-theme="dark"] .breadcrumb a, [data-bs-theme="dark"] .breadcrumb .breadcrumb-item::before { color: #8b96ad; } [data-bs-theme="dark"] .breadcrumb a:hover, [data-bs-theme="dark"] .breadcrumb .active { color: #cfe0ff; } /* Bordered Tabs */ [data-bs-theme="dark"] .nav-tabs-bordered { border-bottom-color: #0a2540; } [data-bs-theme="dark"] .nav-tabs-bordered .nav-link { color: #c7d1e6; } [data-bs-theme="dark"] .nav-tabs-bordered .nav-link.active { background-color: #04182F; color: #7db1ff; border-bottom-color: #7db1ff; } /* Header */ [data-bs-theme="dark"] .logo span { color: #cfe0ff; } [data-bs-theme="dark"] .header { background-color: #030d1d; box-shadow: 0 2px 20px rgba(0, 0, 0, 0.4); } [data-bs-theme="dark"] .header .toggle-sidebar-btn { color: #cfe0ff; } [data-bs-theme="dark"] .header .search-form input { color: #e4e6eb; background: #04182F; border-color: #0a2540; } [data-bs-theme="dark"] .header .search-form button i { color: #cfe0ff; } @media (max-width: 1199px) { [data-bs-theme="dark"] .header .search-bar { background: #030d1d; box-shadow: 0 0 15px rgba(0, 0, 0, 0.45); } } /* Header nav / profile dropdown */ [data-bs-theme="dark"] .header-nav .nav-icon, [data-bs-theme="dark"] .header-nav .nav-profile { color: #cfe0ff; } [data-bs-theme="dark"] .header-nav .notifications .notification-item p, [data-bs-theme="dark"] .header-nav .messages .message-item p { color: #8b96ad; } [data-bs-theme="dark"] .header-nav .notifications .notification-item:hover, [data-bs-theme="dark"] .header-nav .messages .message-item:hover, [data-bs-theme="dark"] .header-nav .profile .dropdown-item:hover { background-color: #0d2844; } [data-bs-theme="dark"] .header-nav .messages .message-item h4, [data-bs-theme="dark"] .header-nav .profile .dropdown-header h6 { color: #e4e6eb; } /* Sidebar */ [data-bs-theme="dark"] .sidebar { background-color: #030d1d; box-shadow: 0 0 20px rgba(0, 0, 0, 0.4); scrollbar-color: #12406b transparent; } [data-bs-theme="dark"] .sidebar::-webkit-scrollbar { background-color: #030d1d; } [data-bs-theme="dark"] .sidebar::-webkit-scrollbar-thumb { background-color: #12406b; } [data-bs-theme="dark"] .sidebar-nav .nav-heading { color: #8b96ad; } [data-bs-theme="dark"] .sidebar-nav .nav-link { color: #a9c6ff; background: #0A3570; } [data-bs-theme="dark"] .sidebar-nav .nav-link i { color: #a9c6ff; } [data-bs-theme="dark"] .sidebar-nav .nav-link.collapsed { color: #cfe0ff; background: transparent; } [data-bs-theme="dark"] .sidebar-nav .nav-link.collapsed i { color: #8b96ad; } [data-bs-theme="dark"] .sidebar-nav .nav-link:hover, [data-bs-theme="dark"] .sidebar-nav .nav-link:hover i { color: #a9c6ff; background: #0A3570; } [data-bs-theme="dark"] .sidebar-nav .nav-content a { color: #cfe0ff; } [data-bs-theme="dark"] .sidebar-nav .nav-content a:hover, [data-bs-theme="dark"] .sidebar-nav .nav-content a.active { color: #7db1ff; } [data-bs-theme="dark"] .sidebar-nav .nav-content a.active i { background-color: #7db1ff; } /* Dashboard widgets */ [data-bs-theme="dark"] .dashboard .filter .icon { color: #8b96ad; } [data-bs-theme="dark"] .dashboard .filter .dropdown-header h6 { color: #8b96ad; } [data-bs-theme="dark"] .dashboard .info-card h6 { color: #cfe0ff; } [data-bs-theme="dark"] .dashboard .sales-card .card-icon { color: #8fb4ff; background: #1a2540; } [data-bs-theme="dark"] .dashboard .revenue-card .card-icon { color: #6fe3a0; background: #123522; } [data-bs-theme="dark"] .dashboard .customers-card .card-icon { color: #ffab6e; background: #402a17; } [data-bs-theme="dark"] .dashboard .activity .activite-label { color: #8b96ad; } [data-bs-theme="dark"] .dashboard .activity .activite-label::before { background-color: #0d2844; } [data-bs-theme="dark"] .dashboard .activity .activity-badge { border-color: #04182F; } [data-bs-theme="dark"] .dashboard .news h4 a { color: #cfe0ff; } [data-bs-theme="dark"] .dashboard .news p { color: #a9b4cc; } [data-bs-theme="dark"] .dashboard .recent-sales .table thead, [data-bs-theme="dark"] .dashboard .top-selling .table thead { background: #0A3570; } /* Icons list page */ [data-bs-theme="dark"] .iconslist .icon { background-color: #04182F; color: #cfe0ff; } [data-bs-theme="dark"] .iconslist .label { color: #a9b4cc; } /* Profile page */ [data-bs-theme="dark"] .profile .profile-card h2 { color: #e4e6eb; } [data-bs-theme="dark"] .profile .profile-card .social-links a { color: #7db1ff; } [data-bs-theme="dark"] .profile .profile-card .social-links a:hover { color: #cfe0ff; } [data-bs-theme="dark"] .profile .profile-overview .card-title, [data-bs-theme="dark"] .profile .profile-overview .label, [data-bs-theme="dark"] .profile .profile-edit label { color: #a9c6ff; } /* Error 404 */ [data-bs-theme="dark"] .error-404 h2 { color: #cfe0ff; } /* Footer */ [data-bs-theme="dark"] .footer { border-top-color: #0a2540; } [data-bs-theme="dark"] .footer .copyright, [data-bs-theme="dark"] .footer .credits { color: #a9b4cc; } /* ========================================================================== 3. simple-datatables (ui/assets/vendor/simple-datatables/style.css) ========================================================================== */ [data-bs-theme="dark"] .datatable-wrapper.no-header .datatable-container, [data-bs-theme="dark"] .datatable-wrapper.no-footer .datatable-container, [data-bs-theme="dark"] .datatable-table > thead > tr > th, [data-bs-theme="dark"] .datatable-table > tfoot > tr > th { border-color: #0a2540; } [data-bs-theme="dark"] .datatable-input, [data-bs-theme="dark"] .datatable-selector { background-color: #04182F; color: #e4e6eb; border-color: #0a2540; } [data-bs-theme="dark"] .datatable-info { color: #a9b4cc; } [data-bs-theme="dark"] .datatable-pagination a, [data-bs-theme="dark"] .datatable-pagination button { color: #c7d1e6; } [data-bs-theme="dark"] .datatable-pagination a:hover, [data-bs-theme="dark"] .datatable-pagination button:hover, [data-bs-theme="dark"] .datatable-pagination .datatable-active a, [data-bs-theme="dark"] .datatable-pagination .datatable-active button { background-color: #0d2844; } [data-bs-theme="dark"] .datatable-sorter::before { border-top-color: #c7d1e6; } [data-bs-theme="dark"] .datatable-sorter::after { border-bottom-color: #c7d1e6; } [data-bs-theme="dark"] .datatable-filter::before { border-top-color: #c7d1e6; } /* ========================================================================== 4. Formulare / Modals / sonstige Feinkorrekturen ========================================================================== */ /* Bootstrap deckt .form-control/.form-select/.modal-content/.table etc. schon selbst ueber data-bs-theme ab - hier nur Faelle, die im Zusammenspiel mit den obigen Template-Overrides sonst falsch/inkonsistent aussehen wuerden. */ /* .table-light/.table-dark/.table-secondary (oft auf genutzt, z.B. ) sind wie .bg-light/.text-dark FEST codierte Bootstrap-Utilities, NICHT automatisch dark-mode-faehig - sie haben ihre eigenen --bs-table-*-Variablen, die Bootstraps allgemeine [data-bs-theme=dark] .table-Anpassung ignorieren. Ohne diesen Fix blieb z.B. der Tabellenkopf in admin/offer.html (Positionen) und admin/scheduling.html (Buchungen) als helles Rechteck auf der sonst dunklen Seite stehen. */ [data-bs-theme="dark"] .table-light { --bs-table-color: #e4e6eb; --bs-table-bg: #0a2540; --bs-table-border-color: #12406b; --bs-table-striped-bg: #0d2844; --bs-table-striped-color: #e4e6eb; --bs-table-active-bg: #12406b; --bs-table-active-color: #e4e6eb; --bs-table-hover-bg: #0d2844; --bs-table-hover-color: #e4e6eb; } [data-bs-theme="dark"] .table-secondary { --bs-table-color: #e4e6eb; --bs-table-bg: #262b36; --bs-table-border-color: #3a3f4f; } [data-bs-theme="dark"] .form-control::placeholder, [data-bs-theme="dark"] .form-select::placeholder { color: #6b7488; } [data-bs-theme="dark"] .form-control:disabled, [data-bs-theme="dark"] .form-control[readonly] { background-color: #030d1d; color: #8b96ad; } [data-bs-theme="dark"] .form-check-label { color: #e4e6eb; } [data-bs-theme="dark"] .text-muted { color: #8b96ad !important; } [data-bs-theme="dark"] .list-group-item { background-color: #04182F; border-color: #0a2540; color: #e4e6eb; } [data-bs-theme="dark"] .list-group-item-action:hover, [data-bs-theme="dark"] .list-group-item-action:focus { background-color: #0d2844; color: #e4e6eb; } [data-bs-theme="dark"] .table > :not(caption) > * > * { border-bottom-color: #0a2540; } [data-bs-theme="dark"] .modal-header, [data-bs-theme="dark"] .modal-footer { border-color: #0a2540; } [data-bs-theme="dark"] code { color: #f2a5c4; background: #030d1d; border-radius: 3px; padding: 0 3px; } [data-bs-theme="dark"] pre { background: #030d1d; color: #e4e6eb; } /* Vault (verschluesselte Notizen/Dateien, admin+internal): schlichter Passwort-/Text-Bereich, muss auch verschluesselt-vs-entschluesselt gut lesbar bleiben - reine Bootstrap-Klassen, kein Extra-Fix noetig, hier nur zur Doku, dass das beim Testen bewusst mitgeprueft wurde. */ /* .btn-outline-* (Bootstrap): Text-/Rahmenfarbe ist bei Bootstrap fest codiert (nicht ueber [data-bs-theme=dark] angepasst, siehe bootstrap.css) und fuer WEISSEN Hintergrund gedacht - auf unserem dunklen Navy wirken z.B. #0d6efd (outline-primary) oder gar #212529 (outline-dark, fast schwarzer Text auf fast schwarzem Grund!) zu kontrastarm/"nicht optimal lesbar". Nur die Ruhe-Zustandsfarbe (Text+Rahmen) wird aufgehellt, der Hover-Zustand bleibt die volle Bootstrap-Farbe (dort wird der Button ja gefuellt, Text wird dann ohnehin weiss). */ [data-bs-theme="dark"] .btn-outline-primary { --bs-btn-color: #7db1ff; --bs-btn-border-color: #7db1ff; } [data-bs-theme="dark"] .btn-outline-secondary { --bs-btn-color: #c2c2c2; --bs-btn-border-color: #c2c2c2; } [data-bs-theme="dark"] .btn-outline-success { --bs-btn-color: #83d7b0; --bs-btn-border-color: #83d7b0; } [data-bs-theme="dark"] .btn-outline-danger { --bs-btn-color: #f0a3ac; --bs-btn-border-color: #f0a3ac; } [data-bs-theme="dark"] .btn-outline-dark { --bs-btn-color: #dedede; --bs-btn-border-color: #4a5468; } /* EasyMDE (Markdown-Editor, internal.access-granted.de: Finding-Vorlagen + Findings im Pentest-Detail) - komplett eigenes Vendor-CSS (ui/assets/easymde/easymde.min.css), fest codiert auf weiss/schwarz, nicht theme-aware. Ohne diesen Fix bleibt das Editor-Textfeld selbst im Dark Mode ein grosser weisser Kasten mit schwarzem Cursor (unsichtbar auf hellem Grund waere er, aber hier geht es um dunklen Grund - der SCHWARZE Cursor waere dann unsichtbar). */ [data-bs-theme="dark"] .CodeMirror { background: #0a2540 !important; color: #e4e6eb !important; border-color: #12406b !important; } [data-bs-theme="dark"] .CodeMirror-cursor { border-left-color: #e4e6eb !important; } [data-bs-theme="dark"] .CodeMirror-selected { background: #12406b !important; } [data-bs-theme="dark"] .CodeMirror-gutters { background-color: #0a2540 !important; border-right-color: #12406b !important; } [data-bs-theme="dark"] .cm-header { color: #7db1ff !important; } [data-bs-theme="dark"] .editor-toolbar { border-color: #12406b !important; background: #0a2540 !important; } [data-bs-theme="dark"] .editor-toolbar button { color: #c7d1e6 !important; } [data-bs-theme="dark"] .editor-toolbar button:hover, [data-bs-theme="dark"] .editor-toolbar button.active { background: #12406b !important; border-color: #4a5468 !important; } [data-bs-theme="dark"] .editor-toolbar i.separator { background: #12406b !important; } [data-bs-theme="dark"] .editor-preview { background: #04182F !important; color: #e4e6eb !important; } [data-bs-theme="dark"] .editor-preview pre, [data-bs-theme="dark"] .editor-preview code, [data-bs-theme="dark"] .editor-preview table th { background: #0d2844 !important; } [data-bs-theme="dark"] .editor-preview table td, [data-bs-theme="dark"] .editor-preview table th { border-color: #12406b !important; } [data-bs-theme="dark"] .editor-statusbar { color: #99aac2 !important; } /* ========================================================================== 5. Theme-Toggle-Button (Header) ========================================================================== */ .theme-toggle-btn { background: none; border: 0; cursor: pointer; font-size: 22px; line-height: 1; color: #012970; padding: 0; margin-right: 20px; display: inline-flex; align-items: center; } .theme-toggle-btn:hover { color: #4154f1; } .logo-img-dark { display: none; } [data-bs-theme="dark"] .logo-img-light { display: none; } [data-bs-theme="dark"] .logo-img-dark { display: inline-block; } /* Gleiche Groesse wie vor dem Dark-Mode-Umbau (Original: nur max-width:100%, Hoehe automatisch) - zusaetzlich explizit zentriert (display:block + margin:auto). Bewusst als 2 getrennte, je auf ihr eigenes Theme beschraenkte Regeln (statt einer gemeinsamen Regel fuer beide Bilder) - eine gemeinsame Regel wuerde durch ihre hoehere Selektor-Spezifitaet (3 Klassen) die display:none-Regeln oben (max. 2 Klassen/Attribut) ueberstimmen und beide Logos gleichzeitig sichtbar machen. */ .wrap-login100 .logo.logo-img-light { display: block; margin: 0 auto; max-width: 100%; height: auto; } [data-bs-theme="dark"] .wrap-login100 .logo.logo-img-light { display: none; } [data-bs-theme="dark"] .wrap-login100 .logo.logo-img-dark { display: block; margin: 0 auto; max-width: 100%; height: auto; } .theme-toggle-btn .bi-sun-fill { display: none; } [data-bs-theme="dark"] .theme-toggle-btn .bi-moon-stars-fill { display: none; } [data-bs-theme="dark"] .theme-toggle-btn .bi-sun-fill { display: inline-block; } [data-bs-theme="dark"] .theme-toggle-btn { color: #cfe0ff; } [data-bs-theme="dark"] .theme-toggle-btn:hover { color: #fff; } /* ========================================================================== 6. Login-Seiten (ui/login/*, eigenes login100-Template, nicht NiceAdmin) ========================================================================== */ [data-bs-theme="dark"] .container-login100 { background: #030d1d; } [data-bs-theme="dark"] .wrap-login100 { background: #04182F; box-shadow: 0 5px 30px 0 rgba(0, 0, 0, 0.5); } [data-bs-theme="dark"] .login100-form-title, [data-bs-theme="dark"] .txt2 { color: #e4e6eb; } [data-bs-theme="dark"] .txt1, [data-bs-theme="dark"] .wrap-login100 p { color: #a9b4cc; } [data-bs-theme="dark"] .wrap-input100 { border-bottom-color: #12406b; } [data-bs-theme="dark"] .input100 { color: #e4e6eb; } [data-bs-theme="dark"] .focus-input100::after { color: #8b96ad; } [data-bs-theme="dark"] .alert-validate::before, [data-bs-theme="dark"] .alert-validate::after { background-color: #2a1418; } .login-theme-toggle-btn { position: fixed; top: 18px; right: 22px; z-index: 10000; background: rgba(0, 0, 0, 0.08); border-radius: 50%; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; color: #333; font-size: 18px; border: 0; cursor: pointer; } [data-bs-theme="dark"] .login-theme-toggle-btn { background: rgba(255, 255, 255, 0.1); color: #fff; } .login-theme-toggle-btn .bi-sun-fill { display: none; } [data-bs-theme="dark"] .login-theme-toggle-btn .bi-moon-stars-fill { display: none; } [data-bs-theme="dark"] .login-theme-toggle-btn .bi-sun-fill { display: inline-block; } /* ========================================================================== 7. Generische Ueberschreibung hart codierter Inline-style-Farben -------------------------------------------------------------------------- Alle 3 Apps (102 Templates in secretHTMLFilesFolder/) verwenden an sehr vielen Stellen style="color:#xxxxxx" bzw. style="background:#xxxxxx" statt Klassen. Diese Farben wurden hier gesammelt (siehe union der tatsaechlich verwendeten Werte ueber alle 3 Apps) und automatisiert in dark-mode- taugliche Aequivalente umgerechnet (Farbton beibehalten, Helligkeit invertiert/angehoben), damit nicht jede der 102 Dateien einzeln editiert werden muss. [style*="..."] hat durch das Attribut hoehere Spezifitaet als die reine Klasse im jeweiligen Template-