/* ============================================================================ MODO OSCURO — Paleta personalizada anclada al azul del menú (#001532) ---------------------------------------------------------------------------- Sustituye el tono índigo/morado por defecto de Vuexy por una paleta NAVY monocromática (toda la misma familia de azul) + un único acento azul de marca (#4383ff, ya usado en demo.css). Objetivo: un look oscuro cohesivo, sin mezcla de colores, que case con el menú lateral. • ITERAR EL TONO: edita SOLO las variables --app-dark-* del primer bloque. Todo (fondos, bordes, acento, gráficos vía config.js) deriva de ahí. • REVERTIR AL MORADO ORIGINAL: comenta/elimina el de este fichero en templates/base.html.twig (marcado "dark-theme.css") y restaura los valores anotados en colors_dark de assets/js/config.js. Solo aplica bajo .dark-style; el modo claro queda intacto. ============================================================================ */ .dark-style { /* ----------------------- PALETA (mandos de iteración) ---------------------- */ --app-dark-body-bg: #041021; /* fondo de página (el más oscuro) */ --app-dark-body-bg-rgb: 4, 16, 33; --app-dark-card-bg: #001532; /* tarjetas / superficies = color del menú */ --app-dark-card-bg-rgb: 0, 21, 50; --app-dark-elevated-bg: #0a2846; /* inputs, dropdowns, popovers (resaltan sobre la card) */ --app-dark-border: #123a60; /* bordes */ --app-dark-text: #aebfd6; /* texto cuerpo */ --app-dark-text-rgb: 174, 191, 214; --app-dark-heading: #eaf0f9; /* títulos */ --app-dark-muted: #7890b0; /* texto atenuado */ /* Acento de RELLENO (botones, fondos): azul oscuro con texto blanco encima */ --app-dark-accent: #12147f; --app-dark-accent-rgb: 18, 20, 127; --app-dark-accent-hover: #1c1fb0; /* relleno en hover/active (más claro para feedback) */ /* Acento de TEXTO (enlaces, breadcrumb, menú activo): variante clara del mismo azul para que contraste y se lea sobre el fondo oscuro */ --app-dark-accent-text: #6c7bf0; --app-dark-accent-text-rgb: 108, 123, 240; --app-dark-accent-text-hover: #8e9af5; /* ------------- Mapeo a variables Bootstrap (cubren muchos componentes) ------ */ --bs-body-bg: var(--app-dark-body-bg); --bs-body-bg-rgb: var(--app-dark-body-bg-rgb); --bs-body-color: var(--app-dark-text); --bs-body-color-rgb: var(--app-dark-text-rgb); --bs-border-color: var(--app-dark-border); /* Primario (rellenos) usa el oscuro; los enlaces usan la variante clara legible */ --bs-primary: var(--app-dark-accent); --bs-primary-rgb: var(--app-dark-accent-rgb); --bs-link-color: var(--app-dark-accent-text); --bs-link-color-rgb: var(--app-dark-accent-text-rgb); --bs-link-hover-color: var(--app-dark-accent-text-hover); } /* Fondo de página: el usa un literal #25293c (no la variable) en theme-default-dark.css, por eso hay que forzarlo aquí. */ .dark-style body { background-color: var(--app-dark-body-bg); } .dark-style .bg-body { background-color: var(--app-dark-body-bg) !important; } /* Texto atenuado y títulos */ .dark-style .text-muted { color: var(--app-dark-muted) !important; } .dark-style h1, .dark-style h2, .dark-style h3, .dark-style h4, .dark-style h5, .dark-style h6, .dark-style .h1, .dark-style .h2, .dark-style .h3, .dark-style .h4, .dark-style .h5, .dark-style .h6 { color: var(--app-dark-heading); } /* ---------- Superficies basadas en variables de componente (--bs-*-bg) -------- */ .dark-style .card { --bs-card-bg: var(--app-dark-card-bg); } .dark-style .dropdown-menu { --bs-dropdown-bg: var(--app-dark-elevated-bg); } .dark-style .modal { --bs-modal-bg: var(--app-dark-card-bg); } .dark-style .popover { --bs-popover-bg: var(--app-dark-card-bg); --bs-popover-header-bg: var(--app-dark-card-bg); } .dark-style .offcanvas { --bs-offcanvas-bg: var(--app-dark-card-bg); } .dark-style .toast { --bs-toast-header-bg: var(--app-dark-card-bg); } .dark-style .accordion-button, .dark-style .accordion-item { --bs-accordion-bg: var(--app-dark-card-bg); --bs-accordion-active-bg: var(--app-dark-card-bg); } .dark-style .nav-tabs { --bs-nav-tabs-link-active-bg: var(--app-dark-card-bg); } /* ----------------------- Navbar superior (rgba con 0.95) ---------------------- */ .dark-style .bg-navbar-theme { background-color: rgba(var(--app-dark-card-bg-rgb), 0.95) !important; } /* ----------- Inputs / formularios (literales #2f3349 en core-dark) ------------ */ .dark-style .form-control, .dark-style .form-control:focus, .dark-style .form-select, .dark-style .input-group-text, .dark-style select.form-select option { background-color: var(--app-dark-elevated-bg); } /* --------------------- Pestañas y su contenido asociado ----------------------- */ .dark-style .nav-tabs, .dark-style .nav ~ .tab-content { background-color: var(--app-dark-card-bg); } /* ------------------------- Panel de filtros lateral --------------------------- */ .dark-style .sidebar { background-color: var(--app-dark-card-bg); } /* ----------------------------- Divisores con texto --------------------------- */ .dark-style .divider .divider-text { background-color: var(--app-dark-body-bg); } /* ------------- Páginas de autenticación (login/registro) — fondo del panel ----- */ .dark-style .authentication-wrapper.authentication-bg { background-color: var(--app-dark-body-bg); } /* ============================================================================ ACENTO — neutralizar el morado #7367f0 (literal en core/theme) por el azul de marca. Solo los puntos visibles; scopeado a .dark-style. ============================================================================ */ /* Botones primarios */ .dark-style .btn-primary { background-color: var(--app-dark-accent); border-color: var(--app-dark-accent); } .dark-style .btn-primary:hover, .dark-style .btn-primary:focus, .dark-style .btn-primary:active, .dark-style .btn-primary.active, .dark-style .btn-primary.show { background-color: var(--app-dark-accent-hover) !important; border-color: var(--app-dark-accent-hover) !important; } /* Botón outline: borde/texto en la variante clara para que se vea sobre el fondo oscuro */ .dark-style .btn-outline-primary { color: var(--app-dark-accent-text); border-color: var(--app-dark-accent-text); } .dark-style .btn-outline-primary:hover { background-color: var(--app-dark-accent-text); border-color: var(--app-dark-accent-text); color: #fff; } /* Ítem activo del menú lateral: fondo sólido con el acento, sin degradado ni sombra */ .dark-style .bg-menu-theme.menu-vertical .menu-item.active > .menu-link:not(.menu-toggle) { background: var(--app-dark-accent); box-shadow: none; } /* Enlaces, breadcrumb y texto primario: variante clara legible */ .dark-style .text-primary { color: var(--app-dark-accent-text) !important; } .dark-style .breadcrumb-item a { color: var(--app-dark-accent-text); } /* Pestañas pills / paginación / checks activos */ .dark-style .nav-pills .nav-link.active, .dark-style .nav-pills .nav-link.active:hover { background-color: var(--app-dark-accent); } .dark-style .page-item.active .page-link { background-color: var(--app-dark-accent); border-color: var(--app-dark-accent); } .dark-style .form-check-input:checked { background-color: var(--app-dark-accent); border-color: var(--app-dark-accent); } /* ============================================================================ FORMULARIOS, SELECT2 y TAGIFY — neutralizar los literales morados que estos componentes traen aparte (#2f3349 fondo, #434968 borde, #7367f0 foco/selección) y sustituirlos por la paleta navy. Scopeado a .dark-style. ============================================================================ */ /* Bordes de inputs (el literal #434968 no usa variable, hay que forzarlo) */ .dark-style .form-control, .dark-style .form-select { border-color: var(--app-dark-border); } /* Foco de inputs/selects: fondo elevado, borde en variante clara y aro de foco */ .dark-style .form-control:focus, .dark-style .form-select:focus { background-color: var(--app-dark-elevated-bg); border-color: var(--app-dark-accent-text); box-shadow: 0 0 0 0.15rem rgba(var(--app-dark-accent-text-rgb), 0.25); } /* --- select2: la caja visible, el desplegable y el buscador --- */ .dark-style .select2-container--default .select2-selection { background-color: var(--app-dark-elevated-bg); border-color: var(--app-dark-border); } .dark-style .select2-container--default.select2-container--focus .select2-selection, .dark-style .select2-container--default.select2-container--open .select2-selection { border-color: var(--app-dark-accent-text) !important; } .dark-style .select2-dropdown { background: var(--app-dark-elevated-bg); border-color: var(--app-dark-border); } .dark-style .select2-container--default .select2-search--dropdown .select2-search__field { background: var(--app-dark-elevated-bg); border-color: var(--app-dark-border); } /* Chips de selección múltiple */ .dark-style .select2-primary .select2-container--default .select2-selection--multiple .select2-selection__choice { background: rgba(var(--app-dark-accent-text-rgb), 0.18) !important; color: var(--app-dark-accent-text) !important; } /* Opción resaltada / seleccionada del desplegable */ .dark-style .select2-container--default .select2-results__option--highlighted:not([aria-selected=true]) { background-color: rgba(var(--app-dark-accent-text-rgb), 0.16) !important; color: var(--app-dark-accent-text) !important; } .dark-style .select2-container--default .select2-results__option[role=option][aria-selected=true] { background-color: var(--app-dark-accent) !important; color: #fff; } /* --- tagify: variables del componente (su dropdown era blanco) --- */ .dark-style .tagify { --tag-bg: rgba(var(--app-dark-accent-text-rgb), 0.18); --tag-hover: rgba(var(--app-dark-accent-text-rgb), 0.30); --tag-text-color: var(--app-dark-accent-text); --tagify-dd-bg-color: var(--app-dark-elevated-bg); --tagify-dd-color-primary: var(--app-dark-accent-text); border-color: var(--app-dark-border); } .dark-style .tagify__dropdown__wrapper { background: var(--app-dark-elevated-bg); border-color: var(--app-dark-border); } .dark-style .tagify__dropdown__item--active { background: rgba(var(--app-dark-accent-text-rgb), 0.18); color: var(--app-dark-accent-text); } /* ------------------------- Botones secundarios (grises) ---------------------- */ /* De #a8aaae (gris claro de Vuexy) a un gris oscuro que encaja con el navy */ .dark-style .btn-secondary { background-color: #44474c; border-color: #44474c; } .dark-style .btn-secondary:hover, .dark-style .btn-secondary:focus, .dark-style .btn-secondary:active, .dark-style .btn-secondary.active { background-color: #4f5257; border-color: #4f5257; } /* ------------- Tabla de Notificaciones: fila NO leída (.table-warning) -------- En claro Bootstrap la pinta amarillo claro con texto negro, que en oscuro queda ilegible. La cambiamos a un ámbar tenue sobre el navy con texto claro, manteniendo el matiz "pendiente" pero legible. */ .dark-style .table-warning { --bs-table-color: var(--app-dark-text); --bs-table-bg: rgba(255, 159, 67, 0.13); --bs-table-border-color: var(--app-dark-border); --bs-table-striped-color: var(--app-dark-text); --bs-table-striped-bg: rgba(255, 159, 67, 0.16); --bs-table-active-color: var(--app-dark-text); --bs-table-active-bg: rgba(255, 159, 67, 0.20); --bs-table-hover-color: var(--app-dark-text); --bs-table-hover-bg: rgba(255, 159, 67, 0.18); color: var(--app-dark-text); } /* Iconos de acción (btn-icon) en filas de variante de tabla: core-dark los fuerza a negro (.table-warning/.table-danger .btn-icon { color:#000 }), pensado para los fondos claros del modo claro. En oscuro los devolvemos a color de texto claro. */ .dark-style .table-warning .btn-icon, .dark-style .table-warning .btn-icon i, .dark-style .table-danger .btn-icon, .dark-style .table-danger .btn-icon i, .dark-style .table-success .btn-icon, .dark-style .table-success .btn-icon i, .dark-style .table-info .btn-icon, .dark-style .table-info .btn-icon i { color: var(--app-dark-text); }