Como adicionar o modo escuro ao seu site WordPress com estes 4 passos simples

Quando o Instagram e alguns outros sites e aplicativos importantes adicionaram o modo escuro em outubro de 2019, testemunhamos um grande aumento no interesse das pessoas por esse recurso.

No entanto, mesmo se excluímos o outlier que é a adoção do modo escuro, também conhecido como modo noturno do Instagram, o gráfico acima indica claramente o crescimento da popularidade do recurso nos últimos anos.

Junto com o Instagram, muitas outras grandes empresas fizeram a transição para a era do modo noturno, e você também deve considerar a mudança. Não apenas porque está na moda, mas por seus muitos benefícios para seus usuários, incluindo, entre outros, redução da fadiga ocular para seus usuários, maior duração da bateria para os dispositivos usados ​​para visitar seu site e o fato de parecer muito mais legal.

OK, o último pode ser um pouco subjetivo, mas vamos ficar com ele.

Felizmente, adicionar um modo escuro ao seu site WordPress é bastante simples. Você não apenas pode configurar como seu site é exibido para cada usuário, mas também pode adicionar o recurso ao seu painel de administração e dar um descanso aos seus próprios olhos.

Se você está pensando em adicionar um modo escuro ao seu site, existem algumas maneiras de fazer isso, mas usar um plugin é de longe o mais simples, como você pode imaginar.

Neste post, apresentaremos um plug-in que a maioria das empresas de design de sites em Los Angeles recomenda - WP Dark Mode - e revisaremos todas as etapas que você precisa seguir para adicionar e personalizar essa funcionalidade para que se adapte ao seu site e ao tema do WordPress.

Mas primeiro, vamos dar uma olhada no que é o modo escuro e seus benefícios mais notáveis. Leia!

O que é o modo escuro e por que é útil?

Também conhecido como modo noturno, o modo escuro é uma simples alternância de exibição que altera o esquema de cores de um site de claro para escuro.

Em um site típico com letras pretas em um fundo branco, geralmente parece que as cores foram simplesmente invertidas, mas, como explicaremos abaixo, há um pouco mais do que isso.

Esse simples ajuste reduz significativamente a luz branca que sai da tela, reduzindo o cansaço visual, especialmente se um usuário estiver visitando o site à noite.

A opção de ativar o modo escuro está disponível na maioria dos sistemas operacionais e navegadores modernos.

Benefícios mais notáveis ​​​​do Dark Mode

Já mencionamos alguns dos benefícios desse recurso ao longo deste post, mas pensamos em descrevê-los todos aqui em uma boa lista com marcadores para sua conveniência.

Portanto, os benefícios do modo escuro incluem o seguinte:

• Menos tensão nos olhos
• Redução do consumo de energia e aumento da vida útil da bateria
• Menos luz branca das telas
• Mais tempo gasto na sua página

Como você já sabe, navegadores e sistemas operacionais modernos já oferecem o modo escuro como opção, mas se você quiser que seu site apareça no esquema de cores certo para os usuários que preferirem, precisará adicioná-lo por conta própria.

Felizmente, a instalação do plug-in WP Dark Mode pode simplificar esse processo, além de fornecer todos os tipos de controle sobre a aparência do modo escuro do seu site.

Modo Escuro x Modo Noturno

Antes de prosseguirmos, gostaríamos de abordar um possível problema com o qual os leitores mais atentos podem ter problemas. Ou seja, usamos e continuaremos a usar os termos "modo escuro" e "modo noturno" alternadamente ao longo deste artigo, embora possam descrever tecnicamente dois recursos diferentes.

O termo "modo noturno" é frequentemente usado para um recurso disponível na maioria dos smartphones modernos, que remove total ou parcialmente a luz azul da tela à medida que a noite cai para reduzir o impacto do tempo da tela no seu ciclo de sono.

No entanto, como explicamos anteriormente, os dois termos podem ser usados ​​de forma intercambiável, que é a abordagem que escolhemos neste post.

Agora que resolvemos isso, vamos ver como você pode adicionar o modo escuro (ou noturno) aos seus sites WordPress.

Como adicionar o modo escuro ao seu site WordPress usando o plug-in WP Dark Mode

Agora que você conhece todos os motivos pelos quais pode querer adicionar o modo escuro ao seu site WordPress, mostraremos como fazê-lo em quatro etapas simples.

Nossos amigos de uma empresa de web design em Miami nos ajudaram a criar este guia passo a passo que conta com um plugin especializado chamado WP Dark Mode.

1. Instale o plug-in

Embora existam vários plugins do WordPress no modo escuro, descobrimos que o WP Dark Mode é o mais amigável e confiável.

É um plugin que permite construir uma versão escura do seu site de forma rápida e sem esforço, sem a necessidade de lidar com configurações ou códigos complicados.

Como você pode esperar, o diretório de plugins do WordPress é onde você poderá encontrar essa ferramenta.

Presumimos que você já adicionou plug-ins ao seu site antes, mas, por precaução, tudo o que você precisa fazer é acessar o painel de administração e selecionar Adicionar novo na guia Plugins .

A partir daí, você pode encontrar o WP Dark Mode e clicar em Instalar agora e ativar .

2. Ative as configurações desejadas

Você pode ativar e desativar o modo escuro na guia Configurações gerais . Depois de abrir essa guia, você verá que duas opções já estão ativadas por padrão.

Eles são Ativar o modo escuro de front -end e Ativar o modo escuro com reconhecimento de sistema operacional .

O primeiro habilita o modo escuro em seu site, enquanto o último significa que o recurso será ativado automaticamente se o sistema operacional ou navegador do usuário estiver definido para o modo escuro.

Outra opção é tornar o modo escuro padrão . Este é bastante auto-explicativo - se você ligá-lo, todos os usuários verão a versão escura do seu site, independentemente de suas preferências.

3. Ligue e personalize o interruptor flutuante

Se você quiser dar aos usuários a opção de alternar entre os modos escuro e claro a qualquer momento, você também pode ativar a opção Mostrar interruptor flutuante .

Esta opção fará exatamente o que diz na lata - coloque uma alternância no front-end do seu site, permitindo que os usuários ativem ou desativem o modo escuro como quiserem.

Você pode mexer com o posicionamento e o estilo do ícone na seção Configurações de exibição. Suas opções em termos de estilo são um pouco limitadas na versão gratuita do plug-in, mas a funcionalidade principal (ativar ou desativar o modo escuro) está lá.

4. Experimente diferentes esquemas de cores no modo escuro

Neste ponto, seu site WordPress tem um modo escuro totalmente funcional e, se isso é tudo o que você procura, pode pular esta etapa.

No entanto, se você não quiser que seu site pareça genérico, é altamente recomendável personalizar as cores do modo escuro. Você encontrará todas as opções necessárias na seção Configurações de estilo .

Essa tela oferece uma paleta de cores que pode funcionar com a identidade visual do seu site.

Como você pode imaginar, a versão gratuita do plugin WP Dark Mode oferece opções um tanto limitadas aqui, mas você deve conseguir encontrar uma solução adequada.

Se você quiser personalizar ainda mais as cores, a versão premium oferece uma gama mais ampla de paletas de cores predefinidas e permite que você crie seu próprio esquema.

Bônus — Ativando o modo escuro no painel de administração do WordPress

Se você vai oferecer a seus clientes e prospects todos os benefícios de um modo escuro no front-end do seu site WordPress, por que não estender a mesma cortesia a si mesmo e adicionar o modo ao seu painel de administração também?

Se o esquema de cores padrão do WordPress for muito brilhante para o seu gosto, o plugin WP Dark Mode tem a solução. Aqui está como fazê-lo:

1. Instale o plugin WP Dark Mode - não há muito para explicar aqui. Consulte a seção acima para obter instruções sobre como concluir esta etapa.
2. Ativar o modo escuro de back-end — esta opção está na mesma guia que as outras configurações essenciais sobre as quais falamos antes ( Configurações gerais ). Você terá que navegar para esta seção e acionar um botão intitulado Enable Backend Darkmode. Não se esqueça de rolar para baixo e clicar em Salvar configurações para aplicar a alteração.
3. Alterne o modo escuro no seu painel de administração — seu painel de administração agora terá um interruptor na parte superior, permitindo que você ative o modo escuro. Isso é particularmente útil para sites com vários administradores, pois cada pessoa pode ativar ou desativar o modo escuro de forma independente.
4. (Opcional) Ajuste o esquema de cores do painel de administração — com o modo escuro ativado, você pode querer alternar algumas cores para deixar tudo mais bonito. Para fazer isso, navegue até Usuários > Perfil e selecione a paleta de sua preferência. Depois de definir as cores, clique em Atualizar perfil para aplicar as novas configurações.

E isso é tudo o que há para isso. Esperamos que este guia tenha ajudado você a implementar o modo escuro em seu site WordPress, bem como em seu painel de administração.

Essa atualização é quase direta demais para ser ignorada com o plug-in WP Dark Mode, por isso recomendamos que você adicione essa excelente funcionalidade ao seu site.

Biografia do autor: Christopher é especialista em marketing digital na Digital Strategy One e blogueiro freelance. Ele está focado em novas tendências de tecnologia da web e distribuição de voz digital em diferentes canais. Em seu tempo livre, Christopher toca bateria e Magic: the Gathering.