| 1 | /* MAPS Connect - Personalización del color |
| 2 | Cuando <html> lleva el atributo data-color (gestionado por js/colores.js), |
| 3 | estas reglas reemplazan las variables del tema por las variables --accent-* |
| 4 | calculadas a partir del color elegido por el usuario. El resto de la app |
| 5 | se "sintoniza" automáticamente porque consume estas variables. */ |
| 6 | |
| 7 | html[data-color] { |
| 8 | --secondary-color: var(--accent-dark); |
| 9 | --link-color: var(--accent-dark); |
| 10 | --sidebar-bg: var(--accent-deep); |
| 11 | --sidebar-border: var(--accent-dark); |
| 12 | --sidebar-item-hover-bg: var(--accent-dark); |
| 13 | --sidebar-item-active-bg: var(--accent-dark); |
| 14 | --sidebar-accent: var(--accent-bright); |
| 15 | --topbar-bg: var(--accent-dark); |
| 16 | --btn-primary-text: var(--accent-dark); |
| 17 | |
| 18 | /* Módulos con paleta propia (perfil, mensajes, comunidad) */ |
| 19 | --hub-accent: var(--accent-dark); |
| 20 | --hub-accent-dark: var(--accent-deep); |
| 21 | --hub-accent-soft: var(--accent-soft); |
| 22 | } |
| 23 | |
| 24 | /* En modo oscuro el acento debe verse claro sobre fondo oscuro. */ |
| 25 | html[data-color].dark-mode { |
| 26 | --primary-color: var(--accent-mid); |
| 27 | --link-color: var(--accent-bright); |
| 28 | --secondary-color: var(--accent-bright); |
| 29 | --btn-primary-text: var(--accent-bright); |
| 30 | --hub-accent: var(--accent-bright); |
| 31 | --hub-accent-dark: var(--accent); |
| 32 | --hub-accent-soft: var(--accent-deep); |
| 33 | } |