/* Dark theme: driven by class on (see theme.js + _Host inline script). */
html.theme-dark {
color-scheme: dark;
}
html.theme-dark .app-shell {
--shell-page-bg: #0f172a;
--shell-page-fg: #e2e8f0;
--shell-body-mid-bg: #0f172a;
}
html.theme-dark,
html.theme-dark body {
background-color: #0f172a;
color: #e2e8f0;
}
html.theme-dark a,
html.theme-dark .btn-link {
color: #7dd3fc;
}
html.theme-dark a:hover,
html.theme-dark .btn-link:hover {
color: #bae6fd;
}
html.theme-dark .btn:focus,
html.theme-dark .btn:active:focus,
html.theme-dark .btn-link.nav-link:focus,
html.theme-dark .form-control:focus,
html.theme-dark .form-check-input:focus {
border-color: #38bdf8;
box-shadow: 0 0 0 0.1rem #0f172a, 0 0 0 0.25rem #38bdf8;
}
html.theme-dark .text-muted {
color: #cbd5e1 !important;
}
html.theme-dark .form-text {
color: #94a3b8;
}
html.theme-dark hr {
border-color: #334155;
opacity: 1;
}
html.theme-dark .table {
--bs-table-bg: transparent;
--bs-table-color: #e2e8f0;
color: #e2e8f0;
border-color: #475569;
}
html.theme-dark .table > :not(caption) > * > * {
border-bottom-color: #475569;
background-color: transparent;
color: inherit;
box-shadow: none;
}
html.theme-dark .table thead th {
color: #f8fafc;
border-bottom-color: #64748b;
}
html.theme-dark .table tbody tr:hover td {
background-color: rgba(51, 65, 85, 0.35);
}
html.theme-dark .alert-secondary {
background-color: #334155;
border-color: #475569;
color: #f1f5f9;
}
html.theme-dark .alert-secondary a,
html.theme-dark .alert-secondary .nav-link {
color: #7dd3fc;
}
html.theme-dark .btn-outline-secondary {
color: #e2e8f0;
border-color: #64748b;
}
html.theme-dark .btn-outline-secondary:hover {
background-color: #334155;
border-color: #94a3b8;
color: #f8fafc;
}
html.theme-dark .about-page__discord {
color: #7dd3fc;
text-decoration: underline;
text-underline-offset: 0.12em;
}
html.theme-dark .about-page__discord:hover {
color: #bae6fd;
}
html.theme-dark .alert-info {
background-color: #164e63;
border-color: #22d3ee;
color: #ecfeff;
}
html.theme-dark .alert-danger {
background-color: #450a0a;
border-color: #991b1b;
color: #fecaca;
}
html.theme-dark .alert-success {
background-color: #052e16;
border-color: #166534;
color: #bbf7d0;
}
html.theme-dark .alert-warning {
background-color: #422006;
border-color: #b45309;
color: #fde68a;
}
html.theme-dark .form-control,
html.theme-dark .form-select {
background-color: #1e293b;
color: #e2e8f0;
border-color: #475569;
}
html.theme-dark .form-control::placeholder {
color: #94a3b8;
}
html.theme-dark .form-check-input {
background-color: #334155;
border-color: #64748b;
}
html.theme-dark .form-check-input:checked {
background-color: #38bdf8;
border-color: #0ea5e9;
}
html.theme-dark .card {
background-color: #1e293b;
border-color: #334155;
color: #e2e8f0;
}
html.theme-dark .list-group-item {
background-color: #1e293b;
border-color: #334155;
color: #e2e8f0;
}
html.theme-dark .dropdown-menu {
background-color: #1e293b;
border-color: #334155;
}
html.theme-dark .dropdown-item {
color: #e2e8f0;
}
html.theme-dark .dropdown-item:hover,
html.theme-dark .dropdown-item:focus {
background-color: #334155;
color: #f8fafc;
}
html.theme-dark .dropdown-divider {
border-top-color: #334155;
}
html.theme-dark #blazor-error-ui {
background: #422006;
color: #fde68a;
box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.35);
}
html.theme-dark [data-testid="cookie-consent-banner"] {
background: #1e293b;
border-top-color: #334155;
box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.25);
}
html.theme-dark [data-testid="cookie-consent-banner"] .cookie-consent-banner__text {
color: #e2e8f0;
}
html.theme-dark [data-testid="cookie-consent-banner"] .btn-primary {
background-color: #38bdf8;
border-color: #0ea5e9;
color: #0f172a;
}
html.theme-dark [data-testid="cookie-consent-banner"] .btn-primary:hover {
background-color: #7dd3fc;
border-color: #38bdf8;
color: #0f172a;
}
html.theme-dark [data-testid="cookie-consent-banner"] .btn-secondary {
background-color: #334155;
border-color: #475569;
color: #f8fafc;
}
html.theme-dark [data-testid="cookie-consent-banner"] .btn-secondary:hover {
background-color: #475569;
border-color: #64748b;
color: #fff;
}