/* ============================================================ VM-Tools Dark Mode Aktivierung via ============================================================ */ /* ── Basis ── */ [data-theme="dark"] { color-scheme: dark; } [data-theme="dark"] body { background-image: none; background-color: #1a1b2e; color: #e0e0e0; } /* ── Navbar ── */ [data-theme="dark"] .navbar { background-color: #252640 !important; border-color: #3d3d5c !important; } [data-theme="dark"] .navbar-light .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); } [data-theme="dark"] .navbar-light .navbar-toggler { border-color: rgba(255, 255, 255, 0.3); } [data-theme="dark"] .nav-link, [data-theme="dark"] .navbar-brand, [data-theme="dark"] .navbar-text { color: #e0e0e0 !important; } [data-theme="dark"] .nav-link:hover { color: #ffffff !important; background-color: rgba(255, 255, 255, 0.08); border-radius: 4px; } [data-theme="dark"] #theme-toggle { color: #e0e0e0; border-color: rgba(255, 255, 255, 0.3); } /* ── Cards ── */ [data-theme="dark"] .card { background-color: #252640; border-color: #3d3d5c; color: #e0e0e0; } [data-theme="dark"] .card-body { background-color: #252640; } [data-theme="dark"] .card-footer { background-color: #1e1e35; border-color: #3d3d5c; } /* ── Tabellen ── */ [data-theme="dark"] .table { color: #e0e0e0; } [data-theme="dark"] .table th, [data-theme="dark"] .table td { border-color: #3d3d5c; } [data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) { background-color: rgba(255, 255, 255, 0.04); } [data-theme="dark"] .table-hover tbody tr:hover { background-color: rgba(255, 255, 255, 0.08); color: #ffffff; } [data-theme="dark"] .thead-dark th { background-color: #1a1b2e; border-color: #3d3d5c; } /* ── Formulare ── */ [data-theme="dark"] .form-control { background-color: #1e1e35; border-color: #3d3d5c; color: #e0e0e0; } [data-theme="dark"] .form-control:focus { background-color: #1e1e35; color: #e0e0e0; border-color: #7777bb; box-shadow: 0 0 0 0.2rem rgba(100, 100, 180, 0.25); } [data-theme="dark"] .form-control::placeholder { color: #8888aa; } [data-theme="dark"] select.form-control option { background-color: #1e1e35; color: #e0e0e0; } [data-theme="dark"] .input-group-text { background-color: #1e1e35; border-color: #3d3d5c; color: #e0e0e0; } [data-theme="dark"] label { color: #ccccdd; } [data-theme="dark"] fieldset legend { color: #ccccdd; } /* ── Buttons ── */ [data-theme="dark"] .btn-light { background-color: #3a3a55; border-color: #4a4a66; color: #e0e0e0; } [data-theme="dark"] .btn-light:hover { background-color: #4a4a66; color: #ffffff; } [data-theme="dark"] .btn-outline-secondary { color: #aaaacc; border-color: #6666aa; } [data-theme="dark"] .btn-outline-secondary:hover { background-color: #3a3a55; color: #ffffff; } /* ── Alerts ── */ [data-theme="dark"] .alert-danger { background-color: #3d1a1a; border-color: #6b2a2a; color: #ffaaaa; } [data-theme="dark"] .alert-success { background-color: #1a3d2a; border-color: #2a6b44; color: #aaffcc; } [data-theme="dark"] .alert-warning { background-color: #3d3010; border-color: #6b5520; color: #ffeebb; } [data-theme="dark"] .alert-info { background-color: #1a2a3d; border-color: #2a4a6b; color: #aaccff; } /* ── Badges ── */ [data-theme="dark"] .badge-secondary { background-color: #4a4a66; } /* ── Modals ── */ [data-theme="dark"] .modal-content { background-color: #252640; color: #e0e0e0; border-color: #3d3d5c; } [data-theme="dark"] .modal-header { border-color: #3d3d5c; } [data-theme="dark"] .modal-footer { border-color: #3d3d5c; } /* ── Dropdowns ── */ [data-theme="dark"] .dropdown-menu { background-color: #252640; border-color: #3d3d5c; } [data-theme="dark"] .dropdown-item { color: #e0e0e0; } [data-theme="dark"] .dropdown-item:hover { background-color: #3a3a55; color: #ffffff; } [data-theme="dark"] .dropdown-divider { border-color: #3d3d5c; } /* ── List Groups ── */ [data-theme="dark"] .list-group-item { background-color: #252640; border-color: #3d3d5c; color: #e0e0e0; } [data-theme="dark"] .list-group-item:hover { background-color: #3a3a55; } /* ── Pagination ── */ [data-theme="dark"] .page-link { background-color: #252640; border-color: #3d3d5c; color: #aaaacc; } [data-theme="dark"] .page-item.active .page-link { background-color: #980b11; border-color: #980b11; } /* ── Bootstrap Utility Overrides ── */ [data-theme="dark"] .bg-white { background-color: #252640 !important; } [data-theme="dark"] .bg-light { background-color: #1e1e35 !important; } [data-theme="dark"] .bg-secondary { background-color: #2a2a45 !important; } [data-theme="dark"] .text-dark { color: #e0e0e0 !important; } [data-theme="dark"] .text-muted { color: #9999bb !important; } [data-theme="dark"] .border { border-color: #3d3d5c !important; } [data-theme="dark"] .border-bottom { border-color: #3d3d5c !important; } [data-theme="dark"] hr { border-color: #3d3d5c; } /* ── VM Custom Classes ── */ [data-theme="dark"] .innerBG { background-color: #252640 !important; color: #e0e0e0; } [data-theme="dark"] .vmBox { background-color: #252640; box-shadow: #0a0a1a 0px 0px 5px; color: #e0e0e0; } [data-theme="dark"] .vmTitle { background-color: #252640 !important; color: #cc3333 !important; } [data-theme="dark"] .finanzen-table td, [data-theme="dark"] .finanzen-table th { border-color: #3d3d5c; } [data-theme="dark"] .buchstabe { background: #1a1b2e !important; } /* ── Inline style Overrides (common patterns) ── */ [data-theme="dark"] [style*="background-color: white"], [data-theme="dark"] [style*="background-color:white"], [data-theme="dark"] [style*="background-color: #fff"], [data-theme="dark"] [style*="background-color:#fff"], [data-theme="dark"] [style*="background-color: #ffffff"], [data-theme="dark"] [style*="background-color:#ffffff"] { background-color: #252640 !important; color: #e0e0e0 !important; } /* ── Dashboard Kacheln ── */ [data-theme="dark"] .text-center.p-3[style*="border: 2px solid #ccc"] { background-color: #1e1e35 !important; border-color: #3d3d5c !important; } /* ── Mega Menu ── */ [data-theme="dark"] #megaMenu { background: #252640 !important; box-shadow: 0 6px 12px rgba(0,0,0,.4); } [data-theme="dark"] #megaMenu .border-top { border-color: #3d3d5c !important; } [data-theme="dark"] #megaMenu .border-bottom { border-color: #3d3d5c !important; } /* ── Footer ── */ [data-theme="dark"] footer { background-color: #252640 !important; } /* ── jQuery UI Datepicker ── */ [data-theme="dark"] .ui-datepicker { background-color: #252640; border-color: #3d3d5c; color: #e0e0e0; } [data-theme="dark"] .ui-datepicker-header { background-color: #1e1e35; border-color: #3d3d5c; color: #e0e0e0; } [data-theme="dark"] .ui-datepicker td a, [data-theme="dark"] .ui-datepicker td span { background-color: #252640; color: #e0e0e0; } [data-theme="dark"] .ui-datepicker td a:hover { background-color: #3a3a55; } [data-theme="dark"] .ui-datepicker td.ui-datepicker-today a { background-color: #980b11; color: #fff; } [data-theme="dark"] .ui-widget-header { background: #1e1e35; border-color: #3d3d5c; color: #e0e0e0; } [data-theme="dark"] .ui-state-default { background: #252640; border-color: #3d3d5c; color: #e0e0e0; } /* ── Scrollbar (Webkit) ── */ [data-theme="dark"] ::-webkit-scrollbar { width: 8px; height: 8px; } [data-theme="dark"] ::-webkit-scrollbar-track { background: #1a1b2e; } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: #3d3d5c; border-radius: 4px; } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #555577; }