Este guia explica como configurar paletas de cores para modo claro e escuro para o tema do seu site Discourse. Ele abrange configuração por tema, atribuição de paleta e considerações de interface do usuário.
Nível de usuário necessário: Administrador
Configurar paletas de cores distintas para modo claro e escuro permite que você apresente sua comunidade Discourse de uma forma que se alinhe à sua marca, melhore a acessibilidade e dê aos seus usuários controle sobre sua experiência de visualização. As melhorias recentes no sistema de temas do Discourse permitem que você atribua uma paleta clara e escura preferida a cada tema, e permita que os usuários escolham sua aparência desejada.
Resumo
Este guia abrange:
- Compreendendo as atribuições de paleta para modo claro e escuro
- Atribuindo paletas de cores claras e escuras a um tema
- Gerenciando as paletas de cores do seu site
- Compreendendo as opções voltadas para o usuário
- Melhores práticas para uso de paletas e acessibilidade
Compreendendo as atribuições de paleta para modo claro e escuro
Os temas do Discourse suportam a atribuição explícita de uma paleta de cores “clara” e uma “escura”. Dessa forma, qualquer tema pode alternar automaticamente com base nas configurações do sistema do usuário, ou permitir que o usuário escolha um modo preferido, mantendo as cores da sua marca preferidas.
Atribuindo paletas claras e escuras a um tema
Para configurar as paletas de cores do seu tema:
-
Vá para Admin > Aparência > Temas e componentes (
/admin/customize/themes) -
Clique no tema que você deseja editar.
-
Nas configurações do tema, localize a seção Paletas de cores.
-
Tanto para Paleta de cores quanto para Paleta de cores escuras, selecione a paleta que você deseja usar.
-
Clique em Salvar na parte inferior da página de configurações do tema.
Isso garante que o tema do seu site usará a paleta correta para usuários de modo claro e escuro. Observe que outras paletas selecionáveis pelo usuário ainda podem ser selecionadas por seus membros, mas as que você definir aqui serão os padrões.
Gerenciando suas paletas de cores
Todas as paletas de cores disponíveis (e suas atribuições vinculadas) podem ser gerenciadas centralmente:
-
Navegue até Admin > Aparência > Paletas de cores (
/admin/customize/colors) -
Aqui você pode editar, adicionar ou remover paletas, marcá-las como selecionáveis pelo usuário e atribuí-las como as paletas claras e escuras padrão do seu tema.
Opções voltadas para o usuário
Preferências do usuário
Os usuários podem escolher seu modo preferido para visualizar o site:
-
Vá para Preferências do Usuário > Interface
-
Na seção “Paleta de cores”, os membros podem selecionar suas paletas claras e escuras preferidas, bem como o modo que gostariam de usar: Claro, Escuro, Automático:
Se “Automático” for selecionado, o Discourse se adaptará à preferência do esquema de cores do sistema do usuário.
Melhores práticas
- Consistência da marca: Personalize as paletas para corresponder à sua marca para ambos os modos. Mantenha as cores principais consistentes, mas ajuste para contraste e legibilidade.
- Acessibilidade: Garanta que as proporções de contraste de cores atendam às diretrizes WCAG (esta ferramenta pode ajudar), especialmente no modo escuro, onde algumas cores podem parecer suaves.
- Teste em vários dispositivos: Verifique a aparência em ambos os modos, em diferentes dispositivos e navegadores.
- Ativos de logotipo: Você pode fazer upload de logotipos separados para os modos claro e escuro em Admin > Aparência > Logotipos.
- Mantenha a contagem de paletas gerenciável: Ofereça apenas as paletas que os usuários precisam ou que considerem razoáveis.
FAQs
Posso ter mais de uma paleta escura ou clara?
Sim, mas é recomendado manter uma paleta principal para cada uma para reduzir a confusão. Atribua apenas as paletas primárias aos temas para seleção do usuário.
Posso forçar todos a usar apenas o modo claro (ou apenas escuro)?
Você pode fazer isso definindo a mesma paleta como as paletas claras e escuras padrão e garantindo que nenhuma outra paleta seja selecionável pelo usuário.
Componentes de tema personalizados ajustarão automaticamente as cores?
Se eles usarem as variáveis de cor CSS do Discourse (por exemplo, --primary, --secondary), eles herdarão a paleta. É melhor evitar cores codificadas em CSS personalizado.
A troca de paleta muda o tema inteiro ou apenas as cores?
Apenas as variáveis de cor mudam. Estrutura, fontes e layout permanecem os mesmos ao alterar as paletas de cores.