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.

Segue gente lá no

Já somos mais de 1.3k de download.