/* ========================================================================== RouterStatus theme tokens + dark mode Light values live in :root. Dark values apply when . The data-theme attribute is set synchronously by the no-FOUC head snippet and by jscript/theme.js (Light / Dark / System). ========================================================================== */ :root { color-scheme: light; /* surfaces & text */ --rs-bg: #f5f5f5; --rs-surface: #ffffff; --rs-surface-2: #f8f9fa; --rs-surface-3: #ecf0f1; --rs-text: #333333; --rs-heading: #2c3e50; --rs-muted: #666666; --rs-muted-2: #7f8c8d; /* borders & lines */ --rs-border: #dddddd; --rs-border-2: #dee2e6; --rs-border-3: #e1e8ed; /* brand & state */ --rs-primary: #3498db; --rs-primary-hover: #2980b9; --rs-on-primary: #ffffff; --rs-success: #27ae60; --rs-danger: #e74c3c; --rs-warning: #f39c12; --rs-unknown: #95a5a6; /* components */ --rs-chip-bg: #ecf0f1; --rs-chip-text: #34495e; --rs-input-bg: #ffffff; --rs-input-border: #dddddd; --rs-overlay: rgba(0, 0, 0, 0.5); --rs-autocomplete-hover: #f0f0f0; --rs-autocomplete-active: #e8f4f8; --rs-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); --rs-shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.15); --rs-shadow-xl: 0 10px 40px rgba(0, 0, 0, 0.3); /* code / json viewer (stays dark in both themes) */ --rs-code-bg: #2d2d2d; --rs-code-text: #d4d4d4; /* security badges */ --rs-crit-bg: #fdecea; --rs-crit-text: #c0392b; --rs-crit-border: #f5b7b1; --rs-high-bg: #fef5e7; --rs-high-text: #ca6f1e; --rs-high-border: #f8c471; --rs-med-bg: #fef9e7; --rs-med-text: #b7950b; --rs-med-border: #f9e79f; --rs-eol-bg: #f4ecf7; --rs-eol-text: #7d3c98; --rs-eol-border: #d2b4de; --rs-upd-bg: #eaf2f8; --rs-upd-text: #2471a3; --rs-upd-border: #aed6f1; --rs-sec-bg: #eafaf1; --rs-sec-text: #1e8449; --rs-sec-border: #abebc6; --rs-summary-bg: #fdecea; --rs-summary-border: #f5b7b1; --rs-summary-text: #922b21; --rs-summary-clean-bg: #eafaf1; --rs-summary-clean-border: #abebc6; --rs-summary-clean-text: #1e6b3a; } :root[data-theme="dark"] { color-scheme: dark; --rs-bg: #0f1622; --rs-surface: #18212f; --rs-surface-2: #1c2735; --rs-surface-3: #243043; --rs-text: #dbe3ec; --rs-heading: #f1f5f9; --rs-muted: #9fb0c0; --rs-muted-2: #8595a6; --rs-border: #2a3547; --rs-border-2: #2a3547; --rs-border-3: #2a3547; --rs-primary: #4aa3e0; --rs-primary-hover: #6cb6e8; --rs-on-primary: #ffffff; --rs-success: #2ecc71; --rs-danger: #ec6b5e; --rs-warning: #f5b041; --rs-unknown: #95a5a6; --rs-chip-bg: #243043; --rs-chip-text: #cdd9ea; --rs-input-bg: #131c28; --rs-input-border: #2f3c50; --rs-overlay: rgba(0, 0, 0, 0.6); --rs-autocomplete-hover: #1f2a3a; --rs-autocomplete-active: #1d3346; --rs-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); --rs-shadow-lg: 0 6px 16px rgba(0, 0, 0, 0.6); --rs-shadow-xl: 0 14px 48px rgba(0, 0, 0, 0.7); --rs-crit-bg: #3a1b1b; --rs-crit-text: #f1948a; --rs-crit-border: #5c2a28; --rs-high-bg: #3a2c14; --rs-high-text: #f0b27a; --rs-high-border: #5c4520; --rs-med-bg: #34300f; --rs-med-text: #f4d35e; --rs-med-border: #524a1c; --rs-eol-bg: #2e1f3a; --rs-eol-text: #c39bd3; --rs-eol-border: #4a3260; --rs-upd-bg: #16293a; --rs-upd-text: #85c1e9; --rs-upd-border: #234965; --rs-sec-bg: #14321f; --rs-sec-text: #82e0aa; --rs-sec-border: #225437; --rs-summary-bg: #3a1b1b; --rs-summary-border: #5c2a28; --rs-summary-text: #f1948a; --rs-summary-clean-bg: #14321f; --rs-summary-clean-border: #225437; --rs-summary-clean-text: #82e0aa; } /* Smooth, not jarring, when switching themes */ :root.rs-theme-anim, :root.rs-theme-anim body, :root.rs-theme-anim * { transition: background-color .25s ease, border-color .25s ease, color .2s ease, box-shadow .25s ease; } /* ========================================================================== Bootstrap 5.1.3 dark overrides (5.1.3 has no native color modes). These keep the PHP/Bootstrap pages (settings, admin, auth) coherent in dark. ========================================================================== */ :root[data-theme="dark"] body { background-color: var(--rs-bg); color: var(--rs-text); } :root[data-theme="dark"] .card, :root[data-theme="dark"] .modal-content, :root[data-theme="dark"] .dropdown-menu, :root[data-theme="dark"] .list-group-item, :root[data-theme="dark"] .accordion-item, :root[data-theme="dark"] .offcanvas { background-color: var(--rs-surface); color: var(--rs-text); border-color: var(--rs-border); } :root[data-theme="dark"] .card-header, :root[data-theme="dark"] .card-footer, :root[data-theme="dark"] .modal-header, :root[data-theme="dark"] .modal-footer { background-color: var(--rs-surface-2); border-color: var(--rs-border); color: var(--rs-text); } :root[data-theme="dark"] .form-control, :root[data-theme="dark"] .form-select, :root[data-theme="dark"] .input-group-text { background-color: var(--rs-input-bg); color: var(--rs-text); border-color: var(--rs-input-border); } :root[data-theme="dark"] .form-control::placeholder { color: var(--rs-muted-2); } :root[data-theme="dark"] .form-control:focus, :root[data-theme="dark"] .form-select:focus { background-color: var(--rs-input-bg); color: var(--rs-text); border-color: var(--rs-primary); box-shadow: 0 0 0 .2rem rgba(74, 163, 224, .25); } :root[data-theme="dark"] .form-check-input { background-color: var(--rs-input-bg); border-color: var(--rs-input-border); } :root[data-theme="dark"] .form-check-input:checked { background-color: var(--rs-primary); border-color: var(--rs-primary); } :root[data-theme="dark"] .table { color: var(--rs-text); border-color: var(--rs-border); } :root[data-theme="dark"] .table > :not(caption) > * > * { background-color: transparent; color: var(--rs-text); border-bottom-color: var(--rs-border); } :root[data-theme="dark"] .table-hover > tbody > tr:hover > * { background-color: var(--rs-surface-2); color: var(--rs-text); } :root[data-theme="dark"] .table thead th { color: var(--rs-muted); border-color: var(--rs-border); } :root[data-theme="dark"] .text-muted { color: var(--rs-muted) !important; } :root[data-theme="dark"] .text-dark { color: var(--rs-text) !important; } :root[data-theme="dark"] .bg-light { background-color: var(--rs-surface-2) !important; color: var(--rs-text); } :root[data-theme="dark"] .bg-white { background-color: var(--rs-surface) !important; } :root[data-theme="dark"] .border, :root[data-theme="dark"] .border-top, :root[data-theme="dark"] .border-bottom, :root[data-theme="dark"] .border-start, :root[data-theme="dark"] .border-end { border-color: var(--rs-border) !important; } :root[data-theme="dark"] hr { border-color: var(--rs-border); opacity: .5; } :root[data-theme="dark"] .dropdown-item { color: var(--rs-text); } :root[data-theme="dark"] .dropdown-item:hover, :root[data-theme="dark"] .dropdown-item:focus { background-color: var(--rs-surface-2); color: var(--rs-text); } :root[data-theme="dark"] .dropdown-divider { border-color: var(--rs-border); } :root[data-theme="dark"] .nav-tabs { border-bottom-color: var(--rs-border); } :root[data-theme="dark"] .nav-tabs .nav-link { color: var(--rs-muted); } :root[data-theme="dark"] .nav-tabs .nav-link:hover { color: var(--rs-text); border-bottom-color: var(--rs-border); } :root[data-theme="dark"] .nav-tabs .nav-link.active { color: var(--rs-primary); background: none; border-bottom-color: var(--rs-primary); } :root[data-theme="dark"] .btn-light { background-color: var(--rs-surface-3); border-color: var(--rs-border); color: var(--rs-text); } :root[data-theme="dark"] .btn-outline-secondary { color: var(--rs-muted); border-color: var(--rs-border); } :root[data-theme="dark"] .btn-outline-secondary:hover { background-color: var(--rs-surface-2); color: var(--rs-text); } :root[data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(1.8); } :root[data-theme="dark"] .modal-backdrop.show { opacity: .65; } :root[data-theme="dark"] .alert-secondary { background-color: var(--rs-surface-2); border-color: var(--rs-border); color: var(--rs-text); } :root[data-theme="dark"] .badge.bg-light { background-color: var(--rs-surface-3) !important; color: var(--rs-text) !important; } :root[data-theme="dark"] a:not(.btn) { color: var(--rs-primary); } :root[data-theme="dark"] a:not(.btn):hover { color: var(--rs-primary-hover); } /* Anchor-styled buttons keep their Bootstrap variant text colors in dark mode. */ :root[data-theme="dark"] .btn-warning { color: #1f2430; } :root[data-theme="dark"] .btn-outline-secondary { color: var(--rs-text); border-color: var(--rs-border); } :root[data-theme="dark"] .btn-outline-secondary:hover { background-color: var(--rs-surface-2); color: var(--rs-text); } /* ========================================================================== Theme switcher UI (nav button + settings segmented control) ========================================================================== */ .rs-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 8px; background: rgba(255, 255, 255, 0.12); color: #fff; border: none; cursor: pointer; font-size: 1.05rem; transition: background .2s ease, transform .15s ease; } .rs-theme-toggle:hover { background: rgba(255, 255, 255, 0.22); transform: translateY(-1px); } .rs-theme-toggle:active { transform: translateY(0); } /* Settings segmented control */ .rs-theme-seg { display: inline-flex; gap: 4px; padding: 4px; border-radius: 10px; background: var(--rs-surface-3); border: 1px solid var(--rs-border); } .rs-theme-seg .rs-seg-btn { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .9rem; border: none; background: transparent; cursor: pointer; border-radius: 7px; font-size: .9rem; font-weight: 600; color: var(--rs-muted-2); transition: all .15s ease; } .rs-theme-seg .rs-seg-btn:hover { color: var(--rs-heading); } .rs-theme-seg .rs-seg-btn.active { background: var(--rs-surface); color: var(--rs-heading); box-shadow: var(--rs-shadow); } :root[data-theme="dark"] .rs-theme-seg .rs-seg-btn.active { background: var(--rs-primary); color: #fff; }