/* Dark mode overrides for Bootstrap 5.2 Activated by [data-theme="dark"] on . Also activates automatically when the OS prefers dark and no manual choice has been made. */ [data-theme="dark"], @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --_dark: 1; } } /* ── Body ─────────────────────────────────────────────────────────────────── */ [data-theme="dark"], [data-theme="dark"] body { background-color: #1a1d20; color: #dee2e6; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]), :root:not([data-theme="light"]) body { background-color: #1a1d20; color: #dee2e6; } } /* ── Navbar ───────────────────────────────────────────────────────────────── */ [data-theme="dark"] .navbar { background-color: #212529 !important; border-bottom: 1px solid #343a40; } [data-theme="dark"] .navbar-brand, [data-theme="dark"] .nav-link { color: rgba(255,255,255,.8) !important; } [data-theme="dark"] .nav-link:hover, [data-theme="dark"] .nav-link.active { color: #fff !important; } [data-theme="dark"] .navbar-toggler { border-color: rgba(255,255,255,.2); } [data-theme="dark"] .navbar-toggler-icon { filter: invert(1); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .navbar { background-color: #212529 !important; border-bottom: 1px solid #343a40; } :root:not([data-theme="light"]) .navbar-brand, :root:not([data-theme="light"]) .nav-link { color: rgba(255,255,255,.8) !important; } :root:not([data-theme="light"]) .nav-link:hover, :root:not([data-theme="light"]) .nav-link.active { color: #fff !important; } } /* ── Forms ────────────────────────────────────────────────────────────────── */ [data-theme="dark"] .form-control, [data-theme="dark"] .form-select { background-color: #2b3035; border-color: #495057; color: #dee2e6; } [data-theme="dark"] .form-control:focus, [data-theme="dark"] .form-select:focus { background-color: #2b3035; color: #dee2e6; border-color: #6ea8fe; box-shadow: 0 0 0 .25rem rgba(13,110,253,.25); } [data-theme="dark"] .form-control::placeholder { color: #6c757d; } [data-theme="dark"] .form-control:disabled, [data-theme="dark"] .form-select:disabled { background-color: #212529; color: #6c757d; } [data-theme="dark"] .form-text { color: #adb5bd; } [data-theme="dark"] .form-label { color: #dee2e6; } [data-theme="dark"] .input-group-text { background-color: #2b3035; border-color: #495057; color: #dee2e6; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .form-control, :root:not([data-theme="light"]) .form-select { background-color: #2b3035; border-color: #495057; color: #dee2e6; } :root:not([data-theme="light"]) .form-control:focus, :root:not([data-theme="light"]) .form-select:focus { background-color: #2b3035; color: #dee2e6; } :root:not([data-theme="light"]) .input-group-text { background-color: #2b3035; border-color: #495057; color: #dee2e6; } } /* ── Tables ───────────────────────────────────────────────────────────────── */ [data-theme="dark"] .table { --bs-table-color: #dee2e6; --bs-table-bg: transparent; --bs-table-border-color: #495057; --bs-table-striped-bg: rgba(255,255,255,.04); --bs-table-hover-bg: rgba(255,255,255,.06); color: #dee2e6; border-color: #495057; } [data-theme="dark"] .table th, [data-theme="dark"] .table td { border-color: #495057; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .table { --bs-table-color: #dee2e6; --bs-table-bg: transparent; --bs-table-border-color: #495057; color: #dee2e6; border-color: #495057; } :root:not([data-theme="light"]) .table th, :root:not([data-theme="light"]) .table td { border-color: #495057; } } /* ── Cards ────────────────────────────────────────────────────────────────── */ [data-theme="dark"] .card { background-color: #212529; border-color: #495057; } [data-theme="dark"] .card-body, [data-theme="dark"] .card-title { color: #dee2e6; } [data-theme="dark"] .card.bg-light { background-color: #212529 !important; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .card { background-color: #212529; border-color: #495057; } :root:not([data-theme="light"]) .card.bg-light { background-color: #212529 !important; } } /* ── Dropdowns ────────────────────────────────────────────────────────────── */ [data-theme="dark"] .dropdown-menu { background-color: #212529; border-color: #495057; } [data-theme="dark"] .dropdown-item { color: #dee2e6; } [data-theme="dark"] .dropdown-item:hover, [data-theme="dark"] .dropdown-item:focus { background-color: #2b3035; color: #fff; } [data-theme="dark"] .dropdown-divider { border-color: #495057; } [data-theme="dark"] .dropdown-item.active { background-color: #0d6efd; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dropdown-menu { background-color: #212529; border-color: #495057; } :root:not([data-theme="light"]) .dropdown-item { color: #dee2e6; } :root:not([data-theme="light"]) .dropdown-item:hover { background-color: #2b3035; color: #fff; } :root:not([data-theme="light"]) .dropdown-divider { border-color: #495057; } } /* ── List groups ──────────────────────────────────────────────────────────── */ [data-theme="dark"] .list-group-item { background-color: #212529; border-color: #495057; color: #dee2e6; } [data-theme="dark"] .list-group-item-action:hover { background-color: #2b3035; color: #fff; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .list-group-item { background-color: #212529; border-color: #495057; color: #dee2e6; } :root:not([data-theme="light"]) .list-group-item-action:hover { background-color: #2b3035; color: #fff; } } /* ── Bootstrap modals ─────────────────────────────────────────────────────── */ [data-theme="dark"] .modal-content { background-color: #212529; border-color: #495057; color: #dee2e6; } [data-theme="dark"] .modal-header, [data-theme="dark"] .modal-footer { border-color: #495057; } /* ── Tingle modals ────────────────────────────────────────────────────────── */ [data-theme="dark"] .tingle-modal { background-color: rgba(0,0,0,.7); } [data-theme="dark"] .tingle-modal-box { background-color: #212529; color: #dee2e6; } [data-theme="dark"] .tingle-modal-box__footer { background-color: #1a1d20; border-top: 1px solid #343a40; } [data-theme="dark"] .tingle-modal-box h1, [data-theme="dark"] .tingle-modal-box h2, [data-theme="dark"] .tingle-modal-box p { color: #dee2e6; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tingle-modal-box { background-color: #212529; color: #dee2e6; } :root:not([data-theme="light"]) .tingle-modal-box__footer { background-color: #1a1d20; border-top: 1px solid #343a40; } :root:not([data-theme="light"]) .tingle-modal-box h1, :root:not([data-theme="light"]) .tingle-modal-box h2, :root:not([data-theme="light"]) .tingle-modal-box p { color: #dee2e6; } } /* ── Toast ────────────────────────────────────────────────────────────────── */ [data-theme="dark"] .toast:not(.text-bg-danger) { background-color: #2b3035 !important; color: #dee2e6; border-color: #495057; } /* ── Misc utility overrides ───────────────────────────────────────────────── */ [data-theme="dark"] .bg-light { background-color: #212529 !important; } [data-theme="dark"] .text-muted { color: #adb5bd !important; } [data-theme="dark"] .text-dark { color: #dee2e6 !important; } [data-theme="dark"] .link-dark { color: #dee2e6 !important; } [data-theme="dark"] .border { border-color: #495057 !important; } [data-theme="dark"] .border-bottom { border-color: #495057 !important; } [data-theme="dark"] hr { border-color: #495057; } [data-theme="dark"] .btn-close { filter: invert(1) grayscale(1); } [data-theme="dark"] .rounded.border { border-color: #495057 !important; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .bg-light { background-color: #212529 !important; } :root:not([data-theme="light"]) .text-muted { color: #adb5bd !important; } :root:not([data-theme="light"]) .link-dark { color: #dee2e6 !important; } :root:not([data-theme="light"]) .border { border-color: #495057 !important; } :root:not([data-theme="light"]) hr { border-color: #495057; } :root:not([data-theme="light"]) .btn-close { filter: invert(1) grayscale(1); } } /* ── Anonymous warning banner ─────────────────────────────────────────────── */ [data-theme="dark"] #anon-banner { background: #2d2500 !important; border-color: #664d03 !important; color: #ffe69c; } /* ── View page (share view) ───────────────────────────────────────────────── */ [data-theme="dark"] table.games tbody tr { background-color: rgba(255,255,255,.07) !important; } [data-theme="dark"] table.games tbody tr:nth-child(even) { background-color: rgba(255,255,255,.12) !important; } [data-theme="dark"] table.games tbody tr.draft { background-color: rgba(255,255,160,.07) !important; } [data-theme="dark"] .waiting-item { background-color: #212529; color: #dee2e6; } /* ── Sessions page ────────────────────────────────────────────────────────── */ [data-theme="dark"] .list-group-item.d-flex { background-color: #212529; }