Como sobrescrever uma variável de cor apenas para um tema?

[Queth (Q)]

(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.

[david (David Taylor)]

Confira o guia de @awesomerobot aqui:

Override values for auto-generated color variables

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…

[Queth (Q)]

Ahh, obrigado! Infelizmente, é um tema local e não será remoto.
Existe alguma outra maneira de fazer isso?

[david (David Taylor)]

Isso é considerado um recurso avançado, então não está disponível na interface. Você pode usar o theme cli em ‘temas locais’.

[Queth (Q)]

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).

[smrtey]

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.

[smrtey]

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
   

   
   
   Isso salva o tema como um arquivo .zip no seu computador.

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).

7. Agora você pode editar o arquivo about.json. Clique no nome do arquivo.
   
   

O arquivo será algo como:

{
  "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"
}

8. 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.

  "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"
}

9. Clique em “Commit Changes” (Confirmar alterações).

10. Clique no nome do repositório para voltar à página principal do repositório.
    

    

11. Copie o link de Clone ou Download.
    

    

12. No Discourse, importe seu tema:
    Admin → Personalizar → Instalar → De um repositório git: Cole o link e instale.
    

    

13. 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.

[Queth (Q)]

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?

[smrtey]

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

Este é o arquivo settings.yml que define as variáveis $header_text, $header_text_color e $header_bg:

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:

@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.