Se você estiver interessado em adicionar uma opção de modo escuro ao seu site WordPress, este artigo abordará tudo o que você precisa saber.
Primeiro, você conhecerá alguns dos benefícios que o modo escuro pode trazer para o seu site, incluindo a melhoria da acessibilidade, a criação de uma experiência mais saudável para os visitantes, a redução do uso de energia e, de modo geral, a satisfação das preferências do usuário.
Em seguida, mostraremos a você exatamente como adicionar o modo escuro ao WordPress usando plugins sem código ou soluções de código personalizados.
Ao final deste artigo, você saberá por que e como configurar o modo escuro no WordPress. Vamos começar.
O que é o modo escuro do WordPress?
O modo escuro do WordPress consiste em oferecer aos visitantes do seu site a opção de escolher entre um tema de estilo “claro” e um tema de estilo “escuro”.
Talvez você já esteja familiarizado com esse conceito do sistema operacional do seu computador ou smartphone. A maioria dos sistemas operacionais permite que você escolha entre os modos claro e escuro para a interface, e alguns até permitem que você alterne automaticamente entre os modos claro e escuro de acordo com a hora do dia.
No WordPress, a ideia é a mesma. Os visitantes podem usar um botão ou outro elemento de interface para alternar facilmente entre os modos claro e escuro. O conteúdo permanecerá idêntico em ambos os casos — a única diferença será o esquema de cores.
Aqui está um exemplo do nosso site de teste no WordPress em seu modo “claro” padrão:
E aqui está o mesmo site no modo “escuro”:
Nosso site de teste escolherá automaticamente a versão a ser exibida com base nas preferências do sistema operacional de cada visitante. Em seguida, os usuários também podem ajustar manualmente suas experiências usando o widget no canto inferior direito.
Por que oferecer o modo escuro no WordPress?
Há vários motivos para você considerar a possibilidade de oferecer o modo escuro em seu site. Essas razões variam desde atender preferências pessoais dos usuários até tornar seu site mais acessível e criar uma experiência mais saudável para os visitantes.
Vamos explorar esses motivos:
O modo escuro torna seu site mais acessível
Uma grande vantagem de oferecer o modo escuro é que ele pode ajudar a tornar seu site mais acessível.
A acessibilidade, frequentemente abreviada como a11y, refere-se à prática de tornar um site utilizável pelo maior número possível de pessoas, incluindo aquelas com deficiências.
Um exemplo de acessibilidade é garantir que as pessoas que navegam no seu site com leitores de tela assistivos ainda possam ter uma boa experiência.
Além de ser uma boa medida para facilitar a utilização do seu site por todos, a acessibilidade também é um requisito legal em muitas jurisdições. Por exemplo, há a Lei dos Americanos Portadores de Deficiência (ADA) e a Lei de Acessibilidade Europeia.
Embora a oferta do modo escuro não faça parte diretamente das Diretrizes de Acessibilidade de Conteúdo da Web (WCAG), ele pode melhorar a acessibilidade de outras formas.
Aqui estão algumas áreas notáveis em que o modo escuro pode melhorar a acessibilidade:
- Melhor contraste para conteúdo textual: O modo escuro geralmente oferece um contraste muito forte entre as cores de fundo e texto, facilitando a leitura para pessoas com problemas de visão. O alto contraste faz parte das diretrizes da WCAG, então oferecer o modo escuro pode ajudar indiretamente a seguir essas diretrizes.
- Compreensão mais fácil para alguns visitantes. Os visitantes que sofrem de dislexia ou outros distúrbios de processamento visual podem ter dificuldade para interpretar texto preto em um fundo branco, portanto, o modo escuro pode criar uma experiência melhor para esses visitantes. Esse problema é chamado de Síndrome de Sensibilidade Escotópica ou Síndrome de Irlen.
- Menos problemas para pessoas que sofrem de enxaqueca. As pessoas que têm problemas de enxaqueca são geralmente recomendadas a evitar luzes brilhantes. Ao criar uma experiência escura, esses visitantes podem aproveitar seu site e, ao mesmo tempo, minimizar o risco de agravar a enxaqueca.
Dito isso, o modo escuro não é a melhor opção de acessibilidade em todas as situações. Por exemplo, pessoas que sofrem de astigmatismo podem ter dificuldade para ler textos claros em um fundo escuro, pois isso pode causar um efeito de borrão chamado “halation”. Esse é um dos motivos pelos quais pode ser benéfico oferecer aos usuários a opção de escolher entre o modo claro e o modo escuro.
O modo escuro pode ser mais saudável para seus visitantes
Oferecer o modo escuro em um site também pode ajudar a criar uma experiência mais saudável para seus visitantes de várias maneiras diferentes.
Em primeiro lugar, o modo escuro pode ajudar os visitantes a implementar uma melhor higiene do sono, especialmente se eles estiverem navegando perto da hora de dormir. Os especialistas em sono recomendam que as pessoas tentem evitar luzes brilhantes nas horas antes de dormir.
Quanto mais claro e brilhante for o seu site, pior será para a higiene do sono dos visitantes. Ao oferecer o modo escuro, você pode permitir que os visitantes continuem interagindo com o seu site WordPress com o mínimo de impacto sobre os horários de sono deles.
Muitas implementações do modo escuro também podem habilitar automaticamente o modo escuro com base nas preferências do sistema operacional de cada visitante. Se um visitante configurar seu sistema operacional para alternar automaticamente para o modo escuro perto da hora de dormir, seu site poderá seguir essa programação.
O modo escuro também pode ser mais fácil para os olhos dos visitantes e causar menos fadiga ocular. Por exemplo, em um estudo da Universidade da Flórida Central (UCF), os autores do estudo descobriram que “a fadiga visual dos participantes foi significativamente menor com o modo escuro do que com o modo claro”
Além disso, os participantes apresentaram maior acuidade visual no modo escuro e concluíram os testes do estudo “com significativamente menos erros no modo escuro em comparação ao modo claro.”
O modo escuro pode consumir menos energia
Embora isso não seja uma vantagem para todos os visitantes, outro pequeno benefício de oferecer o modo escuro é que ele consumirá menos energia nas telas OLED. Como as telas OLED podem desligar pixels individuais em vez de iluminar a tela inteira, elas requerem menos energia para exibir pixels em cores escuras.
A economia exata de energia dependerá das configurações de brilho da tela do usuário, mas pode variar de modestos 3% a 9% em brilho baixo a um valor maior de 39%–47% quando o brilho está mais alto.
Esses números são provenientes de um estudo da Purdue University que analisou o uso de energia da tela em diferentes níveis de brilho.
Algumas pessoas simplesmente preferem o modo escuro
Além dos benefícios específicos acima, também vale a pena observar que alguns de seus visitantes talvez queiram usar o modo escuro devido a suas próprias preferências pessoais.
Essas preferências podem ser resultado de alguns dos benefícios listados, ou alguém pode simplesmente preferir o modo escuro por seus próprios motivos.
Ao oferecer o modo escuro como uma opção, você pode criar uma experiência de usuário melhor para esses visitantes.
4 maneiras de implementar o modo escuro no WordPress
Se você está convencido da ideia de adicionar o modo escuro ao WordPress, pode fazer isso de algumas maneiras diferentes.
A seguir, você verá quatro opções diferentes:
1. Usar um plugin de modo escuro para WordPress
Se você não quiser trabalhar com código, uma das maneiras mais fáceis de adicionar o modo escuro ao seu site é usar um plugin de modo escuro para WordPress.
O que torna a maioria desses plugins tão simples de usar é que eles são praticamente plug-and-play. Você pode ter o modo escuro funcionando em minutos e depois ajustar detalhes, se necessário.
Por exemplo, veja como funciona uma das opções mais populares: O plugin gratuito WP Dark Mode, disponível no WordPress.org.
Após ativar o plugin, o modo escuro será habilitado automaticamente no seu site. Na verdade, é o mesmo plugin que usamos para as capturas de tela de exemplo mencionadas anteriormente.
O plugin escolhe automaticamente a versão (clara ou escura) com base nas preferências do sistema operacional de cada visitante. Os usuários também podem alternar entre os modos manualmente por meio de um widget flutuante no canto inferior direito.
Se quiser ajustar o funcionamento do modo escuro, você pode acessar as configurações do plugin. Lá, é possível personalizar os estilos, definir como escolher a experiência padrão e muito mais.
Se optar por usar um plugin, aqui estão alguns dos plugins gratuitos mais populares para modo escuro:
Como esses plugins têm grande impacto na aparência do site, recomendamos testá-los antes de ativá-los no seu site ativo.
Se você utiliza a hospedagem gerenciada de WordPress da Kinsta, pode usar o ambiente de teste da Kinsta para testar facilmente esses plugins em uma versão segura do seu site.
2. Escolha um tema que suporte o modo escuro
Outra forma de implementar o modo escuro sem usar código é optar por um tema WordPress que inclua funcionalidade de modo escuro integrada.
Por exemplo, o tema gratuito Kanso de Rich Tabor inclui sua própria funcionalidade de modo escuro integrado, que você pode ver em ação no site pessoal de Rich.
Se você já criou seu site com outro tema, provavelmente não vale a pena trocar de tema apenas para acessar o modo escuro. Entretanto, se você ainda estiver trabalhando na criação do seu site e o modo escuro for importante para você, talvez valha a pena incluir esse recurso na sua lista de recursos a serem considerados ao escolher um tema de WordPress.
3. Use uma biblioteca JavaScript de modo escuro
Se você se sente à vontade para trabalhar com código, também existem bibliotecas JavaScript prontas que podem ser usadas para adicionar o modo escuro ao seu site.
Ou, se você for um desenvolvedor de WordPress, também poderá usar essas bibliotecas para adicionar facilmente o modo escuro a um plugin ou tema que esteja desenvolvendo. De fato, alguns dos plugins do modo escuro no WordPress.org são criados com base nessas bibliotecas.
Você pode encontrar várias bibliotecas de modo escuro diferentes, mas aqui estão duas das opções mais populares:
- darkmode.js
- drkmd.js
Se você quiser usar qualquer uma dessas bibliotecas, é altamente recomendável testá-las em um site de teste antes de adicionar o código ao seu site ativo. Novamente, se você hospedar seu site WordPress com a Kinsta, poderá usar o recurso de teste integrado da Kinsta.
darkmode.js
O darkmode.js usa o VanillajS e o CSS mix-blend-mode para adicionar o modo escuro sem nenhuma configuração adicional. Por padrão, ele adiciona um alternador flutuante que os visitantes podem usar para alternar entre o modo escuro e o modo claro, mas você pode desativar esse widget se preferir criar sua própria solução.
Na primeira visita de um usuário, ele escolherá o modo com base nas preferências do sistema operacional e também oferece suporte ao armazenamento local para que as preferências dos visitantes sejam salvas para visitas futuras. Você pode ver uma prévia dele em ação na página darkmode.js, cujo link está acima.
Como ele usa o mix-blend-mode em vez de exigir que você adicione suas próprias regras de CSS, ele é quase um plug-and-play.
drkmd.js
O drkmd.js usa uma abordagem um pouco diferente. Em vez de usar o CSS mix-blend-mode para criar automaticamente um modo escuro do seu site, ele permite que você especifique o atual CSS que deseja usar para o modo escuro. Em seguida, você pode adicionar essas regras de estilo ao seu site usando as classes theme-light e theme-dark.
Além disso, você pode adicionar facilmente um botão ou outro elemento de alternância entre os modos. Para isso, basta incluir o atributo data-drkmd-attach na tag do script.
A biblioteca também inclui recursos úteis, como a detecção automática das preferências do sistema operacional dos usuários e o armazenamento das escolhas dos visitantes no armazenamento local.
4. Use sua própria solução de código
Além de usar uma biblioteca JavaScript, há também outras soluções baseadas em código que você pode implementar para adicionar o modo escuro ao seu site.
Normalmente, elas funcionam aplicando um conjunto de regras CSS para o modo claro e, em seguida, um conjunto diferente de regras para o modo escuro.
Uma opção seria você fazer isso com o jQuery, conforme documentado neste tutorial. Basicamente, você adiciona regras de CSS para os dois modos (claro e escuro).
Em seguida, você pode adicionar um botão ou algum tipo de chave para habilitar o modo escuro. Se um usuário habilitar essa opção, você poderá usar o JavaScript para alternar quais classes CSS usar. No tutorial vinculado acima, você faz isso com o jQuery e os métodos hasClass(), addClass() e removeClass().
Se quiser algo mais sofisticado, neste tutorial baseado em JavaScript pode implementar dois recursos como:
- Detecção automática das preferências do sistema operacional dos usuários.
- Armazenamento das escolhas dos usuários e carregamento automático do modo correto nas visitas futuras.
Em geral, é mais simples usar uma das bibliotecas JavaScript mencionadas anteriormente. No entanto, se você preferir ter total controle, essas opções oferecem alternativas sólidas para implementar o modo escuro no WordPress.
Como habilitar o modo escuro do painel do WordPress
Até agora, abordamos como adicionar o modo escuro ao site WordPress visível para os visitantes no frontend. No entanto, você também pode querer habilitar o modo escuro no painel de controle do WordPress, tornando a interface de gerenciamento do site mais amigável.
Afinal, por que os visitantes do seu site devem ser os únicos que podem acessar os benefícios sobre os quais falamos acima?
Se você quiser adicionar o modo escuro ao seu painel do WordPress, a opção mais simples é usar um plugin. Há duas categorias principais de plugins que você encontrará:
- Plugins que mantêm a mesma interface de administração, mas apenas mudam os estilos para habilitar o modo escuro.
- plugins que criam uma interface de painel personalizada e também oferecem o modo escuro.
Alguns dos plugins de modo escuro do frontend acima também oferecem recursos para habilitar o modo escuro no painel do WordPress, como o plugin Dark Mode for WP Dashboard, como mostrado no exemplo abaixo:
Se você deseja experimentar uma interface completamente nova para o painel administrativo com a funcionalidade de modo escuro, pode considerar os seguintes plugins:
Resumo
Adicionar o modo escuro como uma opção em seu site pode melhorar a acessibilidade, oferecer uma experiência mais saudável aos visitantes, reduzir o uso de energia em algumas telas e, em geral, satisfazer as preferências pessoais de alguns usuários.
Se quiser adicionar o modo escuro ao WordPress, você tem muitas opções. Para soluções sem código, você pode usar um plugin de modo escuro ou um tema com modo escuro integrado. Para opções um pouco mais técnicas, você pode usar uma biblioteca JavaScript de modo escuro ou codificar sua própria solução.
Como a adição do modo escuro terá um grande efeito na aparência do frontend do seu site, você deve testá-lo completamente antes de adicioná-lo ao seu site WordPress ativo.
Com a hospedagem gerenciada de WordPress da Kinsta, você pode testar o modo escuro de forma segura utilizando o ambiente de teste e aplicar as mudanças quando estiver confiante de que tudo está funcionando corretamente.
Deixe um comentário