O que \u00e9 o modo escuro do WordPress?<\/h2>\n
O modo escuro do WordPress consiste em oferecer aos visitantes do seu site a op\u00e7\u00e3o de escolher entre um tema de estilo “claro” e um tema de estilo “escuro”.<\/p>\n
Talvez voc\u00ea j\u00e1 esteja familiarizado com esse conceito do sistema operacional do seu computador ou smartphone. A maioria dos sistemas operacionais permite que voc\u00ea escolha entre os modos claro e escuro para a interface, e alguns at\u00e9 permitem que voc\u00ea alterne automaticamente entre os modos claro e escuro de acordo com a hora do dia.<\/p>\n
No WordPress, a ideia \u00e9 a mesma. Os visitantes podem usar um bot\u00e3o ou outro elemento de interface para alternar facilmente entre os modos claro e escuro. O conte\u00fado permanecer\u00e1 id\u00eantico em ambos os casos \u2014 a \u00fanica diferen\u00e7a ser\u00e1 o esquema de cores.<\/p>\n
Aqui est\u00e1 um exemplo do nosso site de teste no WordPress em seu modo “claro” padr\u00e3o:<\/p>\n E aqui est\u00e1 o mesmo site no modo “escuro”:<\/p>\n Nosso site de teste escolher\u00e1 automaticamente a vers\u00e3o a ser exibida com base nas prefer\u00eancias do sistema operacional de cada visitante. Em seguida, os usu\u00e1rios tamb\u00e9m podem ajustar manualmente suas experi\u00eancias usando o widget no canto inferior direito.<\/p>\n H\u00e1 v\u00e1rios motivos para voc\u00ea considerar a possibilidade de oferecer o modo escuro em seu site. Essas raz\u00f5es variam desde atender prefer\u00eancias pessoais dos usu\u00e1rios at\u00e9 tornar seu site mais acess\u00edvel e criar uma experi\u00eancia mais saud\u00e1vel para os visitantes.<\/p>\n Vamos explorar esses motivos:<\/p>\n Uma grande vantagem de oferecer o modo escuro \u00e9 que ele pode ajudar a tornar seu site mais acess\u00edvel<\/a>.<\/p>\n A acessibilidade, frequentemente abreviada como a11y<\/strong>, refere-se \u00e0 pr\u00e1tica de tornar um site utiliz\u00e1vel pelo maior n\u00famero poss\u00edvel de pessoas, incluindo aquelas com defici\u00eancias.<\/p>\n Um exemplo de acessibilidade \u00e9 garantir que as pessoas que navegam no seu site com leitores de tela assistivos ainda possam ter uma boa experi\u00eancia.<\/p>\n Al\u00e9m de ser uma boa medida para facilitar a utiliza\u00e7\u00e3o do seu site por todos, a acessibilidade tamb\u00e9m \u00e9 um requisito legal em muitas jurisdi\u00e7\u00f5es. Por exemplo, h\u00e1 a Lei dos Americanos Portadores de Defici\u00eancia (ADA) e a Lei de Acessibilidade Europeia<\/a>.<\/p>\n Embora a oferta do modo escuro n\u00e3o fa\u00e7a parte diretamente das Diretrizes de Acessibilidade de Conte\u00fado da Web (WCAG)<\/a>, ele pode melhorar a acessibilidade de outras formas.<\/p>\n Aqui est\u00e3o algumas \u00e1reas not\u00e1veis em que o modo escuro pode melhorar a acessibilidade:<\/p>\n Dito isso, o modo escuro n\u00e3o \u00e9 a melhor op\u00e7\u00e3o de acessibilidade em todas as situa\u00e7\u00f5es. Por exemplo, pessoas que sofrem de astigmatismo<\/a> podem ter dificuldade para ler textos claros em um fundo escuro, pois isso pode causar um efeito de borr\u00e3o chamado “halation”. Esse \u00e9 um dos motivos pelos quais pode ser ben\u00e9fico oferecer aos usu\u00e1rios a op\u00e7\u00e3o de escolher entre o modo claro e o modo escuro.<\/p>\n Oferecer o modo escuro em um site tamb\u00e9m pode ajudar a criar uma experi\u00eancia mais saud\u00e1vel para seus visitantes de v\u00e1rias maneiras diferentes.<\/p>\n 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<\/a> nas horas antes de dormir.<\/p>\n Quanto mais claro e brilhante for o seu site, pior ser\u00e1 para a higiene do sono dos visitantes. Ao oferecer o modo escuro, voc\u00ea pode permitir que os visitantes continuem interagindo com o seu site WordPress com o m\u00ednimo de impacto sobre os hor\u00e1rios de sono deles.<\/p>\n Muitas implementa\u00e7\u00f5es do modo escuro tamb\u00e9m podem habilitar automaticamente o modo escuro com base nas prefer\u00eancias 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\u00e1 seguir essa programa\u00e7\u00e3o.<\/p>\n O modo escuro tamb\u00e9m pode ser mais f\u00e1cil para os olhos dos visitantes e causar menos fadiga ocular. Por exemplo, em um estudo da Universidade da Fl\u00f3rida Central (UCF)<\/a>, os autores do estudo descobriram que “a fadiga visual dos participantes foi significativamente menor com o modo escuro do que com o modo claro”<\/p>\n Al\u00e9m disso, os participantes apresentaram maior acuidade visual no modo escuro e conclu\u00edram os testes do estudo \u201ccom significativamente menos erros no modo escuro em compara\u00e7\u00e3o ao modo claro.\u201d<\/p>\n Embora isso n\u00e3o seja uma vantagem para todos os visitantes, outro pequeno benef\u00edcio de oferecer o modo escuro \u00e9 que ele consumir\u00e1 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.<\/p>\n A economia exata de energia depender\u00e1 das configura\u00e7\u00f5es de brilho da tela do usu\u00e1rio, mas pode variar de modestos 3% a 9% em brilho baixo a um valor maior de 39%\u201347%<\/strong> quando o brilho est\u00e1 mais alto.<\/p>\n Esses n\u00fameros s\u00e3o provenientes de um estudo da Purdue University<\/a> que analisou o uso de energia da tela em diferentes n\u00edveis de brilho.<\/p>\n Al\u00e9m dos benef\u00edcios espec\u00edficos acima, tamb\u00e9m vale a pena observar que alguns de seus visitantes talvez queiram usar o modo escuro devido a suas pr\u00f3prias prefer\u00eancias pessoais.<\/p>\n Essas prefer\u00eancias podem ser resultado de alguns dos benef\u00edcios listados, ou algu\u00e9m pode simplesmente preferir o modo escuro por seus pr\u00f3prios motivos.<\/p>\n Ao oferecer o modo escuro como uma op\u00e7\u00e3o, voc\u00ea pode criar uma experi\u00eancia de usu\u00e1rio melhor<\/a> para esses visitantes.<\/p>\n Se voc\u00ea est\u00e1 convencido da ideia de adicionar o modo escuro ao WordPress, pode fazer isso de algumas maneiras diferentes.<\/p>\n A seguir, voc\u00ea ver\u00e1 quatro op\u00e7\u00f5es diferentes:<\/p>\n Se voc\u00ea n\u00e3o quiser trabalhar com c\u00f3digo, uma das maneiras mais f\u00e1ceis de adicionar o modo escuro ao seu site \u00e9 usar um plugin de modo escuro para WordPress.<\/p>\n O que torna a maioria desses plugins t\u00e3o simples de usar \u00e9 que eles s\u00e3o praticamente plug-and-play<\/strong>. Voc\u00ea pode ter o modo escuro funcionando em minutos e depois ajustar detalhes, se necess\u00e1rio.<\/p>\n Por exemplo, veja como funciona uma das op\u00e7\u00f5es mais populares: O plugin gratuito WP Dark Mode<\/a>, dispon\u00edvel no WordPress.org.<\/p>\n Ap\u00f3s ativar o plugin, o modo escuro ser\u00e1 habilitado automaticamente no seu site. Na verdade, \u00e9 o mesmo plugin que usamos para as capturas de tela de exemplo mencionadas anteriormente.<\/p>\n O plugin escolhe automaticamente a vers\u00e3o (clara ou escura) com base nas prefer\u00eancias do sistema operacional de cada visitante. Os usu\u00e1rios tamb\u00e9m podem alternar entre os modos manualmente por meio de um widget flutuante no canto inferior direito.<\/p>\n Se quiser ajustar o funcionamento do modo escuro, voc\u00ea pode acessar as configura\u00e7\u00f5es do plugin. L\u00e1, \u00e9 poss\u00edvel personalizar os estilos, definir como escolher a experi\u00eancia padr\u00e3o e muito mais.<\/p>\n Se optar por usar um plugin, aqui est\u00e3o alguns dos plugins gratuitos mais populares para modo escuro:<\/p>\n Como esses plugins t\u00eam grande impacto na apar\u00eancia do site, recomendamos test\u00e1-los antes de ativ\u00e1-los no seu site ativo.<\/p>\n Se voc\u00ea utiliza a hospedagem gerenciada de WordPress da Kinsta<\/a>, pode usar o ambiente de teste da Kinsta<\/a> para testar facilmente esses plugins em uma vers\u00e3o segura do seu site.<\/p>\n Outra forma de implementar o modo escuro sem usar c\u00f3digo \u00e9 optar por um tema WordPress que inclua funcionalidade de modo escuro integrada.<\/p>\n Por exemplo, o tema gratuito Kanso de Rich Tabor<\/a> inclui sua pr\u00f3pria funcionalidade de modo escuro integrado, que voc\u00ea pode ver em a\u00e7\u00e3o no site pessoal de Rich<\/a>.<\/p>\n Se voc\u00ea j\u00e1 criou seu site com outro tema, provavelmente n\u00e3o vale a pena trocar de tema<\/a> apenas para acessar o modo escuro. Entretanto, se voc\u00ea ainda estiver trabalhando na cria\u00e7\u00e3o do seu site e o modo escuro for importante para voc\u00ea, talvez valha a pena incluir esse recurso na sua lista de recursos a serem considerados ao escolher um tema de WordPress<\/a>.<\/p>\n Se voc\u00ea se sente \u00e0 vontade para trabalhar com c\u00f3digo, tamb\u00e9m existem bibliotecas JavaScript<\/a> prontas que podem ser usadas para adicionar o modo escuro ao seu site.<\/p>\n Ou, se voc\u00ea for um desenvolvedor de WordPress, tamb\u00e9m poder\u00e1 usar essas bibliotecas para adicionar facilmente o modo escuro a um plugin ou tema que esteja desenvolvendo<\/a>. De fato, alguns dos plugins do modo escuro no WordPress.org s\u00e3o criados com base nessas bibliotecas.<\/p>\n Voc\u00ea pode encontrar v\u00e1rias bibliotecas de modo escuro diferentes, mas aqui est\u00e3o duas das op\u00e7\u00f5es mais populares:<\/p>\n Se voc\u00ea quiser usar qualquer uma dessas bibliotecas, \u00e9 altamente recomend\u00e1vel test\u00e1-las em um site de teste antes de adicionar o c\u00f3digo ao seu site ativo. Novamente, se voc\u00ea hospedar seu site WordPress com a Kinsta<\/a>, poder\u00e1 usar o recurso de teste integrado da Kinsta.<\/p>\n O darkmode.js<\/a> usa o VanillajS e o CSS Na primeira visita de um usu\u00e1rio, ele escolher\u00e1 o modo com base nas prefer\u00eancias do sistema operacional e tamb\u00e9m oferece suporte ao armazenamento local para que as prefer\u00eancias dos visitantes sejam salvas para visitas futuras. Voc\u00ea pode ver uma pr\u00e9via dele em a\u00e7\u00e3o na p\u00e1gina darkmode.js, cujo link est\u00e1 acima.<\/p>\n Como ele usa o O drkmd.js<\/a> usa uma abordagem um pouco diferente. Em vez de usar o CSS Al\u00e9m disso, voc\u00ea pode adicionar facilmente um bot\u00e3o ou outro elemento de altern\u00e2ncia entre os modos. Para isso, basta incluir o atributo A biblioteca tamb\u00e9m inclui recursos \u00fateis, como a detec\u00e7\u00e3o autom\u00e1tica das prefer\u00eancias do sistema operacional dos usu\u00e1rios e o armazenamento das escolhas dos visitantes no armazenamento local.<\/p>\n Al\u00e9m de usar uma biblioteca JavaScript, h\u00e1 tamb\u00e9m outras solu\u00e7\u00f5es baseadas em c\u00f3digo que voc\u00ea pode implementar para adicionar o modo escuro ao seu site.<\/p>\n 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.<\/p>\n Uma op\u00e7\u00e3o seria voc\u00ea fazer isso com o jQuery, conforme documentado neste tutorial<\/a>. Basicamente, voc\u00ea adiciona regras de CSS para os dois modos (claro e escuro).<\/p>\n Em seguida, voc\u00ea pode adicionar um bot\u00e3o ou algum tipo de chave para habilitar o modo escuro. Se um usu\u00e1rio habilitar essa op\u00e7\u00e3o, voc\u00ea poder\u00e1 usar o JavaScript para alternar quais classes CSS usar. No tutorial vinculado acima, voc\u00ea faz isso com o jQuery e os m\u00e9todos Se quiser algo mais sofisticado, neste tutorial baseado em JavaScript<\/a> pode implementar dois recursos como:<\/p>\n Em geral, \u00e9 mais simples usar uma das bibliotecas JavaScript mencionadas anteriormente. No entanto, se voc\u00ea preferir ter total controle, essas op\u00e7\u00f5es oferecem alternativas s\u00f3lidas para implementar o modo escuro no WordPress.<\/p>\n At\u00e9 agora, abordamos como adicionar o modo escuro ao site WordPress vis\u00edvel para os visitantes no frontend. No entanto, voc\u00ea tamb\u00e9m pode querer habilitar o modo escuro no painel de controle do WordPress, tornando a interface de gerenciamento do site mais amig\u00e1vel.<\/p>\n Afinal, por que os visitantes do seu site devem ser os \u00fanicos que podem acessar os benef\u00edcios sobre os quais falamos acima?<\/p>\n Se voc\u00ea quiser adicionar o modo escuro ao seu painel do WordPress, a op\u00e7\u00e3o mais simples \u00e9 usar um plugin. H\u00e1 duas categorias principais de plugins que voc\u00ea encontrar\u00e1:<\/p>\n Alguns dos plugins de modo escuro do frontend acima tamb\u00e9m oferecem recursos para habilitar o modo escuro no painel do WordPress, como o plugin Dark Mode for WP Dashboard<\/a>, como mostrado no exemplo abaixo:<\/p>\n Se voc\u00ea deseja experimentar uma interface completamente nova para o painel administrativo com a funcionalidade de modo escuro, pode considerar os seguintes plugins:<\/p>\n Adicionar o modo escuro como uma op\u00e7\u00e3o em seu site pode melhorar a acessibilidade, oferecer uma experi\u00eancia mais saud\u00e1vel aos visitantes, reduzir o uso de energia em algumas telas e, em geral, satisfazer as prefer\u00eancias pessoais de alguns usu\u00e1rios.<\/p>\n Se quiser adicionar o modo escuro ao WordPress, voc\u00ea tem muitas op\u00e7\u00f5es. Para solu\u00e7\u00f5es sem c\u00f3digo, voc\u00ea pode usar um plugin de modo escuro ou um tema com modo escuro integrado. Para op\u00e7\u00f5es um pouco mais t\u00e9cnicas, voc\u00ea pode usar uma biblioteca JavaScript de modo escuro ou codificar sua pr\u00f3pria solu\u00e7\u00e3o.<\/p>\n Como a adi\u00e7\u00e3o do modo escuro ter\u00e1 um grande efeito na apar\u00eancia do frontend do seu site, voc\u00ea deve test\u00e1-lo completamente antes de adicion\u00e1-lo ao seu site WordPress ativo.<\/p>\n![\"Exemplo](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/11\/light-mode-example-1024x710.jpg\")
![\"Exemplo](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/11\/dark-mode-example-1024x709.jpg\")
Por que oferecer o modo escuro no WordPress?<\/h2>\n
O modo escuro torna seu site mais acess\u00edvel<\/h3>\n
\n
O modo escuro pode ser mais saud\u00e1vel para seus visitantes<\/h3>\n
O modo escuro pode consumir menos energia<\/h3>\n
Algumas pessoas simplesmente preferem o modo escuro<\/h3>\n
4 maneiras de implementar o modo escuro no WordPress<\/h2>\n
1. Usar um plugin de modo escuro para WordPress<\/h3>\n
![\"\u00c1rea](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/11\/wp-dark-mode-plugin-settings-1024x705.jpg\")
\n
2. Escolha um tema que suporte o modo escuro<\/h3>\n
![\"O](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/11\/rich-tabor-dark-mode-theme-1024x804.jpg\")
3. Use uma biblioteca JavaScript de modo escuro<\/h3>\n
\n
darkmode.js<\/h4>\n
mix-blend-mode<\/code><\/a> para adicionar o modo escuro sem nenhuma configura\u00e7\u00e3o adicional. Por padr\u00e3o, ele adiciona um alternador flutuante que os visitantes podem usar para alternar entre o modo escuro e o modo claro, mas voc\u00ea pode desativar esse widget se preferir criar sua pr\u00f3pria solu\u00e7\u00e3o.<\/p>\nmix-blend-mode<\/code> em vez de exigir que voc\u00ea adicione suas pr\u00f3prias regras de CSS, ele \u00e9 quase um plug-and-play.<\/p>\ndrkmd.js<\/h4>\n
mix-blend-mode<\/code> para criar automaticamente um modo escuro do seu site, ele permite que voc\u00ea especifique o atual CSS que deseja usar<\/a> para o modo escuro. Em seguida, voc\u00ea pode adicionar essas regras de estilo ao seu site usando as classes theme-light<\/code> e theme-dark<\/code>.<\/p>\ndata-drkmd-attach<\/code> na tag do script.<\/p>\n4. Use sua pr\u00f3pria solu\u00e7\u00e3o de c\u00f3digo<\/h3>\n
hasClass()<\/code>, addClass()<\/code> e removeClass()<\/code>.<\/p>\n\n
Como habilitar o modo escuro do painel do WordPress<\/h2>\n
\n
![\"Um](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/11\/dark-mode-wordpress-dashboard-1024x736.jpg\")
\n
Resumo<\/h2>\n