¡Hola!
Hasta donde he podido entender, cualquier cambio en CSS se aplica tanto al modo claro como al oscuro, lo que no tiene mucho sentido.
Lo más reciente es que tengo que lidiar con este problema: en modo oscuro, el texto envuelto se ve del mismo color que el envoltorio, y si lo cambio a través de CSS, el texto envuelto del tema claro también se cambiará, pero no quiero eso.
¿Cómo puedo cambiar el CSS solo para un esquema de color?
Si utiliza las variables de color (es decir, var(--primary-very-low), var(--secondary-low)) disponibles en la guía de estilo de su foro /styleguide/atoms/colors, los modos oscuro y claro respetarán las diferentes variables (también puede verlas en las dos paletas de colores que está utilizando para el interruptor de modo claro y oscuro). Deberá habilitar la configuración styleguide enabled en la configuración del administrador, y también existe la configuración styleguide admin only que la limita solo a los administradores.
El problema es que ya hice cambios que no respetaron la variable de color establecida en la guía de estilo (aunque no pude acceder a ella a través de /styleguide/atoms/colors). ¿Hay alguna forma de hacerlo sin seguir las variables?
Si entiendo bien el problema, hay algo específico que hacer para esto.
He estado trabajando en una guía sobre esto, pero me está costando un poco fusionar la información para que sea lo suficientemente clara como para usarla directamente en un tema, pero que aún explique las cosas técnicas subyacentes.
Para explicar cómo hacerlo de la manera más clara posible…
Sugiero que crees un tema localmente (usar Install the Discourse Theme CLI console app to help you build themes te ayudará).
Luego, crea un archivo common/color_definitions.scss en tu tema, en el que escribas:
$my-color: dark-light-choose(#FC3468, #FF93AC);
:root {
--my-color: #{$my-color};
}
Luego, en common/common.scss, puedes usar la variable así:
h1 {
color: var(--my-color);
}
Automáticamente elegirá el color correcto cuando esté en modo oscuro o claro.