Tutoriais confiáveis de WordPress, quando você mais precisa.
Guia para Iniciantes em WordPress
WPB Cup
Mais de 25 Milhões
Sites usando nossos plugins
16+
Anos de experiência com WordPress
3000+
Tutoriais de WordPress por especialistas

Como Adicionar Modo Escuro ao Seu Site WordPress (Maneira Fácil)

Adicionar o modo escuro a sites WordPress se tornou um tópico quente entre nossos leitores. 🌙

Não se trata apenas de seguir tendências. Pesquisas mostram que o modo escuro pode reduzir o cansaço visual para leitores noturnos e potencialmente economizar bateria em dispositivos móveis.

Embora muitos proprietários de sites assumam que isso requer conhecimento técnico, as ferramentas modernas do WordPress o tornaram muito mais acessível.💡

Neste guia, compartilharemos nossa maneira comprovada de adicionar o modo escuro no WordPress. Testamos essa solução em vários temas e configurações para garantir que seja confiável e fácil de adicionar.

Como adicionar modo escuro ao seu site WordPress

Resumo: A maneira mais fácil de adicionar o modo escuro ao WordPress é instalando o plugin WP Dark Mode. Ele adiciona automaticamente um botão de alternância personalizável ao seu site para que os visitantes possam escolher sua opção preferida, e ainda suporta o modo escuro na área administrativa do WordPress.

Por que adicionar o modo escuro ao seu site WordPress?

Adicionar o modo escuro ao seu site WordPress oferece aos visitantes outra maneira de visualizar seu conteúdo, especialmente em ambientes com pouca luz.

Muitas pessoas preferem o modo escuro porque ele pode tornar a leitura mais confortável à noite e reduzir a quantidade de luz brilhante vinda de suas telas.

É também um recurso popular em dispositivos móveis, aplicativos e sites, tornando-a uma experiência familiar para os usuários. Aqui estão alguns dos maiores benefícios de adicionar o modo escuro ao WordPress:

  • Melhorar o conforto de leitura: Fundos escuros podem ser mais fáceis para os olhos, especialmente em ambientes com pouca iluminação.
  • Aumentar a acessibilidade: O modo escuro oferece uma opção de visualização alternativa para usuários com sensibilidade à luz ou certas deficiências visuais.
  • Atender às preferências do usuário: Muitos visitantes já usam o modo escuro em seus telefones, tablets e computadores.
  • Criar uma experiência moderna: Oferecer modos claro e escuro dá aos usuários mais controle sobre como eles navegam em seu site.
  • Potencialmente economizar bateria: Em alguns dispositivos com telas OLED, o modo escuro pode reduzir o consumo de energia.

Ao adicionar um botão de alternância para o modo escuro ao seu site, os visitantes podem alternar entre temas claros e escuros sempre que quiserem, sem depender de extensões de navegador ou configurações do dispositivo.

Modo escuro do YouTube

Você pode até ativar o modo escuro na área administrativa do WordPress, o que pode tornar o gerenciamento do seu site mais confortável durante longas sessões de trabalho noturnas.

Com isso em mente, vamos dar uma olhada em como adicionar o modo escuro ao seu site WordPress.

Dica: Quer usar um esquema de cores escuras, mesmo quando o dispositivo do visitante está no modo normal ou diurno? Então confira nossa lista dos melhores temas escuros para WordPress.

Como Adicionar o Modo Escuro ao Seu Site WordPress

A maneira mais fácil de criar um modo escuro para o seu site é usando o WP Dark Mode.

É ideal para iniciantes e proprietários de sites ocupados que desejam adicionar um botão profissional de modo escuro sem tocar em uma única linha de código. Suas configurações intuitivas e implementação automática o tornam excepcionalmente fácil de usar.

Você pode aprender mais sobre isso em nossa análise detalhada do WP Dark Mode.

Primeiro, você precisará instalar e ativar o plugin WP Dark Mode gratuito. Para mais detalhes, consulte nosso guia sobre como instalar um plugin do WordPress.

Após a ativação, visite a página WP Dark Mode » Configurações no painel do WordPress e alterne o interruptor 'Ativar Modo Escuro no Frontend' para 'LIGADO'.

Depois de fazer isso, você também pode escolher um modo padrão para o frontend do seu site usando as opções fornecidas, como um menu suspenso ou botões de rádio.

Depois disso, clique no botão ‘Salvar Alterações’ para armazenar suas configurações.

Habilitar modo escuro no frontend

Em seguida, mude para a guia 'Personalização' para personalizar o layout, tamanho e posição do botão de alternância.

Você também pode alterar a cor do switch do modo escuro, mas precisará da versão pro do plugin para isso.

Personalizar o interruptor do modo escuro

Quando terminar, basta clicar no botão ‘Salvar Alterações’ para armazenar suas configurações. Agora, visite seu site WordPress para ver o toggle do modo escuro em ação.

Você também pode visitar seu site no seu celular ou tablet. Isso permite que você veja que o modo escuro também funciona em dispositivos móveis.

Prévia do modo escuro do site

Adicionando Modo Escuro à sua Área de Administração do WordPress

Você pode alterar o esquema de cores do administrador no WordPress usando as configurações integradas. No entanto, nenhum dos esquemas de cores padrão reduz a luz branca emitida pela tela.

Se você trabalha até tarde da noite ou sofre de fadiga ocular, pode tentar adicionar o modo escuro à área de administração do WordPress e ao editor de blocos.

Para fazer isso, visite a página WP Dark Mode » Configurações e mude para a aba ‘Modo Escuro do Painel de Administração’ na coluna da esquerda.

Aqui, ative o interruptor para a opção ‘Ativar Modo Escuro do Painel de Administração’ para ‘LIGADO’ e clique no botão ‘Salvar Alterações’.

Adicionar modo escuro no painel do WordPress

Assim que fizer isso, você notará que o interruptor do modo escuro estará na parte superior do seu painel do WordPress.

A partir daqui, você pode ativar o interruptor para ativar este modo sempre que desejar.

Alternar o interruptor do modo escuro no painel do WordPress

Se você também quiser adicionar um modo escuro para o editor de blocos, então você deve ativar o switch 'Block Editor Dark Mode' para 'ON'.

Em seguida, clique no botão ‘Salvar Alterações’.

Habilitar modo escuro para o editor de blocos

Agora abra uma página ou post no editor de conteúdo. Você notará um ícone de modo escuro no topo. Clique nele para abrir o menu suspenso e selecione a opção 'Modo Escuro'.

É assim que seu editor de blocos ficará no modo escuro.

Prévia do modo escuro do editor de blocos

Tutorial em Vídeo

Se você não gosta de instruções escritas, confira nosso tutorial em vídeo:

Inscreva-se no WPBeginner

Perguntas Frequentes Sobre o Modo Escuro no WordPress

Aqui estão algumas perguntas que nossos leitores fizeram com frequência antes de ativar o modo escuro no WordPress:

O WordPress tem modo noturno?

Não, o WordPress não possui um recurso de modo noturno integrado para o front-end do seu site. Para adicionar essa funcionalidade, você precisa usar um plugin como o WP Dark Mode ou instalar um tema escuro específico.

Como mudar o tema para o modo escuro?

A maneira mais fácil de mudar seu tema atual para o modo escuro é instalando um plugin que adiciona um switch. Alternativamente, você pode navegar para Aparência » Temas e ativar um tema que foi projetado com um esquema de cores escuras.

Quais são as desvantagens do modo escuro?

A principal desvantagem é que o modo escuro pode ser difícil de ler em ambientes claros e ensolarados. Além disso, logotipos padrão ou imagens transparentes com elementos escuros podem desaparecer ou parecer distorcidos contra um fundo escuro.

Qual modo de cor é melhor para os olhos?

O modo escuro é geralmente melhor para os olhos em condições de pouca luz, pois reduz o brilho e a cintilação da tela. No entanto, o modo claro é frequentemente melhor para legibilidade e compreensão de texto durante o dia ou em salas bem iluminadas.

Posso personalizar as cores do modo escuro para o conteúdo do meu site?

Sim, a versão WP Dark Mode Pro oferece amplas opções de personalização, incluindo vários estilos de modo escuro, CSS personalizado e recursos de modo escuro para imagens/vídeos. Isso permite que você ajuste o esquema de cores para todo o conteúdo do seu site, não apenas para o botão de alternância, para corresponder à sua marca.

Quais são alguns plugins alternativos de modo escuro para WordPress?

Embora o WP Dark Mode seja altamente recomendado por sua facilidade de uso, outras opções populares incluem Dark Mode by WPPOOL (anteriormente Droit Dark Mode), Darklup Lite e Go Dark. Cada um oferece recursos variados para implementar o modo escuro em seu site WordPress.

Qual porcentagem de pessoas usa o modo escuro?

Estudos indicam que uma porcentagem significativa de usuários de dispositivos móveis utiliza ou prefere o modo escuro em seus aparelhos. Oferecer suporte a este modo em seu site atende a um grande segmento das preferências dos usuários.

O tema escuro é mais saudável para os olhos?

Sim, um tema escuro pode ser mais saudável para seus olhos, pois minimiza a exposição à luz azul intensa. Essa redução na luz azul pode ajudar a prevenir o cansaço visual digital e pode melhorar a qualidade do sono se você usar dispositivos tarde da noite.

Esperamos que este artigo tenha ajudado você a aprender como adicionar o modo escuro ao seu site WordPress. Você também pode querer ver nosso guia sobre como escolher um esquema de cores perfeito para o seu site WordPress ou ver nossas escolhas de especialistas para os melhores construtores de temas WordPress para personalizar seu site.

Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.

Divulgação: Nosso conteúdo é apoiado pelo leitor. Isso significa que se você clicar em alguns de nossos links, poderemos ganhar uma comissão. Veja como o WPBeginner é financiado, por que isso importa e como você pode nos apoiar. Aqui está nosso processo editorial.

O Kit de Ferramentas Definitivo para WordPress

Obtenha acesso GRATUITO ao nosso kit de ferramentas - uma coleção de produtos e recursos relacionados ao WordPress que todo profissional deve ter!

Interações do Leitor

19 ComentáriosDeixe uma resposta

  1. Eu costumo trabalhar no meu site à noite, e meus olhos às vezes se cansam da luz que o WordPress usa. Além disso, não é bom para dormir. Obrigado por este guia, pois alternar o site e a área de administração para o modo escuro agora ajuda muito a reduzir o cansaço visual.

  2. Este é um plugin fantástico para salvar os olhos das pessoas. Eu uso esquemas de cores escuras no Windows há anos e agora posso adicioná-lo ao meu site WP. Agradeço sua explicação de algumas de suas opções. Muito obrigado!

    • Dependeria dos requisitos de acessibilidade específicos que você está tentando cumprir para saber se isso faz alguma coisa ou não.

      Admin

Deixe uma resposta

Obrigado por escolher deixar um comentário. Por favor, tenha em mente que todos os comentários são moderados de acordo com nossa política de comentários, e seu endereço de e-mail NÃO será publicado. Por favor, NÃO use palavras-chave no campo do nome. Vamos ter uma conversa pessoal e significativa.