/* Light/dark theme: color variables + dark-mode overrides for elements that don't pick up the variables automatically. Toggled via . */ :root { /*colors*/ --color-bg-page: #eeeeee; --color-bg-surface: #ffffff; --color-bg-border: #ffffff; --color-bg-nav: #e8e8e8; --color-hover: #f2f2f2; --color-bg-active-strong: #212529; --color-primary-soft: #eef4ff; --color-border: #dddddd; --color-border-strong: #c0c0c0; --color-text-primary: #202020; --color-text-secondary: #6c757d; --color-text-faint: #adb5bd; --color-text-inverse: #ffffff; --color-primary: #0d6efd; --color-status-active: #22c55e; --color-status-pending: #f59e0b; --color-status-revoked: #ef4444; } :root[data-theme="dark"] { --color-bg-page: #121212; --color-bg-surface: #1e1e1e; --color-bg-border: #a0a0a0; --color-bg-nav: #1e1e2e; --color-hover: #2a2a2a; --color-bg-active-strong: var(--color-primary); --color-primary-soft: #132a44; --color-border: #3a3a3a; --color-border-strong: #555555; --color-text-primary: #f0f0f0; --color-text-secondary: #a0a0a0; --color-text-faint: #6a6a6a; --color-text-inverse: #ffffff; --color-primary: #4d94ff; --color-status-active: lime; --color-status-pending: #fbbf24; --color-status-revoked: #f87171; } /* Bootstrap 5.0.2 bakes literal colors into these rules instead of reading CSS variables, so dark mode needs explicit overrides for the classes this app actually uses (Bootstrap's own variable-driven dark mode arrived in 5.3). */ :root[data-theme="dark"] .card { background-color: var(--color-bg-surface); border-color: var(--color-border); } :root[data-theme="dark"] .btn-outline-secondary { color: var(--color-text-secondary); border-color: var(--color-text-secondary); } :root[data-theme="dark"] .btn-outline-secondary:hover { color: var(--color-text-inverse); background-color: var(--color-text-secondary); border-color: var(--color-text-secondary); } :root[data-theme="dark"] .btn-outline-dark { color: var(--color-text-primary); border-color: var(--color-text-primary); } :root[data-theme="dark"] .btn-outline-dark:hover { color: var(--color-bg-page); background-color: var(--color-text-primary); border-color: var(--color-text-primary); } :root[data-theme="dark"] .btn-close { /* Bootstrap's own dark-background technique (see .btn-close-white). */ filter: invert(1) grayscale(100%) brightness(200%); } :root[data-theme="dark"] .form-control, :root[data-theme="dark"] .form-select { color: var(--color-text-primary); background-color: var(--color-bg-surface); border-color: var(--color-border); } :root[data-theme="dark"] .form-select { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23f0f0f0' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"); } :root[data-theme="dark"] .form-control::placeholder { color: var(--color-text-faint); } :root[data-theme="dark"] .form-check-input { background-color: var(--color-bg-surface); border-color: var(--color-border-strong); } :root[data-theme="dark"] .table { color: var(--color-text-primary); border-color: var(--color-border); } :root[data-theme="dark"] .dropdown-menu { color: var(--color-text-primary); background-color: var(--color-bg-surface); border-color: var(--color-border); } :root[data-theme="dark"] .dropdown-item { color: var(--color-text-primary); } :root[data-theme="dark"] .dropdown-item:hover, :root[data-theme="dark"] .dropdown-item:focus { color: var(--color-text-primary); background-color: var(--color-hover); } :root[data-theme="dark"] .alert-info { color: #6edff6; background-color: #032830; border-color: #0c525f; } :root[data-theme="dark"] .alert-danger { color: #ea868f; background-color: #2c0b0e; border-color: #58151c; } :root[data-theme="dark"] .alert-warning { color: #ffda6a; background-color: #332701; border-color: #664d03; } :root[data-theme="dark"] .alert-secondary { color: #c4c8cb; background-color: #2b2f32; border-color: #41464b; }