Radiant, um tema elegante para Discourse

Este tema visa ser minimalista e, ao mesmo tempo, ter apelo moderno. Todo o estilo é implementado via CSS e nenhuma imagem foi utilizada.

:rainbow: :dizzy: :rocket:

Página inicial:

Página do tópico:

Pesquisa em página completa:

Modal:

Me informe como este tema pode ser melhorado. Aproveite! :smiley:

:sunglasses: Pré-visualização Pré-visualizar no criador de temas
:link: Repositório no Github discourse-radiant-theme
:hammer_and_wrench: Guia de Instalação Como instalar um tema ou componente de tema
31 curtidas

Design muito bonito!

Existe alguma maneira de personalizar as formas e cores de fundo? Poder personalizar o “brilho” do corpo principal no fundo também seria útil.

3 curtidas

Olá,

Trabalho incrível :heart: Esse tema parece muito legal :heart_eyes:
Tenho uma sugestão: cantos arredondados e sombras uniformes. Refiro-me aos pop-ups, menus, campos de entrada etc… Ficariam fantásticos com o novo slider de carregamento :heart_eyes:

2 curtidas

Não, o fundo é feito com gradientes lineares CSS e adicionar a capacidade de personalizá-lo aumentaria a complexidade para os administradores do fórum.

Sinta-se à vontade para fazer um fork do tema para personalizá-lo ainda mais de acordo com suas necessidades.

Bom ponto. Vou adicionar isso à minha lista de melhorias. :+1:

6 curtidas

Melhorei o tema para tornar os campos de formulário, o menu do cabeçalho e os modais consistentes com o estilo do tema. Atualizei a primeira postagem com as últimas capturas de tela. :slight_smile:

5 curtidas

Tema adorável. Posso usá-lo em breve. Obrigado, bom trabalho.

2 curtidas

Oi, o tema é muito bom. Existe alguma maneira de reduzir esse espaço no topo (veja a seta)?

2 curtidas

Reduzi o margin-top padrão para 30px, por meio de:

Sinta-se à vontade para fazer um fork do tema e personalizá-lo ainda mais conforme suas necessidades. :slight_smile:

3 curtidas

Pessoalmente, acho que a margem menor torna o gradiente muito perceptível. :confused:

Você poderia me dar uma direção para implementar isso como fundo? https://codepen.io/chris22smith/pen/RZogMa

1 curtida

Eu adoro esse tema! Eu até pediria para o fórum em que participo, mas só queria te fazer algumas perguntas.

Não sou alguém que usa o Discourse para criar fóruns; sou apenas um usuário desses fóruns. Então, talvez algumas coisas pareçam erradas ou óbvias, já que nunca usei o Discourse para construir nada.

Existem planos de criar uma versão em Modo Escuro deste tema? Pessoalmente, tenho a flag ‘Forçar modo escuro para conteúdos da web’ ativada no Edge. Isso também existe no Chrome. Geralmente ajuda, e aqui estão alguns resultados que obtive com ela:

No geral, parece tudo bem com essa flag ativada, mas há alguns elementos que parecem fora de lugar sem motivo aparente. Gostaria muito de ver isso adaptado ou corrigido para o Modo Escuro, se for possível :<G)

Você não precisaria necessariamente modificar tudo para criar uma versão específica para Modo Escuro. Se apenas corrigisse a estranha diferença de cor nas páginas de perfil, funcionaria perfeitamente com a flag ativada.

4 curtidas

Ainda não, mas vou verificar isso. Vou ter que usar uma paleta de cores diferente, no entanto.

Obrigado pelas sugestões! Vou analisá-las e fazer as alterações se não afetarem a versão clara (original) padrão. :slight_smile:

5 curtidas

Acabei de configurar um Discourse e estava ansioso para personalizá-lo. Fico muito feliz por ter encontrado seu tema — é fresco, colorido e encantador. Obrigado!

– ben

6 curtidas

Tema muito bom, mas ultimamente parece que este tema é incompatível com o Discourse. A barra lateral está completamente esmagada.

`

3 curtidas

Bom ponto! Agora corrigido via:

3 curtidas

Obrigado, parece legal e o problema foi corrigido

2 curtidas

Olá

Desde a última atualização, parece que todo o conteúdo está “preso” em ambos os lados. É como se o preenchimento/margem direita e esquerda tivessem desaparecido

Isso é intencional? Nas imagens de pré-visualização do tema não é assim. Como posso corrigir isso?

Muito obrigado

2 curtidas

Isso agora está corrigido:

Obrigado por relatar este problema :+1:

3 curtidas

Confirmo que está corrigido!

Foi incrivelmente rápido, muito obrigado.

Tema incrível, aliás :slight_smile:

3 curtidas

Você pode me ajudar a entender como mudar a cor da barra de destaque azul no topo?

Vejo que em desktop.scss isso é definido:

#main-outlet {
  border-top: 8px solid $tertiary;
}

Onde $tertiary, presumo, vem de variáveis definidas pelo SCSS principal do Discourse, e deve puxar da paleta de cores selecionada pelo usuário.

Posso ver nas devtools que a barra está definida como #3977ff, que você pode ver como a barra azul na captura de tela abaixo. Mas na minha paleta de cores, tenho uma cor amarela definida para o “terciário” e não tenho uma cor #3977ff definida em nenhum lugar.

Então, o que está acontecendo aqui e como posso definir a cor?

1 curtida

Ah! Vejo que tertiary está definido em about.json:

  "color_schemes": {
    "radiant": {
      "primary": "000000",
      "tertiary": "3977FF",
      "header_primary": "4d4d4d"
    }
  },

Então, presumo que seja daqui que ele está obtendo o valor da cor. Mas por que ele estaria buscando isso se eu não tenho o esquema de cores “radiant” selecionado?