Como ativar o modo escuro em seu site WordPress

Franklin Tutoriais do WordPress Dec 9, 2020

Deixar seus usuários à vontade é o principal objetivo de qualquer site para retê-los. Acontece que em certas condições, preferimos ter um brilho adaptado, como o modo escuro em smartphones quando está escuro. Mas como você ativa o Modo escuro em um site WordPress para melhorar a experiência do usuário? Isso é o que veremos neste artigo.

O que é o Modo escuro e por que adicioná-lo ao seu site?

A maioria dos dispositivos móveis, Android ou iPhone, agora está equipada com um modo noturno. Este último possui tons de cores mais quentes e adequados para determinados ambientes. É um pouco diferente do modo Escuro, que adiciona cores escuras ao fundo. O objetivo aqui é reduzir a quantidade de luz branca da tela.

Usando uma extensão do Google Chrome chamada Night Eye, é possível visualizar sites no modo escuro. Testamos em nosso site CodeWatchers e é assim que se parece:

Quando o seu site tem o Modo escuro, ele oferece aos usuários a opção de desativá-lo ou ativá-lo conforme desejarem durante a navegação. Isso é muito prático, especialmente quando está escuro, para uma experiência de navegação mais confortável.

Baixar Divi o melhor tema WordPress

O tema mais popular do WordPress no mundo e o Ultimate WordPress Page Builder

Download Divi

Vários sites populares oferecem esse modo. É o caso, por exemplo, do YouTube, no caso de exibição à noite.

Além disso, é possível adicionar o Modo escuro não apenas ao frontend do seu site, mas também ao administrador do WordPress. Veremos em detalhes como fazer isso mais tarde. Mas vamos começar primeiro simplesmente ativando o Modo escuro em seu site.

Habilitando o modo escuro em seu site WordPress

Para começar, você precisa instalar e ativar o Plug-in WP Dark Mode em seu site WordPress. Em seguida, vá para a página Configurações »Modo escuro WP no administrador do WordPress e clique na guia Configurações gerais. Você será redirecionado automaticamente.

Neste ponto, você verá que o parâmetro "Ativar modo escuro com reconhecimento de sistema operacional" está ativado. Basicamente, quando um dos dispositivos de seus visitantes está definido para o modo escuro, a versão do modo escuro do seu site será exibida para eles. Interessante, não é!

Além disso, você também tem a configuração "Mostrar interruptor flutuante", que permite que seus usuários mudem a visualização do site para o modo escuro a qualquer momento, mesmo que não tenham habilitado a opção Modo escuro em seus dispositivos. Esta configuração também aparecerá ativada.

Agora volte ao seu site. No canto inferior direito, há um botão que você só precisa clicar para mudar instantaneamente o seu site para o modo escuro no seu dispositivo.

Na guia Configurações de estilo, você tem uma variedade de opções que permitem personalizar o modo escuro de seu site de acordo com sua preferência.

NOTA: Deve-se notar que a versão gratuita do plugin WP Dark Mode tem recursos limitados aos 2 primeiros estilos de chave flutuante e às 2 primeiras predefinições de cor.

Com a versão Pro, você tem muito mais opções de design. Além disso, é possível ativar o modo escuro em horários específicos ou adicionar código CSS personalizado.

Habilitando o modo escuro para o administrador do WordPress

Por padrão, o WordPress não tem esquemas de cores de administrador para reduzir a luz branca que vem de sua tela. É por isso que vamos usar o plugin WP Dark Mode novamente. Felizmente, o procedimento é muito simples.

Basta ir para a página Configurações »Modo escuro WP e clicar na guia Configurações gerais. Lá você verá o parâmetro "Enable Backend Darkmode". Você muda para ON e pronto. Claro, não se esqueça de clicar no botão Salvar configurações na parte inferior da página:

Agora você verá uma nova opção na barra superior da sua área de administração:

Para alternar sua área de administração para o modo escuro, basta clicar neste botão.

NOTA: Mesmo se você tiver vários usuários em seu site WordPress, cada um deles pode escolher se deseja ou não ativar o modo escuro como desejar.

Além disso, é possível usar o modo escuro com um esquema de cores de administrador do WordPress existente. Para fazer isso, vá para Usuários »Perfil e clique em uma opção na opção Admin Color Scheme. Claro, é necessário desligar o modo escuro para ver as opções do esquema de cores do administrador.

Ao escrever uma postagem no editor de blocos do WordPress, você também pode ativar o modo escuro. Para fazer isso, clique no pequeno ícone colorido no canto superior esquerdo e selecione o modo que deseja usar.

Isso é tudo! Esperamos que este artigo ajude você a adicionar facilmente o Modo escuro ao seu site WordPress. Assim, você não terá que forçar os olhos ao trabalhar até tarde da noite.

Se você gostou deste artigo, compartilhe em suas redes sociais favoritas. Também recomendamos que você nos siga nos telefones Twitter e Facebook para estar sempre atualizado com futuras publicações.