Crie e compartilhe uma paleta de cores

O Discourse agora suporta a importação de esquemas de cores a partir de repositórios remotos. Aqui, demonstrarei como você pode fazer isso.

Navegue até as cores e adicione um esquema de cores.

Acesse /admin/customize/colors no seu site e crie um esquema de cores.

Dicas:

  • Usei um plugin do Chrome (color picker) para selecionar cores a partir de uma imagem existente de uma paleta na web.

  • Se você criar um tema, atribua o esquema de cores ao tema e visualize-o; as alterações serão refletidas em tempo real.

Crie um novo repositório Git com o esquema de cores

mkdir my-awesome-scheme
cd my-awesome-scheme
git init .
vim about.json

Para about.json, adicione um arquivo de configuração básico:

{
  "name": "Meus esquemas de cores incríveis",
  "about_url": "",
  "license_url": "",
  "color_schemes": {}
}

Adicione um arquivo LICENSE. Eu geralmente uso a licença MIT.

vim LICENSE

Envie as alterações para o GitHub

Registre todas as suas alterações:

git add LICENSE
git add about.json
git commit -am "first commit"

Crie uma conta no GitHub.com e, em seguida, crie um novo repositório.

(Opcional) Crie um tópico no Discourse como um espaço para discutir suas cores

Idealmente, você criaria um tópico na categoria #plugin:theme com algumas capturas de tela do seu esquema de cores. Você usará isso como sua about_url.

Preencha as informações ausentes no seu arquivo about.json

  • Navegue até a página do seu LICENSE no GitHub e preencha essa URL como sua license_url.

  • Use a URL do projeto do GitHub ou a URL do tópico do Discourse como sua about_url.

  • Pressione Copiar para a área de transferência no seu esquema de cores e cole isso na seção color_schemes.

No final do processo, seu arquivo about.json ficará algo assim:

{
  "name": "Solarized",
  "about_url": "https://github.com/SamSaffron/discourse-solarized",
  "license_url": "https://github.com/SamSaffron/discourse-solarized/blob/master/LICENSE",
  "color_schemes": {
    "Solarized Light": {
      "primary": "586E75",
      "secondary": "EEE8D5",
      "tertiary": "268BD2",
      "quaternary": "CB4B16",
      "header_background": "002B36",
      "header_primary": "93A1A1",
      "highlight": "B58900",
      "danger": "CB4B16",
      "success": "859900",
      "love": "DC322F"
    }
  }
}

Registre a alteração e envie para o GitHub:

git commit -am "added more details"
git push

Teste se o seu esquema de cores está correto

  • Exclua seu esquema de cores local.
  • Na tela admin/customize/theme, importe seu tema do GitHub.

  • Acesse admin/customize/colors e verifique se seu esquema de cores está correto.

:confetti_ball:

Agora você pode compartilhar facilmente seu esquema de cores com outras pessoas!

Veja também:


Última revisão por @SaraDev em 2022-06-03T01:00:00Z


Este documento está sob controle de versão — sugira alterações no GitHub.

23 curtidas

Eu acho que há mais dois campos que podem ser adicionados lá: hover e selected.