Como adicionar o modo escuro ao seu site WordPress

O modo escuro está se tornando muito comum hoje em dia em sites e aplicativos. Ter a portabilidade de alternar entre o modo escuro e o modo normal dá ao usuário a liberdade de ler ou visualizar o site de acordo com suas preferências.

O Modo escuro torna-se muito benéfico, especialmente quando você está lendo seu site à noite, isso garante que menos luz seja emitida para seus olhos, reduzindo o cansaço visual.

Além disso, o modo escuro freqüentemente reduz a exposição prejudicial à luz azul e freqüentemente aumenta a vida útil da bateria do dispositivo que você está usando para ler o site.

Então, você deseja adicionar um modo escuro ao seu site WordPress? Se sim, então você veio ao lugar correto porque hoje, nós lhe daremos um guia completo sobre como você pode selecionar o modo escuro do WordPress em seu site WordPress no frontend, bem como na área de administração.

O que é o modo escuro?

Você pode encontrar modos escuros em celulares e PCs ou laptops, e o modo escuro reduz a quantidade de luz branca emitida pela tela. Alguns gadgets incluem um modo noturno que emprega tons de cores mais quentes em vez de tons mais frios. O modo escuro tem uma abordagem diferente, preenchendo o fundo com tons escuros.

Por que adicionar o modo escuro em seu site WordPress?

O modo escuro oferece ao usuário uma melhor experiência na visualização de seus sites à noite, pois reduz a luz direta emitida, que pode ser bastante irritante e prejudicial aos olhos. Além disso, adicionar um plugin de modo escuro em seu site WordPress significa que você terá a opção de ativar e desativar o modo escuro. Além disso, você terá mais autoridade sobre como seu site aparece no modo escuro. O modo escuro também funciona como um modo noturno no site WordPress

Com o plugin de modo escuro do WordPress, você necessariamente não pode usar isso apenas no front-end, em vez disso, você pode usar o modo escuro para o administrador do WordPress também, o que significa que você pode ter uma melhor experiência de trabalho durante a noite.

Como adicionar o modo escuro ao seu site WordPress

Abaixo, ensinaremos como adicionar o modo escuro em seu site WordPress. Siga as etapas com atenção, pois isso é muito fácil e leva apenas alguns minutos para concluir todo o procedimento.

Etapa 1: Instalando o plug-in

A primeira etapa é fazer o download e instalar o Droit Dark Mode da DroitThemes. Este é um dos melhores plug-ins de modo escuro do WordPress disponíveis no mercado e você também pode acessar a versão gratuita para verificar os recursos antes de realmente pagar por isso.

Existem 3 maneiras de instalar o plugin do WordPress.

Método 1: No início, o plugin deve ser baixado e descompactado. Depois disso, descompacte o arquivo 'droit-dark-mode.zip' e coloque-o no diretório ' / wp-content / plugins / '. Na última etapa, você precisa ir para Plugins »Admin e ativar o plugin.

Método 2: Outra etapa que você pode seguir é instalar este plug-in de modo escuro . Dashboard » Plugin » Adicionar novo » Pesquisar 'Droit Dark Mode' » Instalar » Ativo .

Método 3: Há também outra etapa. Primeiramente, deve-se fazer o download de 'droit-dark-mode.zip' e seguir as etapas: Painel> Plug-in> Adicionar novo> Carregar o arquivo zip » Ativo.

Etapa 2: Verificar o modo escuro

Após a ativação, navegue até a página Configurações »Modo escuro do WordPress do seu administrador do WordPress e selecione a guia Configurações gerais . Você deve ser imediatamente encaminhado para lá. Quando o dispositivo de um visitante é definido para o modo escuro, eles visualizam instantaneamente a versão do modo escuro do seu site.

Você também encontrará uma opção “Mudar Estilo” que pode ligar ou desligar de acordo com sua escolha; por padrão, ele estará ativado. Essa opção pode ser exibida em qualquer lugar em seu site e o usuário pode escolher entre o modo escuro e o modo normal usando essa opção.

Você pode encontrar essa opção por padrão no canto inferior direito do seu site; visite seu site como um visualizador regular e você pode clicar no botão para mudar seu site para o modo escuro facilmente.

Etapa 3: configurações avançadas

Bem, The Droit Dark Mode vem como um plugin gratuito e uma versão paga. A versão gratuita não permite muitas opções de personalização, enquanto a versão paga permite que você personalize este plugin de modo escuro da maneira que você quiser.

Você pode encontrar as opções de personalização na página Configurações »Modo escuro de direito» Configurações avançadas e há opções de personalização adicionais. Depois de decidir se deseja usar o modo escuro ou claro, ele é armazenado por padrão.

Mudando o estilo do switch

Para modificar o estilo do alternador de modo escuro, por exemplo, basta clicar na guia Configurações de exibição : Existem vários estilos de alternância para escolher e empregar em seu site. Você também pode usar o widget Elementor pode ser usado para adicionar um botão Alternar ao conteúdo de qualquer postagem ou página.

O bloco de Gutenberg pode ser usado para adicionar um botão de mudança ao conteúdo de qualquer postagem ou página.

Será ótimo se você tiver a opção de definir a chave em diferentes posições. Bem, agora isso também é possível, obrigado ao plugin de modo escuro Droit porque permite que você coloque os interruptores em várias posições em seu site, começando do canto superior esquerdo, inferior esquerdo e superior direito. direito-inferior, centro-inferior, centro-superior e assim por diante.

Na versão gratuita; você terá 2 opções de alternador de modo escuro para escolher.

O usuário pode alterar a posição do interruptor e colocá-los em qualquer conteúdo, postagem ou página usando o elemento ou o widget ou o Bloco de Gutenberg. O botão pode ser movido em diferentes posições simplesmente clicando no botão e puxando o mouse para encontrar a posição precisa.

Mudando as cores do modo escuro

Você terá várias predefinições de cores para escolher a partir de uma seleção de mais de 10 predefinições de cores exclusivas para alterar rapidamente a cor do modo escuro na paleta de cores. Basta ir para a configuração Modo escuro Droit e, em seguida, rolar até as configurações de estilo e você encontrará a configuração de opções de cor que pode personalizar de acordo com sua escolha.

Além disso, todos os principais temas do mercado são compatíveis com o plugin Droit Dark Mode, então você está coberto.

Na versão gratuita, você terá a opção de escolher entre 2 cores.

Como adicionar o modo escuro ao seu administrador WordPress

Até agora, mostramos como adicionar o plugin Droit Dark Mode ao seu site WordPress, agora vou mostrar como podemos adicioná-lo no admin.

Como você já deve saber, o WordPress oferece muitos esquemas de cores diferentes para administradores, mas infelizmente nenhum deles tem o modo escuro e pode reduzir a luz. Portanto, a solução mais simples e eficaz é usar o plugin Droit Dark Mode.

Etapa 1: Como adicionar

Basta navegar até a guia Configurações gerais na página Configurações »Modo escuro. Em seguida, ative a configuração 'Ativar modo escuro de backend'. Lembre-se de salvar suas configurações clicando no botão Salvar configurações na parte inferior da página: E agora deve haver uma chave na parte superior da barra de administração que permitirá que você alterne facilmente entre o modo claro e escuro.

Etapa 2: mais opções e recursos de personalização

Vamos dar uma olhada em alguns recursos que você pode encontrar neste plugin de modo escuro na área de administração.

Escolhendo a cor

Escolha uma predefinição de cor para o painel de administração dependendo do seu navegador, você pode definir uma predefinição de cor para os painéis de administração escuro e claro. Isso significa que você terá acesso total para escolher a cor de acordo com suas escolhas enquanto trabalha em seu site WordPress.

Como o Modo escuro não é um esquema de cores de administrador, você pode facilmente combiná-lo com um que já exista no WordPress. Para fazer isso, vá para Usuários »Perfil e selecione uma opção em Esquema de cores de administrador no menu suspenso. É importante notar que você precisará desligar o modo escuro para acessar as opções de esquema de cores do administrador:

Configuração do modo noturno para páginas e postagens diferentes

Você terá a opção de ativar / desativar o modo escuro e selecionar uma paleta de cores diferente em postagens individuais de acordo com suas escolhas. Além disso, para cada categoria, você pode ativar / desativar o modo escuro e especificar uma paleta de cores separada.

Essas opções de personalização funcionam muito bem, especialmente quando você deseja que seu site se destaque dos demais concorrentes.

Destacando Produtos Diferentes Por Conteúdo

Vamos supor que você deseja ativar ou desativar o modo escuro ou o modo noturno em produtos diferentes e específicos ou talvez definir uma cor diferente; Este plugin escuro do WordPress até permitirá que você faça isso.

Suponhamos que você queira destacar um conteúdo específico. Isso também é fácil com este plugin do WordPress porque para cada tipo de página / postagem, você pode colocar o botão de alternância do modo escuro antes / depois do conteúdo.

Cor Personalizada e Mudar de Texto

Você pode até escolher e definir cores personalizadas para todos os seus parágrafos, links, botões de título e quaisquer outros elementos da IU. Tantas opções de personalização que você ficará cansado de ver diferentes opções.

Você também poderá editar o texto do botão de modo escuro tanto no escuro quanto no claro.

Personalização de Imagem

Imagem é a primeira coisa que chama a atenção do telespectador em qualquer site. Com a versão Pro Droit Dark Mode , você pode editar o brilho, a opacidade e o contraste de sua imagem com facilidade.

Aumente ou diminua o brilho, a opacidade e o contraste, conforme necessário, para combinar perfeitamente o conteúdo.

Pequena dica: você também pode usar o modo escuro ao compor uma postagem no editor de blocos do WordPress. Selecione o modo que deseja usar clicando no pequeno símbolo de cor no canto superior esquerdo: O que mais você precisa para uma experiência de trabalho fácil que garantirá menos esforço para seus olhos.

Conclusão

Você provavelmente está aqui porque queria saber como adicionar o modo escuro no site WordPress e hoje, acabamos de fazer isso. Até agora, neste artigo, discutimos tudo o que você precisa para adicionar o modo escuro em seu site WordPress.

Adicionar o modo escuro diretamente no site WordPress não é possível e para isso, você precisará de um Plugin adicional e para nós o plugin Droit Dark Mode funciona muito bem para fornecer o modo escuro em seu site e também no painel de administração. A personalização que este plugin oferece é imensa e você vai se divertir usando-o sem reclamar.