/* * Dark Mode — City Theme * * El plugin dark-mode-toggle-block anade la clase "theme-dark" a . * Los colores Core se intercambian; los Chapter permanecen iguales. * * Plugin: https://wordpress.org/plugins/dark-mode-toggle-block/ */ html.theme-dark { --wp--preset--color--core-black: #F5F5F5; --wp--preset--color--core-off-white: #1E1E1E; --wp--preset--color--core-light-gray: #333333; --wp--preset--color--contrast: #F5F5F5; color-scheme: dark; } /* ----------------------------------------------- * Captura de hex hardcoded en estilos inline (dark mode) * * Cuando un bloque tiene colores con hex literal en `style` inline * (en vez de usar las CSS variables del tema), el swap automatico * no se aplica. Aqui se capturan los casos mas comunes. * * TODO: el swap de #E2E2E2 reutiliza --core-light-gray. * Conviene definir una variable propia (ej. --core-grey-medium) * para distinguir gris claro de divisor sutil. * ----------------------------------------------- */ /* Backgrounds blancos / off-white -> fondo oscuro */ html.theme-dark [style*="background-color:#fff"], html.theme-dark [style*="background-color: #fff"], html.theme-dark [style*="background-color:#FFF"], html.theme-dark [style*="background-color: #FFF"], html.theme-dark [style*="background-color:#ffffff"], html.theme-dark [style*="background-color: #ffffff"], html.theme-dark [style*="background-color:#FFFFFF"], html.theme-dark [style*="background-color: #FFFFFF"], html.theme-dark [style*="background-color:#F5F5F5"], html.theme-dark [style*="background-color: #F5F5F5"], html.theme-dark [style*="background-color:#f5f5f5"], html.theme-dark [style*="background-color: #f5f5f5"], html.theme-dark [style*="background:#fff"], html.theme-dark [style*="background: #fff"], html.theme-dark [style*="background:#F5F5F5"], html.theme-dark [style*="background: #F5F5F5"] { background-color: #1E1E1E !important; } /* Backgrounds light-gray -> gris oscuro * TODO: cambiar a una variable propia tipo --core-grey-medium */ html.theme-dark [style*="background-color:#E2E2E2"], html.theme-dark [style*="background-color: #E2E2E2"], html.theme-dark [style*="background-color:#e2e2e2"], html.theme-dark [style*="background-color: #e2e2e2"] { background-color: var(--wp--preset--color--core-light-gray) !important; } /* Backgrounds negros -> fondo claro (viceversa) */ html.theme-dark [style*="background-color:#1E1E1E"], html.theme-dark [style*="background-color: #1E1E1E"], html.theme-dark [style*="background-color:#1e1e1e"], html.theme-dark [style*="background-color: #1e1e1e"] { background-color: #F5F5F5 !important; } /* Texto blanco -> texto oscuro (invertir) */ html.theme-dark [style*="color:#fff"], html.theme-dark [style*="color: #fff"], html.theme-dark [style*="color:#FFF"], html.theme-dark [style*="color: #FFF"], html.theme-dark [style*="color:#ffffff"], html.theme-dark [style*="color: #ffffff"], html.theme-dark [style*="color:#FFFFFF"], html.theme-dark [style*="color: #FFFFFF"], html.theme-dark [style*="color:#F5F5F5"], html.theme-dark [style*="color: #F5F5F5"], html.theme-dark [style*="color:#f5f5f5"], html.theme-dark [style*="color: #f5f5f5"] { color: #1E1E1E !important; } /* Texto oscuro -> texto claro */ html.theme-dark [style*="color:#1E1E1E"], html.theme-dark [style*="color: #1E1E1E"], html.theme-dark [style*="color:#1e1e1e"], html.theme-dark [style*="color: #1e1e1e"] { color: #F5F5F5 !important; } /* Borders oscuros -> borders claros */ html.theme-dark [style*="border-color:#1E1E1E"], html.theme-dark [style*="border-color: #1E1E1E"], html.theme-dark [style*="border-color:#1e1e1e"], html.theme-dark [style*="border-color: #1e1e1e"], html.theme-dark [style*="border-top-color:#1E1E1E"], html.theme-dark [style*="border-top-color: #1E1E1E"], html.theme-dark [style*="border-top-color:#1e1e1e"], html.theme-dark [style*="border-top-color: #1e1e1e"], html.theme-dark [style*="border-bottom-color:#1E1E1E"], html.theme-dark [style*="border-bottom-color: #1E1E1E"], html.theme-dark [style*="border-bottom-color:#1e1e1e"], html.theme-dark [style*="border-bottom-color: #1e1e1e"] { border-color: #F5F5F5 !important; } /* SVG fill/stroke hardcoded */ html.theme-dark svg [fill="#fff"], html.theme-dark svg [fill="#FFF"], html.theme-dark svg [fill="#ffffff"], html.theme-dark svg [fill="#FFFFFF"], html.theme-dark svg [fill="#F5F5F5"], html.theme-dark svg [fill="#f5f5f5"] { fill: #1E1E1E !important; } html.theme-dark svg [fill="#1E1E1E"], html.theme-dark svg [fill="#1e1e1e"] { fill: #F5F5F5 !important; } html.theme-dark svg [stroke="#1E1E1E"], html.theme-dark svg [stroke="#1e1e1e"] { stroke: #F5F5F5 !important; } html.theme-dark svg [stroke="#fff"], html.theme-dark svg [stroke="#FFF"], html.theme-dark svg [stroke="#ffffff"], html.theme-dark svg [stroke="#FFFFFF"] { stroke: #1E1E1E !important; } /* ----------------------------------------------- * Plugin city-core: dark mode overrides * ----------------------------------------------- */ /* Boton mapa — heredar colores del tema en dark */ html.theme-dark .city-map-button .wp-block-button__link { color: var(--wp--preset--color--core-black) !important; background-color: var(--wp--preset--color--core-off-white) !important; border-color: var(--wp--preset--color--core-black) !important; } /* Slug antiguo has-custom-green-dark-color: era #18302b (oscuro). * En dark mode texto oscuro sobre fondo oscuro = invisible. * Forzar a color claro. */ html.theme-dark .has-custom-green-dark-color { color: var(--wp--preset--color--core-black) !important; } /* Categoria activa: invertir para que se vea en dark */ html.theme-dark .city-category-active { color: var(--wp--preset--color--core-black) !important; } /* Links dentro de categorias — texto y bordes claros en dark */ html.theme-dark .city-categories li.cat-item a { color: var(--wp--preset--color--core-black) !important; border-top-color: var(--wp--preset--color--core-black) !important; } /* Leaflet popup (mapa) */ html.theme-dark .leaflet-popup-content-wrapper { background-color: var(--wp--preset--color--core-off-white) !important; color: var(--wp--preset--color--core-black) !important; } html.theme-dark .leaflet-popup-tip { background-color: var(--wp--preset--color--core-off-white) !important; } html.theme-dark .city-popup-title { color: var(--wp--preset--color--core-black) !important; } html.theme-dark .city-popup .wp-block-button.is-style-outline .wp-block-button__link { color: var(--wp--preset--color--core-black) !important; border-color: var(--wp--preset--color--core-black) !important; } /* Boton mapa (sin estructura wp-block-button__link) */ html.theme-dark .city-map-button a { color: var(--wp--preset--color--core-black) !important; background-color: var(--wp--preset--color--core-off-white) !important; border-color: var(--wp--preset--color--core-black) !important; } /* Dot del usuario en el mapa */ html.theme-dark .city-user-dot { background: var(--wp--preset--color--core-off-white) !important; border-color: var(--wp--preset--color--core-black) !important; } html.theme-dark .city-user-dot svg { fill: var(--wp--preset--color--core-black) !important; } /* Mensajes dentro del popup (bloqueado / completado) */ html.theme-dark .city-popup-locked-msg, html.theme-dark .city-popup-completed-msg { color: var(--wp--preset--color--core-black) !important; } /* Light Modal Block — fondo y texto */ html.theme-dark .wp-block-cloudcatch-light-modal-block { background-color: var(--wp--preset--color--core-off-white) !important; color: var(--wp--preset--color--core-black) !important; } html.theme-dark .wp-block-cloudcatch-light-modal-block__close { color: var(--wp--preset--color--core-black) !important; } html.theme-dark .wp-block-cloudcatch-light-modal-block__close svg path { fill: var(--wp--preset--color--core-black) !important; } /* Accesibilidad modal — botones y labels */ html.theme-dark .city-accessibility__label { color: var(--wp--preset--color--core-black) !important; } html.theme-dark .city-accessibility__btn { color: var(--wp--preset--color--core-black) !important; border-color: var(--wp--preset--color--core-black) !important; background-color: var(--wp--preset--color--core-light-gray) !important; } html.theme-dark .city-accessibility__btn svg path { fill: var(--wp--preset--color--core-black) !important; }