/** * Apparence sombre de Mela. * * À charger APRÈS style.css, composants.css et superadmin.css : cette feuille * ne fait que redéfinir, elle ne pose aucune mise en page. * * ── Comment elle fonctionne ── * * Bootstrap 5.3 gère son propre thème par l'attribut `data-bs-theme` sur * `` : tous ses composants (boutons, modales, formulaires, tableaux) * suivent seuls. Le gabarit NiceAdmin, lui, écrit ses couleurs en dur — c'est * lui que cette feuille rhabille, plus les composants maison. * * Les feuilles composants.css et superadmin.css passent, elles, par des * variables `--sa-*` : les redéfinir ici suffit à les basculer entièrement. * * ── La palette ── * * La barre latérale était déjà sombre dans le gabarit d'origine (#0f172a). Elle * sert donc de repère : la page s'enfonce sous elle, les cartes remontent * au-dessus. Quatre niveaux, du plus sombre au plus clair : * * fond (page) → latérale → surface (cartes, en-tête) → surface haute * * Tous les couples texte/fond dépassent 4,5:1 (WCAG 2.1 AA), les séparations * 1,5:1. Vérifié par mesure, pas à l'œil. */ [data-bs-theme='dark'] { /* ── Surfaces, du plus profond au plus haut ── */ --mela-fond: #0b1220; --mela-laterale: #0f172a; --mela-surface: #151d2e; --mela-surface-haute: #1e2739; /* ── Texte ── */ --mela-titre: #eef2fa; --mela-texte: #dfe5f0; --mela-texte-doux: #9fabc4; /* ── Traits et accents ── */ --mela-bordure: #33405e; --mela-bordure-douce: #26314a; --mela-primaire: #8b9aff; --mela-primaire-survol: #a5b4fc; /* Aplats d'état, assez clairs pour rester lisibles sur fond sombre. */ --mela-succes: #6ee7a8; --mela-danger: #ffb4ab; --mela-avertissement: #fcd34d; --mela-info: #7dd3fc; /* * ── Jetons repris par les écrans ── * * Les gabarits écrivaient leurs couleurs en dur. Elles y sont désormais * posées sous la forme `var(--mela-…, couleur claire)` : tant que ces jetons * ne sont pas définis — c'est le cas en clair — la valeur de repli s'applique * et le rendu ne bouge pas d'un pixel. Ils ne prennent effet qu'ici. * * Les teintes d'état sont conservées : sur ces écrans, le vert d'un encaissement * et le rouge d'un impayé portent du sens, pas seulement du décor. Elles sont * posées en voile translucide pour rester à leur place dans la hiérarchie des * surfaces, et leur texte remonte assez clair pour dépasser 4,5:1. */ --mela-fond-succes: rgba(110, 231, 168, 0.14); --mela-fond-info: rgba(139, 154, 255, 0.16); --mela-fond-alerte: rgba(252, 211, 77, 0.14); --mela-fond-danger: rgba(255, 180, 171, 0.14); --mela-texte-succes: var(--mela-succes); --mela-texte-info: var(--mela-primaire-survol); --mela-texte-danger: var(--mela-danger); --mela-texte-alerte: var(--mela-avertissement); /* Filets des mêmes pastilles : la teinte, posée assez discrètement pour cerner sans crier. */ --mela-bordure-succes: rgba(110, 231, 168, 0.32); --mela-bordure-info: rgba(139, 154, 255, 0.34); --mela-bordure-alerte: rgba(252, 211, 77, 0.32); --mela-bordure-danger: rgba(255, 180, 171, 0.32); /* * Variables partagées par composants.css et superadmin.css : les redéfinir * bascule ces deux feuilles d'un coup, sans y toucher. */ --sa-border: var(--mela-bordure-douce); --sa-bg: var(--mela-fond); --sa-ink: var(--mela-titre); --sa-muted: var(--mela-texte-doux); --sa-accent: var(--mela-primaire); --sa-danger: #ff7b85; /* * Jetons Bootstrap. Le reste de ses composants en découle : on ne réécrit * donc ni les boutons, ni les modales, ni les formulaires. */ --bs-body-bg: var(--mela-fond); --bs-body-color: var(--mela-texte); --bs-emphasis-color: var(--mela-titre); --bs-secondary-color: var(--mela-texte-doux); --bs-border-color: var(--mela-bordure); --bs-border-color-translucent: rgba(255, 255, 255, 0.12); --bs-link-color: var(--mela-primaire); --bs-link-hover-color: var(--mela-primaire-survol); --bs-heading-color: var(--mela-titre); /* Les widgets natifs — ascenseurs, sélecteurs de date — suivent aussi. */ color-scheme: dark; } /*-------------------------------------------------------------- # Fond général et typographie --------------------------------------------------------------*/ [data-bs-theme='dark'] body { background: var(--mela-fond); color: var(--mela-texte); } [data-bs-theme='dark'] a { color: var(--mela-primaire); } [data-bs-theme='dark'] a:hover { color: var(--mela-primaire-survol); } [data-bs-theme='dark'] .pagetitle h1, [data-bs-theme='dark'] .card-title, [data-bs-theme='dark'] .dashboard .info-card h6, [data-bs-theme='dark'] .logo span, [data-bs-theme='dark'] .accordion-button:not(.collapsed) { color: var(--mela-titre); } [data-bs-theme='dark'] .card-title span, [data-bs-theme='dark'] .text-muted, [data-bs-theme='dark'] .dashboard .news p, [data-bs-theme='dark'] .dashboard .activity .activity-item .activite-label { color: var(--mela-texte-doux) !important; } /*-------------------------------------------------------------- # En-tête --------------------------------------------------------------*/ [data-bs-theme='dark'] .header { background-color: var(--mela-surface); border-bottom: 1px solid var(--mela-bordure-douce); } [data-bs-theme='dark'] .header .toggle-sidebar-btn, [data-bs-theme='dark'] .header-nav .nav-icon, [data-bs-theme='dark'] .header-nav .nav-profile, [data-bs-theme='dark'] .header .search-form button i { color: var(--mela-texte); } [data-bs-theme='dark'] .header .search-bar, [data-bs-theme='dark'] .header .search-form input { background: var(--mela-surface-haute); color: var(--mela-texte); } [data-bs-theme='dark'] .header-nav .nav-profile img { background: var(--mela-surface-haute); } /*-------------------------------------------------------------- # Barre latérale # # Elle était déjà sombre : on ne la repeint pas, on aligne seulement son # filet sur la palette pour qu'elle se détache encore de la page. --------------------------------------------------------------*/ [data-bs-theme='dark'] .sidebar { background: var(--mela-laterale); border-right: 1px solid var(--mela-bordure-douce); } /*-------------------------------------------------------------- # Cartes et conteneurs --------------------------------------------------------------*/ [data-bs-theme='dark'] .card { background-color: var(--mela-surface); border: 1px solid var(--mela-bordure-douce); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); } [data-bs-theme='dark'] .card-footer, [data-bs-theme='dark'] .card-header { background-color: transparent; border-color: var(--mela-bordure-douce); } [data-bs-theme='dark'] .accordion-item { background-color: var(--mela-surface); border-color: var(--mela-bordure-douce); } [data-bs-theme='dark'] .accordion-flush .accordion-body, [data-bs-theme='dark'] .accordion-flush .accordion-button:not(.collapsed) { color: var(--mela-texte); } /*-------------------------------------------------------------- # Menus déroulants --------------------------------------------------------------*/ [data-bs-theme='dark'] .dropdown-menu { background-color: var(--mela-surface-haute); border: 1px solid var(--mela-bordure); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); } [data-bs-theme='dark'] .dropdown-menu .dropdown-item, [data-bs-theme='dark'] .dropdown-menu .dropdown-footer a, [data-bs-theme='dark'] .header-nav .profile .dropdown-header h6, [data-bs-theme='dark'] .header-nav .messages .message-item h4 { color: var(--mela-texte); } [data-bs-theme='dark'] .dropdown-menu .dropdown-item:hover, [data-bs-theme='dark'] .header-nav .profile .dropdown-item:hover, [data-bs-theme='dark'] .header-nav .notifications .notification-item:hover, [data-bs-theme='dark'] .header-nav .messages .message-item:hover { background-color: rgba(139, 154, 255, 0.12); color: var(--mela-titre); } [data-bs-theme='dark'] .dropdown-menu .dropdown-divider { border-top-color: var(--mela-bordure); } /* La flèche du menu est un carré pivoté : elle doit prendre la même surface. */ [data-bs-theme='dark'] .dropdown-menu-arrow::before { background: var(--mela-surface-haute); border-color: var(--mela-bordure); } [data-bs-theme='dark'] .header-nav .notifications .notification-item p, [data-bs-theme='dark'] .header-nav .messages .message-item p, [data-bs-theme='dark'] .dashboard .filter .icon, [data-bs-theme='dark'] .dashboard .filter .dropdown-header h6 { color: var(--mela-texte-doux); } /*-------------------------------------------------------------- # Fil d'Ariane, onglets et pied de page --------------------------------------------------------------*/ [data-bs-theme='dark'] .breadcrumb, [data-bs-theme='dark'] .breadcrumb a, [data-bs-theme='dark'] .breadcrumb .breadcrumb-item::before { color: var(--mela-texte-doux); } [data-bs-theme='dark'] .breadcrumb a:hover, [data-bs-theme='dark'] .breadcrumb .active { color: var(--mela-texte); } [data-bs-theme='dark'] .nav-tabs-bordered { border-bottom-color: var(--mela-bordure-douce); } [data-bs-theme='dark'] .nav-tabs-bordered .nav-link { color: var(--mela-texte-doux); } [data-bs-theme='dark'] .nav-tabs-bordered .nav-link:hover, [data-bs-theme='dark'] .nav-tabs-bordered .nav-link.active { color: var(--mela-primaire); } [data-bs-theme='dark'] .footer { background-color: var(--mela-surface); border-top: 1px solid var(--mela-bordure-douce); } [data-bs-theme='dark'] .footer .copyright, [data-bs-theme='dark'] .footer .credits { color: var(--mela-texte-doux); } /*-------------------------------------------------------------- # Tableaux --------------------------------------------------------------*/ [data-bs-theme='dark'] .table, [data-bs-theme='dark'] .main .table { --bs-table-bg: transparent; --bs-table-color: var(--mela-texte); --bs-table-border-color: var(--mela-bordure-douce); --bs-table-striped-bg: rgba(255, 255, 255, 0.03); --bs-table-hover-bg: rgba(139, 154, 255, 0.08); --bs-table-hover-color: var(--mela-titre); } [data-bs-theme='dark'] .table thead th, [data-bs-theme='dark'] .main .table thead th, [data-bs-theme='dark'] .dashboard .recent-sales .table thead, [data-bs-theme='dark'] .dashboard .top-selling .table thead, [data-bs-theme='dark'] .modules-matrice thead th { background: var(--mela-surface-haute); color: var(--mela-titre); border-color: var(--mela-bordure-douce); } [data-bs-theme='dark'] .main .table tbody td, [data-bs-theme='dark'] .modules-matrice tbody td.col-module { border-bottom-color: var(--mela-bordure-douce); background: transparent; } [data-bs-theme='dark'] .modules-matrice .group-row td { background: var(--mela-surface-haute); } /*-------------------------------------------------------------- # Aplats pâles des raccourcis et pastilles # # Les classes `bg-*-light` du gabarit sont des pastels prévus pour du blanc. # Sur fond sombre, on garde la teinte mais on la pose en voile translucide, et # l'icône reprend sa couleur vive : le repérage par la couleur est conservé. --------------------------------------------------------------*/ [data-bs-theme='dark'] .bg-primary-light { background-color: rgba(65, 84, 241, 0.18); } [data-bs-theme='dark'] .bg-secondary-light { background-color: rgba(159, 171, 196, 0.16); } [data-bs-theme='dark'] .bg-success-light { background-color: rgba(45, 202, 106, 0.18); } [data-bs-theme='dark'] .bg-danger-light { background-color: rgba(244, 81, 92, 0.18); } [data-bs-theme='dark'] .bg-warning-light { background-color: rgba(247, 144, 9, 0.18); } [data-bs-theme='dark'] .bg-info-light { background-color: rgba(125, 211, 252, 0.18); } [data-bs-theme='dark'] .bg-dark-light { background-color: rgba(255, 255, 255, 0.1); } [data-bs-theme='dark'] .text-primary { color: var(--mela-primaire) !important; } [data-bs-theme='dark'] .text-success { color: var(--mela-succes) !important; } [data-bs-theme='dark'] .text-danger { color: var(--mela-danger) !important; } [data-bs-theme='dark'] .text-warning { color: var(--mela-avertissement) !important; } [data-bs-theme='dark'] .text-info { color: var(--mela-info) !important; } [data-bs-theme='dark'] .text-dark { color: var(--mela-texte) !important; } /*-------------------------------------------------------------- # Composants maison --------------------------------------------------------------*/ [data-bs-theme='dark'] .stat-tile, [data-bs-theme='dark'] .confirm-card, [data-bs-theme='dark'] .licence-info-card { background: var(--mela-surface); border-color: var(--mela-bordure-douce); color: var(--mela-texte); } [data-bs-theme='dark'] .stat-tile-clickable:hover { border-color: var(--mela-bordure); } [data-bs-theme='dark'] .stat-delta-up { background: rgba(110, 231, 168, 0.16); color: var(--mela-succes); } [data-bs-theme='dark'] .stat-delta-down { background: rgba(255, 180, 171, 0.16); color: var(--mela-danger); } [data-bs-theme='dark'] .stat-delta-flat { background: rgba(159, 171, 196, 0.16); color: var(--mela-texte-doux); } [data-bs-theme='dark'] .confirm-icon-danger { background: rgba(255, 180, 171, 0.16); } [data-bs-theme='dark'] .confirm-icon-warning { background: rgba(252, 211, 77, 0.16); } [data-bs-theme='dark'] .confirm-icon-primary { background: rgba(139, 154, 255, 0.16); } [data-bs-theme='dark'] .confirm-btn-annuler { background: var(--mela-surface-haute); color: var(--mela-texte); } [data-bs-theme='dark'] .confirm-btn-annuler:hover { background: var(--mela-bordure); } [data-bs-theme='dark'] .licence-key { background: var(--mela-surface-haute); color: var(--mela-texte); } /* Pastilles d'initiales : la teinte reste, la surface s'assombrit. */ [data-bs-theme='dark'] .mrc-av { --mrc-av-fond: var(--mela-surface-haute); --mrc-av-texte: var(--mela-primaire-survol); } [data-bs-theme='dark'] .mrc-photo-repli, [data-bs-theme='dark'] .ecole-infos li i { color: var(--mela-texte-doux); } /*-------------------------------------------------------------- # Champs de saisie # # Bootstrap habille déjà `.form-control` par ses jetons. On complète les # greffons qui posent leurs propres couleurs. --------------------------------------------------------------*/ [data-bs-theme='dark'] .select2-container--default .select2-selection--single, [data-bs-theme='dark'] .select2-container--default .select2-selection--multiple, [data-bs-theme='dark'] .select2-dropdown { background-color: var(--mela-surface-haute); border-color: var(--mela-bordure); color: var(--mela-texte); } [data-bs-theme='dark'] .select2-container--default .select2-selection--single .select2-selection__rendered, [data-bs-theme='dark'] .select2-results__option { color: var(--mela-texte); } [data-bs-theme='dark'] .select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: var(--mela-primaire); color: #0b1220; } [data-bs-theme='dark'] .select2-search--dropdown .select2-search__field { background-color: var(--mela-fond); border-color: var(--mela-bordure); color: var(--mela-texte); } [data-bs-theme='dark'] .datatable-wrapper .datatable-input, [data-bs-theme='dark'] .datatable-wrapper .datatable-selector { background-color: var(--mela-surface-haute); border-color: var(--mela-bordure); color: var(--mela-texte); } [data-bs-theme='dark'] .datatable-pagination a { color: var(--mela-texte); } [data-bs-theme='dark'] .datatable-pagination .datatable-active a { background-color: var(--mela-primaire); color: #0b1220; } /*-------------------------------------------------------------- # Sélecteur d'apparence, dans le menu du compte --------------------------------------------------------------*/ .apparence-choix { display: flex; gap: 4px; padding: 4px; margin: 0 12px 4px; border-radius: 10px; background: rgba(1, 41, 112, 0.06); } [data-bs-theme='dark'] .apparence-choix { background: rgba(255, 255, 255, 0.06); } .apparence-option { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px; border: 0; border-radius: 8px; background: transparent; color: #51678f; font-size: 11px; line-height: 1.2; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; } .apparence-option i { font-size: 15px; } .apparence-option:hover { background: rgba(65, 84, 241, 0.1); color: #4154f1; } /* L'état retenu ne repose pas sur la seule couleur : le fond change aussi. */ .apparence-option[aria-pressed='true'] { background: #fff; color: #4154f1; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.12); font-weight: 600; } [data-bs-theme='dark'] .apparence-option { color: var(--mela-texte-doux); } [data-bs-theme='dark'] .apparence-option:hover { background: rgba(139, 154, 255, 0.14); color: var(--mela-primaire-survol); } [data-bs-theme='dark'] .apparence-option[aria-pressed='true'] { background: var(--mela-surface); color: var(--mela-primaire-survol); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); } .apparence-option:focus-visible { outline: 2px solid var(--mela-primaire, #4154f1); outline-offset: 2px; } /*-------------------------------------------------------------- # Mouvement --------------------------------------------------------------*/ @media (prefers-reduced-motion: reduce) { .apparence-option { transition: none; } }