/* ============================================================ ADMIN UI — Tema scuro Ridefinisce le stesse CSS custom properties di admin.css sotto [data-theme="dark"] (impostato su da wwwroot/js/theme.js). --c-white/--c-black sono usati direttamente come sfondo/testo in tutto admin.css (non solo tramite --surface-*): vanno ridefiniti anche loro, non solo i token "surface", per una copertura reale. Limite noto: eventuali colori scritti in esadecimale puro (non tramite var(--...)) in admin.css non seguono questo cambio tema. ============================================================ */ :root[data-theme="dark"] { /* Core palette: "carta"/"inchiostro" invertiti */ --c-white: #1c1c22; --c-black: #f2f2f5; --c-fuxia: #ff2e94; --c-fuxia-light: #ff5cad; --c-fuxia-dim: #ff2e9426; /* Scala dei grigi capovolta: 50 (prima sfondo quasi-bianco) diventa il più scuro, 700 (prima testo quasi-nero) diventa il più chiaro */ --c-grey-50: #232329; --c-grey-100: #2b2b32; --c-grey-200: #35353d; --c-grey-300: #46464f; --c-grey-400: #6b6b78; --c-grey-500: #9a9aa8; --c-grey-700: #d3d3db; --c-red: #ff5468; --c-red-dim: #ff546826; /* Surfaces */ --surface-bg: #17171b; --surface-card: #1e1e24; /* Fissa (non derivata da --c-black, che qui è stato invertito): la sidebar deve restare scura in entrambi i temi, non diventare chiara insieme al testo. */ --surface-sidebar: #0c0c0f; /* Ombre più marcate: su sfondo scuro un'ombra nera leggera è quasi invisibile */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, .35); --shadow-sm: 0 2px 8px rgba(0, 0, 0, .45); --shadow-md: 0 4px 20px rgba(0, 0, 0, .55); --shadow-fuxia: 0 4px 20px rgba(255, 46, 148, .30); /* Bootstrap 5.3 pilota il proprio reboot (h1-h6, p, label, .text-muted, bordi, ecc.) con queste CSS custom properties, indipendenti da quelle sopra — senza ridefinirle, titoli/etichette/testo muto restano scuri (illeggibili) anche a tema scuro applicato, verificato in Chrome su /permessi/upsert:
a colore Bootstrap di default (#212529) su sfondo scuro. */ --bs-body-color: #f2f2f5; --bs-body-bg: #17171b; --bs-secondary-color: rgba(242, 242, 245, .65); --bs-tertiary-color: rgba(242, 242, 245, .45); --bs-border-color: rgba(255, 255, 255, .12); --bs-secondary-bg: #2b2b32; --bs-tertiary-bg: #232329; } /* La sidebar è sempre "scura" per design, anche a tema chiaro (admin.css: .admin-sidebar { background: var(--c-black) }, testo con var(--c-white)) — le stesse variabili sono però condivise col resto della UI e vengono invertite sopra per il tema scuro del contenuto principale, il che inverte per sbaglio anche il contrasto bianco-su-nero della sidebar (verificato: sfondo diventava chiaro, testo scuro). Le ripristino ai valori originali (di admin.css) solo dentro .admin-sidebar, cosi' la sidebar resta identica in entrambi i temi, come richiesto. */ :root[data-theme="dark"] .admin-sidebar { --c-white: #ffffff; --c-black: #0a0a0a; --c-fuxia: #e0007a; --c-fuxia-light: #ff3399; --c-fuxia-dim: #f0005a18; --c-grey-100: #f0f0f2; --c-grey-200: #e2e2e6; --c-grey-400: #9898a6; --c-grey-500: #6b6b7a; --surface-card: #ffffff; } /* Cambio di tema morbido invece che a scatto, senza dover toccare admin.css */ html, body, .admin-shell, .admin-main { transition: background-color var(--t-base, 200ms ease), color var(--t-base, 200ms ease); }