/* ===================================================================== SIW Bonsai – Light/Dark Theme mit hohen Kontrasten (Bootstrap 5) Gesteuert über: (siehe JS in base.html) ===================================================================== */ /* ---- Farbtokens ----------------------------------------------------- */ :root[data-theme="light"]{ --bg: #f7f8fa; --card: #ffffff; --text: #1f2937; /* slate-800 */ --text-soft: #374151; /* slate-700 */ --muted: #6b7280; /* slate-500 */ --border: #d1d5db; /* slate-300 */ --link: #0b5cad; --link-hover: #084c8a; --brand: #0b1b2b; /* Topbar */ --brand-text: #e9eef5; --chip-bg: #eef2ff; --chip-text: #1e3a8a; } :root[data-theme="dark"]{ --bg: #0f172a; /* slate-900 */ --card: #0b1220; /* sehr dunkle Karte */ --text: #e5e7eb; /* slate-200 */ --text-soft: #cbd5e1; /* slate-300 */ --muted: #94a3b8; /* slate-400 */ --border: #1f2a44; /* dunkler Rand */ --link: #93c5fd; --link-hover: #bfdbfe; --brand: #0b1b2b; --brand-text: #e9eef5; --chip-bg: #172554; --chip-text: #c7d2fe; } /* ---- Bootstrap Token Mapping ---------------------------------------- */ :root[data-theme="light"], :root[data-theme="dark"]{ --bs-body-bg: var(--bg); --bs-body-color: var(--text); --bs-border-color: var(--border); --bs-link-color: var(--link); --bs-link-hover-color: var(--link-hover); --bs-secondary-color: var(--muted); /* für .text-secondary etc. */ --bs-tertiary-color: var(--text-soft); --bs-card-bg: var(--card); --bs-modal-bg: var(--card); } /* ---- Grundlayout & Typo -------------------------------------------- */ html, body { background: var(--bg); color: var(--text); } body { line-height: 1.55; -webkit-font-smoothing: antialiased; } p, li, td, th, label, .form-label { color: var(--text); } small, .text-muted, .form-text { color: var(--muted) !important; } h1, h2, h3, h4, h5 { color: #0b1b2b; font-weight: 700; } :root[data-theme="dark"] h1, :root[data-theme="dark"] h2, :root[data-theme="dark"] h3, :root[data-theme="dark"] h4, :root[data-theme="dark"] h5 { color: #e9eef5; } /* ---- Links ---------------------------------------------------------- */ a { color: var(--link); text-decoration: none; } a:hover, a:focus { color: var(--link-hover); text-decoration: underline; } /* ---- Navbar (Topbar) ------------------------------------------------ */ .topbar.navbar { background: var(--brand) !important; color: var(--brand-text) !important; border-bottom: 1px solid rgba(255,255,255,.08); } .topbar .navbar-brand, .topbar .nav-link, .topbar .navbar-text { color: var(--brand-text) !important; } .topbar .nav-link.active { text-decoration: underline; } .brand-logo { height: 28px; display: inline-block; } /* Theme-Toggle-Button */ #themeToggle { border-color: rgba(255,255,255,.4) !important; color: var(--brand-text) !important; } #themeToggle:hover { background: rgba(255,255,255,.08); } /* ---- Container, Karten, Ränder ------------------------------------- */ .card, .modal-content, .list-group-item, .dropdown-menu { background: var(--card); color: var(--text); border: 1px solid var(--border); } hr, .border, .table, .table>:not(caption)>*>* { border-color: var(--border) !important; } .table { color: var(--text); } .table thead th { font-weight: 600; } /* ---- Formulare ------------------------------------------------------ */ .form-control, .form-select, .form-check-input, .form-control:focus, .form-select:focus { background: var(--card); color: var(--text); border-color: var(--border); box-shadow: none; } ::placeholder { color: var(--muted) !important; opacity: 1; } /* ---- Buttons (Kontrast) -------------------------------------------- */ .btn-primary { background:#1e40af; border-color:#1e40af; color:#fff; } .btn-primary:hover { background:#1b3a9b; border-color:#1b3a9b; } .btn-secondary, .btn-outline-secondary { color:#374151; border-color:#9ca3af; } :root[data-theme="dark"] .btn-secondary, :root[data-theme="dark"] .btn-outline-secondary { color:#e5e7eb; border-color:#64748b; } /* Disabled trotzdem gut lesbar */ .btn:disabled, .disabled, [disabled] { color: var(--muted) !important; opacity: .85; } /* ---- Chips (falls du welche nutzt) --------------------------------- */ .siw-chip { background: var(--chip-bg); color: var(--chip-text); padding:.15rem .5rem; border-radius:.35rem; } /* ---- Zugänglichkeit ------------------------------------------------- */ :focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; } /* ---- Kleinere Helfer ------------------------------------------------ */ .bg-card { background: var(--card) !important; } .text-soft { color: var(--text-soft) !important; } /* ===== NAVBAR – immer dunkler Balken mit heller Schrift ===== */ .topbar.navbar, .navbar.bg-dark { /* trifft auch Bootstrap .bg-dark */ background-color: #0b1b2b !important; /* euer Blaugrau */ } .navbar-dark .navbar-brand, .navbar-dark .navbar-nav .nav-link, .topbar .navbar-brand, .topbar .nav-link { color: #e9eef5 !important; /* gut lesbares Hell */ } .navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .nav-link:focus, .topbar .nav-link:hover, .topbar .nav-link:focus { color: #ffffff !important; } .navbar-dark .navbar-nav .nav-link.active, .topbar .nav-link.active { color: #ffffff !important; text-decoration: underline; text-underline-offset: 6px; font-weight: 700; } /* ===== TITEL – hoher Kontrast im Content ===== */ main h1, main .h1 { color: #111827 !important; /* kräftiges Dunkel im Light-Theme */ opacity: 1 !important; /* falls irgendwo Opacity/Utilities sitzen */ font-weight: 500; letter-spacing: .2px; } /* Dark-Theme Variante für Titel */ html[data-theme="dark"] main h1, html[data-theme="dark"] main .h1 { color: #e9eef5 !important; } /* --- Alerts im Dark Mode zuverlässig lesbar (Bootstrap 5.3) --- */ html[data-theme="dark"] .alert{ --bs-alert-color: var(--text) !important; } /* Success im Dark weniger "mint", mehr kontrolliert */ html[data-theme="dark"] .alert-success{ --bs-alert-color: var(--text) !important; --bs-alert-bg: rgba(25,135,84,.14) !important; --bs-alert-border-color: rgba(25,135,84,.28) !important; } /* Warning im Dark ebenfalls harmonisieren */ html[data-theme="dark"] .alert-warning{ --bs-alert-color: var(--text) !important; --bs-alert-bg: rgba(255,193,7,.12) !important; --bs-alert-border-color: rgba(255,193,7,.26) !important; } /* --- FORCE: Alert-Inhalte im Dark immer lesbar --- */ html[data-theme="dark"] .alert-success, html[data-theme="dark"] .alert-success *{ color: var(--text) !important; } /* Optional: weniger Mint im Dark */ html[data-theme="dark"] .alert-success{ background-color: rgba(25,135,84,.14) !important; border-color: rgba(25,135,84,.28) !important; }