/**
* Thèmes UI : classes sur — theme-light | theme-doom-nord | theme-dark
* Complète Bootstrap / main.css (couleurs explicites dans main.css).
*/
/* -------------------------------------------------------------------------- */
/* Clair (défaut explicite — réaligne si bascule depuis un thème sombre) */
/* -------------------------------------------------------------------------- */
html.theme-light {
color-scheme: light;
--theme-page-bg: #ffffff;
--theme-header-bg: #ffffff;
--theme-header-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
--theme-footer-bg: #f8f9fa;
--theme-footer-border: #dee2e6;
--theme-text: #212529;
--theme-link: #0d6efd;
--theme-nav-bg: #f8f9fa;
--theme-nav-text: rgba(0, 0, 0, 0.65);
--theme-nav-border: rgba(0, 0, 0, 0.1);
--theme-card-bg: #ffffff;
--theme-card-border: rgba(0, 0, 0, 0.125);
--theme-input-bg: #ffffff;
--theme-muted: #6c757d;
}
html.theme-light .body-landing {
background-color: var(--theme-page-bg);
color: var(--theme-text);
}
html.theme-light .main-header {
background-color: var(--theme-header-bg);
box-shadow: var(--theme-header-shadow);
}
html.theme-light .main-header a {
color: var(--theme-text);
}
html.theme-light .main-footer {
background-color: var(--theme-footer-bg);
border-top-color: var(--theme-footer-border);
color: var(--theme-text);
}
html.theme-light .main-footer a {
color: var(--theme-link);
}
html.theme-light nav.navbar {
background-color: var(--theme-nav-bg) !important;
border: 1px solid var(--theme-nav-border);
}
html.theme-light nav.navbar .nav-link {
color: var(--theme-nav-text);
}
html.theme-light .card {
background-color: var(--theme-card-bg);
border-color: var(--theme-card-border);
color: var(--theme-text);
}
html.theme-light .text-muted {
color: var(--theme-muted) !important;
}
/* -------------------------------------------------------------------------- */
/* Sombre */
/* -------------------------------------------------------------------------- */
html.theme-dark {
color-scheme: dark;
--theme-page-bg: #121212;
--theme-header-bg: #1a1a1a;
--theme-header-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
--theme-footer-bg: #161616;
--theme-footer-border: #333333;
--theme-text: #e8e8ea;
--theme-link: #6ea8fe;
--theme-nav-bg: #242424;
--theme-nav-text: rgba(255, 255, 255, 0.82);
--theme-nav-border: rgba(255, 255, 255, 0.08);
--theme-card-bg: #1e1e1e;
--theme-card-border: rgba(255, 255, 255, 0.12);
--theme-input-bg: #2a2a2a;
--theme-muted: #a1a1aa;
}
html.theme-dark .body-landing {
background-color: var(--theme-page-bg);
color: var(--theme-text);
}
html.theme-dark .main-header {
background-color: var(--theme-header-bg);
box-shadow: var(--theme-header-shadow);
}
html.theme-dark .main-header a {
color: var(--theme-text);
}
html.theme-dark .main-footer {
background-color: var(--theme-footer-bg);
border-top-color: var(--theme-footer-border);
color: var(--theme-text);
}
html.theme-dark .main-footer a {
color: var(--theme-link);
}
html.theme-dark nav.navbar {
background-color: var(--theme-nav-bg) !important;
border: 1px solid var(--theme-nav-border);
}
html.theme-dark nav.navbar .nav-link {
color: var(--theme-nav-text);
}
html.theme-dark nav.navbar .dropdown-menu {
background-color: var(--theme-card-bg);
border-color: var(--theme-card-border);
}
html.theme-dark nav.navbar .dropdown-item {
color: var(--theme-text);
}
html.theme-dark nav.navbar .dropdown-item:hover,
html.theme-dark nav.navbar .dropdown-item:focus {
background-color: var(--theme-nav-bg);
color: var(--theme-text);
}
html.theme-dark .navbar-toggler-icon {
filter: invert(1);
}
html.theme-dark .card {
background-color: var(--theme-card-bg);
border-color: var(--theme-card-border);
color: var(--theme-text);
}
html.theme-dark .card-header {
background-color: rgba(255, 255, 255, 0.04);
border-bottom-color: var(--theme-card-border);
color: var(--theme-text);
}
html.theme-dark .text-muted {
color: var(--theme-muted) !important;
}
html.theme-dark .form-control,
html.theme-dark .form-select {
background-color: var(--theme-input-bg);
border-color: var(--theme-card-border);
color: var(--theme-text);
}
html.theme-dark .btn-close {
filter: invert(1);
}
html.theme-dark .alert {
border-color: var(--theme-card-border);
}
/* -------------------------------------------------------------------------- */
/* Doom / Nord — palette type Nord */
/* -------------------------------------------------------------------------- */
html.theme-doom-nord {
color-scheme: dark;
--theme-page-bg: #2e3440;
--theme-header-bg: #3b4252;
--theme-header-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
--theme-footer-bg: #2e3440;
--theme-footer-border: #4c566a;
--theme-text: #eceff4;
--theme-link: #88c0d0;
--theme-nav-bg: #434c5e;
--theme-nav-text: #eceff4;
--theme-nav-border: #4c566a;
--theme-card-bg: #3b4252;
--theme-card-border: #4c566a;
--theme-input-bg: #434c5e;
--theme-muted: #aeb3bb;
}
html.theme-doom-nord .body-landing {
background-color: var(--theme-page-bg);
color: var(--theme-text);
}
html.theme-doom-nord .main-header {
background-color: var(--theme-header-bg);
box-shadow: var(--theme-header-shadow);
}
html.theme-doom-nord .main-header a {
color: var(--theme-text);
}
html.theme-doom-nord .main-footer {
background-color: var(--theme-footer-bg);
border-top-color: var(--theme-footer-border);
color: var(--theme-text);
}
html.theme-doom-nord .main-footer a {
color: var(--theme-link);
}
html.theme-doom-nord nav.navbar {
background-color: var(--theme-nav-bg) !important;
border: 1px solid var(--theme-nav-border);
}
html.theme-doom-nord nav.navbar .nav-link {
color: var(--theme-nav-text);
}
html.theme-doom-nord nav.navbar .dropdown-menu {
background-color: var(--theme-card-bg);
border-color: var(--theme-card-border);
}
html.theme-doom-nord nav.navbar .dropdown-item {
color: var(--theme-text);
}
html.theme-doom-nord nav.navbar .dropdown-item:hover,
html.theme-doom-nord nav.navbar .dropdown-item:focus {
background-color: #434c5e;
color: var(--theme-text);
}
html.theme-doom-nord .navbar-toggler-icon {
filter: invert(1);
}
html.theme-doom-nord .card {
background-color: var(--theme-card-bg);
border-color: var(--theme-card-border);
color: var(--theme-text);
}
html.theme-doom-nord .card-header {
background-color: rgba(46, 52, 64, 0.6);
border-bottom-color: var(--theme-card-border);
color: var(--theme-text);
}
html.theme-doom-nord .text-muted {
color: var(--theme-muted) !important;
}
html.theme-doom-nord .form-control,
html.theme-doom-nord .form-select {
background-color: var(--theme-input-bg);
border-color: var(--theme-card-border);
color: var(--theme-text);
}
html.theme-doom-nord .btn-close {
filter: invert(1);
}
html.theme-doom-nord .alert {
border-color: var(--theme-card-border);
}
/* Sidebar ville (stats) — lit les variables du thème actif */
html.theme-dark .city-sidebar {
background-color: var(--theme-footer-bg);
border-right-color: var(--theme-footer-border);
}
html.theme-dark .city-sidebar .nav-link {
color: var(--theme-text);
}
html.theme-dark .city-sidebar .nav-link:hover {
background-color: var(--theme-card-bg);
}
html.theme-dark .city-sidebar .sidebar-heading {
color: var(--theme-muted);
}
html.theme-dark .city-sidebar .nav-link.sidebar-section-in-view {
background-color: rgba(110, 168, 254, 0.18);
color: var(--theme-link);
}
html.theme-doom-nord .city-sidebar {
background-color: #2e3440;
border-right-color: #4c566a;
}
html.theme-doom-nord .city-sidebar .nav-link {
color: #eceff4;
}
html.theme-doom-nord .city-sidebar .nav-link:hover {
background-color: #434c5e;
}
html.theme-doom-nord .city-sidebar .sidebar-heading {
color: #aeb3bb;
}
html.theme-doom-nord .city-sidebar .nav-link.sidebar-section-in-view {
background-color: rgba(136, 192, 208, 0.2);
color: #88c0d0;
}