/* Global dark palette */ :root { --dark-body: #121418; --dark-surface: #1b1f27; --dark-surface-2: #222733; --dark-border: #2e3646; --dark-text: #e6e8ee; --dark-muted: #aab1c0; --dark-input: #0e1219; } /* Turn on only when */ html[data-theme="dark"] body { background-color: var(--dark-body) !important; color: var(--dark-text) !important; } /* Cards, list-group items */ html[data-theme="dark"] .card, html[data-theme="dark"] .list-group-item { background-color: var(--dark-surface) !important; border-color: var(--dark-border) !important; color: var(--dark-text) !important; } /* Tables (without needing .table-dark) */ html[data-theme="dark"] .table { --bs-table-bg: var(--dark-surface); --bs-table-striped-bg: var(--dark-surface-2); --bs-table-color: var(--dark-text); --bs-table-striped-color: var(--dark-text); border-color: var(--dark-border); } html[data-theme="dark"] .table > :not(caption) > * > * { background-color: var(--bs-table-bg) !important; color: var(--bs-table-color) !important; border-color: var(--dark-border) !important; } /* Forms */ html[data-theme="dark"] .form-control, html[data-theme="dark"] .form-select, html[data-theme="dark"] .form-check-input, html[data-theme="dark"] .form-control:disabled, html[data-theme="dark"] .form-select:disabled { background-color: var(--dark-input) !important; color: var(--dark-text) !important; border-color: var(--dark-border) !important; } /* Placeholders & help text */ html[data-theme="dark"] .form-control::placeholder { color: var(--dark-muted) !important; opacity: 1; } html[data-theme="dark"] .form-text, html[data-theme="dark"] .text-muted { color: var(--dark-muted) !important; } /* Inputs focus ring */ html[data-theme="dark"] .form-control:focus, html[data-theme="dark"] .form-select:focus { color: var(--dark-text); background-color: var(--dark-input); border-color: #4c6fff; box-shadow: 0 0 0 .2rem rgba(76, 111, 255, .25); } /* Date/time/color inputs pick up OS dark UI */ html[data-theme="dark"] input[type="date"], html[data-theme="dark"] input[type="time"], html[data-theme="dark"] input[type="color"], html[data-theme="dark"] input[type="datetime-local"] { color-scheme: dark; } /* Dropdowns */ html[data-theme="dark"] .dropdown-menu { background-color: var(--dark-surface); border-color: var(--dark-border); } html[data-theme="dark"] .dropdown-item { color: var(--dark-text); } html[data-theme="dark"] .dropdown-item:hover, html[data-theme="dark"] .dropdown-item:focus { background-color: var(--dark-surface-2); } /* Alerts, badges, nav borders */ html[data-theme="dark"] .alert { background-color: var(--dark-surface); border-color: var(--dark-border); color: var(--dark-text); } html[data-theme="dark"] .navbar, html[data-theme="dark"] .border-bottom, html[data-theme="dark"] .border-top { border-color: var(--dark-border) !important; } /* Buttons – keep Bootstrap defaults, just fix outline contrast */ html[data-theme="dark"] .btn-outline-dark { color: var(--dark-text) !important; border-color: var(--dark-border) !important; } /* === App-wide table style === */ .table-app { border-radius: .75rem; overflow: hidden; /* keeps corners rounded */ margin-bottom: 1rem; } /* Apply Bootstrap table defaults */ .table-app.table { margin-bottom: 0; /* remove double margins inside cards */ } /* Header adapts to theme */ html[data-theme="light"] .table-app thead th { background-color: #f8f9fa; } html[data-theme="dark"] .table-app thead th { background-color: var(--dark-surface-2); color: var(--dark-text); } /* Row borders + hover (dark support) */ html[data-theme="dark"] .table-app, html[data-theme="dark"] .table-app > :not(caption) > * > * { border-color: var(--dark-border) !important; } /* Vertically align all cells */ .table-app td, .table-app th { vertical-align: middle; }