Terraglass — um tema de vidro fosco com paletas claras e escuras bem pensadas

Personalização Tema
1

Acabei de publicar um tema que venho refinando há algum tempo, agora em código aberto sob a licença MIT: um visual limpo e moderno construído em torno de superfícies translúcidas de vidro fosco (cabeçalho, barra lateral, menus, diálogos, busca), com um esquema de cores claro e escuro desenvolvido especificamente para isso — sem cores codificadas em nível de baixo nível, tudo vinculado às propriedades CSS personalizadas do Discourse, para que funcione imediatamente com alternância automática entre modo claro e escuro.

Repositório: terraboss/discourse-terraglass

Capturas de tela

Esquema claro, rodando no Meta. Menu de notificações, com a página visível ao fundo:

Menu de notificações
Menu de notificações2200×1150 428 KB

Menu suspenso de busca:

Menu suspenso de busca
Menu suspenso de busca2200×1150 516 KB

Diálogos — a página ao fundo é desfocada em vez de escurecida:

Diálogo de atalhos de teclado
Diálogo de atalhos de teclado2200×1150 262 KB

Diálogo de denúncia
Diálogo de denúncia2200×1150 252 KB

Funcionalidades

  • Superfícies de vidro fosco — cabeçalho, barra lateral/menu hambúrguer e o campo de busca do cabeçalho/menu suspenso são semitransparentes com desfocagem de fundo; opacidade e intensidade do desfoque são configuráveis
  • Menus e diálogos de vidro — menus suspensos (ex.: notificações) e diálogos compartilham o visual fosco, com uma borda fina e um destaque sutil na parte superior; atrás de um diálogo, a página é desfocada em vez de escurecida. Opacidade e desfoque podem ser ajustados separadamente para menus e diálogos
  • Tonalidade opcional no cabeçalho — dê ao cabeçalho uma cor sutil, seguindo a cor de destaque do esquema de cores ativo ou qualquer cor personalizada, com intensidade ajustável. No Safari, a área da barra de ferramentas do navegador é tingida para combinar. Desativado por padrão
  • Esquemas de cores claros e escuros separados e desenvolvidos especificamente (não apenas um único esquema invertido), verificados em conformidade com o contraste WCAG AA para texto e elementos de interface
  • Pré-visualizações de links estilo onebox do X/Twitter com borda fina e cantos arredondados
  • Tags em formato de bandeira/seta estilo etiqueta
  • Incorporação de vídeos fixa em 16:9 em todos os dispositivos
  • Lista de tópicos em listras zebradas com um estado de hover sutil
  • Arredondamento de cantos configurável em botões, cartões, modais e campos de entrada
  • Contorno de foco acessível que usa a própria cor de texto do esquema, para permanecer visível tanto no modo claro quanto no escuro
  • Tudo acima é uma configuração de tema — desative ou ajuste o que não quiser

Instalação

Personalizar → Temas → Instalar → De um repositório git:

https://github.com/terraboss/discourse-terraglass

Isso também permite “Verificar atualizações” com um clique a partir de agora.

Avaliações são bem-vindas, estou feliz em aceitar solicitações de funcionalidades ou relatórios de bugs.

P.S.: Capturas de tela tiradas no Meta :discourse2: com o tema aplicado localmente no meu navegador via console de desenvolvimento :goodnews:

4 curtidas
Backdrop-filter (blur) has no effect on .menu-panel, even though background transparency works
2

Você pode postar algumas capturas de tela? Parece ótimo

3 curtidas
3

Talvez mais tarde. Tente você mesmo! :slight_smile:

1 curtida
4

Talvez você queira se juntar a @theme_authors para poder postar na categoria Customization > Theme?

4 curtidas
6

Muito obrigado pela dica, @NateDhaliwal! Eu não sabia sobre o grupo theme_authors, então vou entrar nele e depois podemos mover o tópico para a seção de Temas.

2 curtidas
7

Eu testei, mas não obtive nenhum efeito. Usei o botão de testar o tema.

8

Dê uma olhada em https://riben.talk/, por exemplo. (Créditos: @kddkd)

Você também pode entrar em contato com ele em https://discourse.theme-creator.io, com limitações mínimas (recomendo posicionar o campo de busca no meio do cabeçalho).

PS! Após aplicar o novo tema, não se esqueça de atualizar o site no seu navegador.

IMG_0021
IMG_00211320×2868 506 KB

Atualização: As capturas de tela do @Heliosurge agora estão na primeira publicação, obrigado pela dica! Me diga o que acha se experimentar.

4 curtidas
9

Terraglass 1.2.0 — menus e diálogos de vidro

Novo: menus e diálogos de vidro

O aspecto fosco agora se estende além do cabeçalho, da barra lateral e da busca:

  • Menus suspensos são translúcidos com um desfoque suave, incluindo seus destaques de hover e seleção
  • Diálogos recebem o mesmo tratamento, e a página atrás deles é desfocada em vez de escurecida
  • Uma fina borda de cabelo e um leve destaque ao longo da parte superior fazem as superfícies parecerem vidro
  • Opacidade e desfoque podem ser definidos separadamente para menus e diálogos

Está ativado por padrão. Se você preferir a aparência anterior, desative glass_surfaces nas configurações do tema.

Terraglass 1.1.0 — tonalidade opcional no cabeçalho, além de uma correção de bug importante

Novo: tonalidade no cabeçalho

Agora você pode dar ao cabeçalho uma cor sutil de sua escolha, para fóruns que desejam um pouco mais de identidade visual.

  • auto segue a cor de destaque do esquema de cores ativo, então ele muda junto com o modo claro/escuro
  • custom permite que você escolha qualquer cor (hex, cor nomeada, rgb…)
  • Intensidade ajustável, de uma leve sugestão a uma barra sólida
  • A transparência e o desfoque do vidro fosco permanecem intactos por baixo

Está desativado por padrão — ative-o com header_tint nas configurações do tema.

Corrigido: configurações de ligar/desligar não tinham efeito

Na versão 1.0.x, desativar um recurso nas configurações do tema não o desligava de fato. Todos os interruptores agora funcionam como pretendido.

4 curtidas