Referenciando variáveis de cor do tema Discourse em componente de tema personalizado?

[jordan-violet]

É possível acessar as variáveis de cores do tema do Discourse no meu próprio componente de tema?

Estou tentando usar variáveis como --secondary no meu CSS e parece que não está funcionando.

[david (David Taylor)]

Sim, você deve ser capaz de acessar as variáveis nativas de CSS do core de um tema ou componente de tema

por exemplo:

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

Você poderia compartilhar um exemplo que não está funcionando?

[jordan-violet]

Ah! Eu não estava usando var()

[pfaffman (Jay Pfaffman)]

Tenho problemas assim o tempo todo. Claro, é “óbvio” usar var, mas só se você souber e conseguir se lembrar!

Estou esperando algo para rodar, então, por curiosidade, verifiquei https://ask.discourse.com/ e perguntei “É possível acessar as variáveis de cor do tema Discourse no meu próprio componente de tema?” e eis que obtive isto:

1. Variáveis de Cor Disponíveis:
   O Discourse fornece várias propriedades personalizadas de CSS predefinidas para cores, como:

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

2. Exemplo de Uso:
   Você pode usar essas variáveis em seu CSS para garantir que seu tema se adapte a diferentes esquemas de cores selecionados pelo usuário. Por exemplo:

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