¿Referenciando variables de color del tema de Discourse en un componente de tema personalizado?

[jordan-violet]

¿Es posible acceder a las variables de color de tema de Discourse en mi propio componente de tema?

Estoy intentando usar variables como --secondary en mi CSS y parece que no funciona.

[david (David Taylor)]

Sí, deberías poder acceder a las variables nativas de CSS de core desde un tema o un componente temático

por ejemplo:

body {
  background-color: var(--secondary);
}

¿Podrías compartir un ejemplo que no funcione?

[jordan-violet]

¡Ah! No estaba usando var()

[pfaffman (Jay Pfaffman)]

Siempre tengo problemas como este. Claro, es “obvio” usar var, ¡pero solo si lo sabes y lo recuerdas!

Estoy esperando que algo se ejecute, así que por curiosidad revisé https://ask.discourse.com/ y pregunté “¿Es posible acceder a las variables de color del tema de Discourse en mi propio componente de tema?” y ¡mira! Obtuve esto:

1. Variables de color disponibles:
   Discourse proporciona varias propiedades personalizadas de CSS predefinidas para colores, como:

   var(--primary)
   var(--secondary)
   var(--tertiary)
   var(--quaternary)
   var(--header_background)
   var(--header_primary)
   var(--highlight)
   var(--danger)
   var(--success)
   var(--love)
   
   

2. Ejemplo de uso:
   Puedes usar estas variables en tu CSS para asegurar que tu tema se adapte a diferentes esquemas de color seleccionados por el usuario. Por ejemplo:

   body {
       background: var(--highlight);
   }