POINTEC
Dark Mode no WordPress? Atualmente muito se fala em Dark Mode, mas o que seria Dark Mode? Em poucas palavras, Dark Mode é quando você acessa um dispositivo, site, e altera suas cores para uma cor mais Dark 🙂
Precisando adicionar o Dark Mode em seu site WordPress?
Muitos dispositivos vêm com o suporte a Dark Mode nativamente. Adicione o Dark Mode em seu site automaticamente dependendo da preferência do navegador do usuário. Ou você pode adicionar um botão de toggle para o usuário decidir quando alterar.
Um pouco de teoria
O Dark Mode é usado em dispositivos móveis e computadores para reduzir a quantidade de luz branca na tela.
Alguns dispositivos vêm com um modo noturno que, na verdade, usa tons de cores mais quentes. O Dark Mode usa uma abordagem diferente, adicionando cores escuras ao fundo.
Nos dispositivos iPhone e Android, é possível alterar para o modo escuro simplesmente usando um botão. Em computadores é necessário utilizar uma extensão do Chrome, ou o navegador que você estiver utilizando. Isso, se o site não estiver preparado para o Dark Mode. Do contrário, não precisa de extensão.
Adicionando o Dark Mode ao seu site WordPress
Podemos adicionar o Dark Mode tanto para os usuários, quanto para os administradores do site em WordPress.
Há algumas formas de fazer o Dark Mode, então, vamos seguir instalando um Plugin para alterar o modo.
Vá até o painel de Admin do seu site em WordPress, na parte de plugins, e procure por: Dark Mode
Nota que há 244 itens (até o momento desse artigo), vários plugins para testar. Exatamente, nem todos são relacionado ao Dark Mode.
Ao escolher o plugin, aconselhamos verificar 3 informações:
- Última atualização
- Compatível com essa versão do WordPress
- Quantidade de instalações ativas
Assim é possível saber se teremos bons resultados, se a comunidade está aceitando o plugin, e manutenções constantes.
Vamos seguir com o plugin WP Dark Mode, instale e ative.
Após a ativação, vá para a página de Configurações > WP Dark Mode no administrativo do WordPress e clique na guia General Settings.
Em primeiro lugar, vale falar da opção Enable OS aware Dark Mode ela por padrão vem ativa. Essa opção deixa o seu site em Dark Mode por padrão. Altere conforme sua necessidade.
O Enable Frontend Darkmode vai ativar o modo para os usuários.
Você pode notar um botão flutuante em seu site, na parte do Frontend. Isso é devido a opção Show Floating Switch. Assim os usuários podem alternar entre o Dark Mode ou normal.
Existem outras opções de personalização na página de configurações do plugin. No entanto, são limitados com o plugin gratuito.
Altere o botão do Switch
Na guia Display Settings você pode alterar o switch. É bastante intuitivo e fácil de atualizar.
- Selecione o Switch entre as opções e clique em salvar
Algumas opções do Display Settings:
- Alterar o switch (botão para ligar o Dark Mode)
- Atualmente apenas uma opção, as outras são premium
- Posicionamento do switch
Entre as opções Premium:
- Exclua elementos que você não queira ativar o Dark Mode
- Incluindo o ID ou CLASS
- Exclua páginas
Nota-se que o plugin é voltado para o Premium, então, se for o caso, avalie comprar, ou, procure outros plugins. E também não tem suporte a pt_BR.
Como ainda não pretendemos deixar o Dark Mode em nosso site, optamos por esse plugin, por ser de fácil configuração.
Altere as cores do Dark Mode
Você também pode personalizar as cores do Dark Mode usando a guia Style Settings.
Infelizmente você só pode utilizar as cores pré-definidas (as 2 primeiras). Para personalizar do seu jeito ou usar as outras cores, é necessário ter uma conta premium.
Adicionando o Dark Mode ao Administrativo do WordPress
Por padrão o WordPress conta com esquemas de cores para o administrativo, mas nenhum deles reduz a luz branca da tela. Com esse plugin isso será possível.
Vá até a guia General Settings e ative a opção Enable Backend Darkmode.
Após ativar, será exibido um novo Menu na barra superior da sua área de administrador.
Resultado parecido com este:
E o Dark Mode para os administradores é individual, cada pessoa pode ativar e desativar o Dark Mode.
É isso pessoal, esperamos que tenham gostado e aprendido algo de bom com nosso artigo.
Se você gostou, junte-se as nossas redes sociais.
Quer usar o RPA e sair na frente dos seus concorrêntes? Fale conosco.
Você já conhece nosso package do React Native?
Visite nosso repositório no GitHub e de sua estrela 🙂
Já somos mais de 1.3k de download.
