Este guia explica como configurar paletas de cores de modo claro e escuro para o tema do seu site Discourse. Ele cobre a configuração por tema, a atribuição de paletas e considerações da interface do usuário.
Nível de usuário necessário: Administrador
A configuração de 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:
- Entendendo as atribuições de paletas de modo claro e escuro
- Atribuindo paletas de cores claras e escuras a um tema
- Gerenciando as paletas de cores do seu site
- Habilitando o seletor de modo de cor para usuários
- Entendendo as opções voltadas para o usuário
- Melhores práticas para uso de paletas e acessibilidade
Entendendo as atribuições de paletas de modo claro e escuro
Os temas do Discourse suportam atribuição explícita de uma paleta de cores “clara” e uma “escura”. Desta forma, qualquer tema pode alternar automaticamente com base na configuração do sistema do usuário, ou permitir que o usuário escolha um modo preferido, mantendo suas cores de 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/config/customize/themes) -
Clique no tema que 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 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 escolhidas pelos seus membros, mas as que você definir aqui serão as predefinidas.
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/config/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.
Habilitando o seletor de modo de cor
Antes que os usuários possam alternar entre modo claro e escuro no site, você deve habilitar a configuração do site interface_color_selector. Por padrão, ela está definida como desabilitada.
Para habilitá-la:
- Vá para Admin > Configurações e pesquise por
interface color selector. - Defina-a como uma das seguintes opções:
- Exibir no rodapé da barra lateral — adiciona um seletor claro/escuro/automático na parte inferior da barra lateral
- Exibir no cabeçalho — adiciona o seletor ao cabeçalho do site
Sem habilitar esta configuração, os usuários não verão um seletor de modo de cor no site e o site seguirá automaticamente a preferência de esquema de cores de cada usuário.
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 clara e escura preferidas, bem como o modo que gostariam de usar: Claro, Escuro, Automático:
Se “Automático” for selecionado, o Discourse se adaptará à preferência de 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 desbotadas.
- Teste em vários dispositivos: Verifique a aparência em ambos os modos, em diferentes dispositivos e navegadores.
- Ativos de logotipo: Você pode carregar logotipos separados para os modos claro e escuro em Admin > Aparência > Logotipo do site (
/admin/config/logo). - Mantenha a contagem de paletas gerenciável: Ofereça apenas as paletas que os usuários precisam ou que pareçam razoáveis.
Perguntas frequentes
Posso ter mais de uma paleta escura ou clara?
Sim, mas é recomendável manter uma paleta principal para cada uma para reduzir a confusão. Atribua apenas as paletas principais 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 padrão clara e escura, e garantindo que nenhuma outra paleta possa ser selecionada pelo usuário.
Componentes de tema personalizados se ajustarão automaticamente às cores?
Se eles usarem variáveis de cor CSS do Discourse (por exemplo, --primary, --secondary), eles herdarão a paleta. É melhor evitar cores codificadas no 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.