Desafios na criação de uma paleta de cores personalizada

Tentei criar um esquema de cores totalmente personalizado definindo minhas cores no arquivo about.json do meu tema no GitHub.

Infelizmente, apenas algumas de minhas definições de cores estão sendo respeitadas no site.

Por exemplo, no meu esquema json, defino: "success_low": "DDE2B2",

No entanto, meu guia de estilo mostra uma cor diferente (calculada) para var(--success-low)

Li todos os guias e parece que talvez as definições de paleta json não sejam todas usadas e, em vez disso, o Discourse está calculando alguns dos valores por conta própria e não respeitando minha definição.

Preciso codificar as cores em um arquivo de variáveis CSS? Elas substituirão os valores calculados? Onde e como devo fazer isso? Gostaria de definir todas as cores para o modo claro e escuro no Discourse, não gosto de nenhum dos valores calculados.

Obrigado por qualquer ajuda. Tem sido muito difícil entender como todas essas coisas funcionam, o que tem prioridade no CSS final, etc.

atualização: esta postagem pareceria contradizer minha solução de problemas:

Isso me deixa ainda mais confuso sobre por que o Discourse ainda parece estar gerando cores automaticamente.

1 curtida

Vejo que há um sublinhado no primeiro (success_low) e um hífen no segundo (success-low).

Você sempre pode colar sua paleta de cores aqui, como aparece no arquivo json, para que possamos dar uma olhada.

Obrigado, irei verificar todos os underscores e hifens. Existe algum arquivo JSON de referência que eu possa encontrar em algum lugar com uma referência para todas as variáveis, com hifens e underscores nos lugares certos?

Eu usei originalmente o tema “solarized” como referência

Isso é extremamente confuso. No guia de estilo, as variáveis CSS rotuladas usam hifens:

Enquanto neste (e em outros) esquemas de exemplo eles têm underscores:

Admito que não sou o mais inteligente em codificação, e tenho certeza de que as pessoas que trabalharam nisso por muito tempo acham mais óbvio e intuitivo… mas tentar analisar isso parece que estou ficando um pouco louco.

É realmente difícil ter uma compreensão intuitiva de toda a lógica de como as cores dos modos claro e escuro são usadas. Entre a multiplicidade de arquivos SCSS e transformações, JSON, GUI de administração, paletas que são (um tanto?) independentes de temas…

Desculpe pelo meu desabafo, apenas estou tendo um pouco de dificuldade aqui.

você tem outro tópico antigo que pode te ajudar com isso

Infelizmente, esse tópico não resolveu o problema.

Ainda estou confuso – não há nenhuma orientação clara disponível sobre como definir cada cor? E quais são a sintaxe/nomes corretos no json versus as variáveis CSS?

você olhou para isto?

Não estou vendo nada obviamente errado com seu arquivo about.json, então pode ser outra coisa na forma como você configurou seu tema. :thinking:

especificamente quais variáveis estão funcionando e quais não estão?

você leu algum dos tópicos de desenvolvimento de temas? acho que é possível que você esteja perdendo outros arquivos de tema necessários em seu repositório.

2 curtidas

Sim, eu li, mas não há uma referência completa para todas as variáveis de cor que eu pude ver. Baseei meu arquivo about.json no tema “solarized”, que parecia ter todas as variáveis declaradas. Vou tentar novamente do zero e reportar, e usar as ferramentas de desenvolvedor para ver quais podem ser os problemas.

Obrigado pela ajuda até agora.