# Como sobrescrever uma variável de cor apenas para um tema?
**URL:** https://meta.discourse.org/t/how-to-overrule-a-color-variable-for-one-theme-only/139166
**Category:** Development
**Created:** [20 Janeiro , 2020 09:25 UTC](https://meta.discourse.org/t/how-to-overrule-a-color-variable-for-one-theme-only/139166 "2020-01-20T09:25:21Z")
**Posts on this page:** 9
**Page:** 1
### Author:  [@Queth](https://meta.discourse.org/u/Queth)
#### Post date: [20 Janeiro , 2020 09:25 UTC](https://meta.discourse.org/t/how-to-overrule-a-color-variable-for-one-theme-only/139166/1 "2020-01-20T09:25:21Z")
(Desculpe, não consegui encontrar onde isso se encaixaria melhor, então escolhi dev)
Tenho 3 temas. Em um dos temas, o cálculo de $primary\_low resulta em uma cor com contraste insuficiente em relação ao bgcolor. Tentei ajustar a cor primária (a cor de fundo não pode ser alterada porque é uma cor de marca), mas sem sucesso. Ou o contraste é quase inexistente, ou cria um efeito de “destaque” muito forte, que é exatamente o oposto do que quero.
A solução (eu pensei) seria simplesmente atribuir um valor de cor à variável $primary\_low no CSS desse tema específico. Mas a alteração não permanece. Mesmo adicionando !important, não resolve. Existe alguma maneira de alterar isso apenas para um tema? Obs: esses são temas locais.
---
### Author:  [@david](https://meta.discourse.org/u/david)
#### Post date: [20 Janeiro , 2020 10:22 UTC](https://meta.discourse.org/t/how-to-overrule-a-color-variable-for-one-theme-only/139166/2 "2020-01-20T10:22:52Z")
Confira o guia de @awesomerobot aqui:
> [@Override values for auto-generated color variables](https://meta.discourse.org/t/override-values-for-auto-generated-color-variables/134374?u=david):
>
> As of v2.3.3 (released early September) you can now override our automatically-generated SASS color variables ($primary-low, $primary-medium, etc) in remote themes (you can not yet do this directly via the admin UI.) To override one of these colors you need to add it to the color\_scheme section of your theme’s about.json file. Once you’ve done that you can see the override listed within your color scheme in /admin/customize/colors. "color\_schemes": { “My\_colors”: { "primary": "000000…
---
### Author:  [@Queth](https://meta.discourse.org/u/Queth)
#### Post date: [20 Janeiro , 2020 11:23 UTC](https://meta.discourse.org/t/how-to-overrule-a-color-variable-for-one-theme-only/139166/3 "2020-01-20T11:23:11Z")
Ahh, obrigado! Infelizmente, é um tema local e não será remoto.
Existe alguma outra maneira de fazer isso?
---
### Author:  [@david](https://meta.discourse.org/u/david)
#### Post date: [20 Janeiro , 2020 11:27 UTC](https://meta.discourse.org/t/how-to-overrule-a-color-variable-for-one-theme-only/139166/4 "2020-01-20T11:27:45Z")
Isso é considerado um recurso avançado, então não está disponível na interface. Você pode usar o [theme cli](https://meta.discourse.org/t/discourse-theme-cli-console-app-to-help-you-build-themes/82950) em ‘temas locais’.
---
### Author:  [@Queth](https://meta.discourse.org/u/Queth)
#### Post date: [20 Janeiro , 2020 11:45 UTC](https://meta.discourse.org/t/how-to-overrule-a-color-variable-for-one-theme-only/139166/5 "2020-01-20T11:45:34Z")
Fico feliz que isso possa ser feito de alguma forma 🙂 Mas toda essa coisa do Ruby ainda é muito avançada para mim. Realmente espero que a substituição esteja disponível no futuro também para temas locais.
Vou considerar o que consigo fazer com meu nível de conhecimento… Sou um completo novato no GitHub, então criar um tema remoto parece muito assustador. (Sim, li o guia).
---
### Author:  [@smrtey](https://meta.discourse.org/u/smrtey)
#### Post date: [21 Janeiro , 2020 17:04 UTC](https://meta.discourse.org/t/how-to-overrule-a-color-variable-for-one-theme-only/139166/6 "2020-01-21T17:04:35Z")
Temas remotos são realmente fáceis. Eu nunca tinha usado o GitHub antes e não fazia ideia do que o about.json significava, mas já o utilizei em alguns temas sem nenhum problema. Você só precisa criar um tema local, fazer o upload para o GitHub e, em seguida, adicionar coisas ao arquivo about.json no GitHub. Assim, você acaba com várias opções personalizáveis legais para o seu tema ao reinstalá-lo no seu site a partir do GitHub.
Devo ter tempo mais tarde hoje para fazer um post guiando você pelo processo, e então tudo fará muito mais sentido rapidamente.
eta: lol Eu estava pensando no settings.yml, que é outra coisa ótima sobre temas remotos, mas, ao olhar o link de David acima, o about.json é ainda mais simples.
---
### Author:  [@smrtey](https://meta.discourse.org/u/smrtey)
#### Post date: [21 Janeiro , 2020 22:27 UTC](https://meta.discourse.org/t/how-to-overrule-a-color-variable-for-one-theme-only/139166/7 "2020-01-21T22:27:03Z")
Aqui estão as instruções excessivamente detalhadas. Me avise se não funcionar conforme o anunciado.
1. Crie uma conta no GitHub, caso ainda não tenha uma.
2. No Discourse, exporte seu tema:
Admin → Personalizar → Selecione o tema que deseja exportar
3. Extraia os arquivos no seu computador.
4. Acesse o GitHub e crie um novo repositório:
5. Clique em “uploading an existing file” (carregar um arquivo existente)
6. Arraste as pastas e arquivos descompactados do tema que você exportou (algo como):
Do seu computador para o seu repositório e clique em “Commit Changes” (Confirmar alterações).
1. Agora você pode editar o arquivo about.json. Clique no nome do arquivo.
O arquivo será algo como:
```plaintext
{
"name": "Default",
"component": false,
"license_url": null,
"about_url": null,
"authors": null,
"theme_version": null,
"minimum_discourse_version": null,
"maximum_discourse_version": null,
"assets": {
"badge": "assets/badge.png"
},
"color_schemes": {
"blue-light": {
"primary": "22262a",
"secondary": "fefefe",
"tertiary": "2572e4",
"quaternary": "518ee9",
"header_background": "1550a7",
"header_primary": "fcfcfc",
"highlight": "9edaf5",
"danger": "ff7114",
"success": "85cc54",
"love": "de0100"
}
},
"learn_more": "https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966"
}
```
1. Clique no ícone de lápis de edição.
Agora você pode editá-lo. Recomendo alterar o nome do esquema de cores; caso contrário, ao importar o tema de volta para seu site, você acabará com dois esquemas de cores diferentes com o mesmo nome. Então, abaixo, mudei `"blue-light": {` para `"blue-lite": {`
Basta adicionar suas substituições de variáveis de cor ao final do esquema de cores após `love` e certifique-se de incluir uma vírgula após o valor de `love`.
```plaintext
"name": "Default",
"component": false,
"license_url": null,
"about_url": null,
"authors": null,
"theme_version": null,
"minimum_discourse_version": null,
"maximum_discourse_version": null,
"assets": {
"badge": "assets/badge.png"
},
"color_schemes": {
"blue-lite": {
"primary": "22262a",
"secondary": "fefefe",
"tertiary": "2572e4",
"quaternary": "518ee9",
"header_background": "1550a7",
"header_primary": "fcfcfc",
"highlight": "9edaf5",
"danger": "ff7114",
"success": "85cc54",
"love": "de0100",
"primary-high": "333333",
"primary-medium": "666666",
"primary-low-mid": "999999",
"primary-low": "cccccc"
}
},
"learn_more": "https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966"
}
```
1. Clique em “Commit Changes” (Confirmar alterações).
2. Clique no nome do repositório para voltar à página principal do repositório.
3. Copie o link de Clone ou Download.
4. No Discourse, importe seu tema:
Admin → Personalizar → Instalar → De um repositório git: Cole o link e instale.
5. Agora você pode editar este tema exatamente como faria com qualquer tema local, usando seus valores personalizados $primary-high, $primary-medium, $primary-low-mid e $primary-low.
---
### Author:  [@Queth](https://meta.discourse.org/u/Queth)
#### Post date: [30 Janeiro , 2020 10:52 UTC](https://meta.discourse.org/t/how-to-overrule-a-color-variable-for-one-theme-only/139166/8 "2020-01-30T10:52:47Z")
Muito obrigado, @smrtey, por criar este guia passo a passo! Hoje finalmente tive tempo de sentar e segui-lo. Funcionou perfeitamente!
Foram também os meus primeiros passos no GitHub; nunca havia criado uma conta ou um repositório. Então, mais uma vez, muito obrigado.
Talvez isso pudesse ser incluído no guia de criação de temas? Ou haveria um link para ele?
---
### Author:  [@smrtey](https://meta.discourse.org/u/smrtey)
#### Post date: [2 Fevereiro , 2020 00:09 UTC](https://meta.discourse.org/t/how-to-overrule-a-color-variable-for-one-theme-only/139166/9 "2020-02-02T00:09:59Z")
As configurações personalizadas também são uma ótima coisa que descobri. Você precisa adicionar um arquivo settings.yml ao repositório do GitHub do seu tema ou componente. Aqui está um exemplo de componente com configurações que você pode personalizar:
> **[GitHub - oerog/CustomSettings](https://github.com/oerog/CustomSettings)**
>
> Contribute to oerog/CustomSettings development by creating an account on GitHub.
Este é o arquivo settings.yml que define as variáveis `$header_text`, `$header_text_color` e `$header_bg`:
```plaintext
header_text:
type: bool
default: false
description:
en: 'Selecione para adicionar texto no cabeçalho ao lado do logotipo.'
header_text_color:
type: string
default: "$header_primary"
description:
en: 'Cor do texto (o padrão é "header primary")'
header_bg:
type: string
default: "$header_background"
description:
en: 'Cor do texto (o padrão é "header background")'
```
Isso oferece a você essas opções de configuração ao instalar o componente:
O que define este CSS:
```plaintext
@if $header_text == "true" {
.d-header .title::after {
padding: 0 20px;
font-size: 1.3em;
color: $header_text_color;
background-color:$header_bg;
content: "Here is some text";
}
.archetype-regular #main.no-text .d-header .title::after {
display:none;
}
}
```
Você pode instalar o mesmo componente várias vezes (basta renomeá-lo após a instalação para facilitar o acompanhamento), permitindo adicionar o componente a diferentes temas com configurações distintas para cada um.
Veja como criar o arquivo settings.yml. Crie um novo arquivo:
Insira o código (eu escrevo em um arquivo de texto e depois copio e col):
Salve-o clicando em “Commit new file”:
Em seguida, instale o componente no seu site e edite as configurações.