Como ativar o modo noturno no WordPress

Há algum tempo, sistemas operacionais e aplicativos incluem versões de suas interfaces gráficas nas quais os fundos brancos são substituídos por fundos pretos para reduzir a emissão de luz durante a noite e, assim, prejudicar menos os olhos. Isso é conhecido como modo noturno .

Seja por moda ou porque realmente funciona, o modo noturno está cada vez mais popular. Há quem assegure que os modos noturnos trazem benefícios para o meio ambiente, já que as telas pretas consomem menos energia do que as brancas. Mas também existem detratores desse tipo de modos sombrios.

Seja como for, essa pode ser uma funcionalidade que você está interessado em ter também em seu site, e para isso hoje vamos falar sobre o modo noturno no WordPress.

O WordPress ainda não inclui um modo noturno no seu por padrão, mas há opções para adicionar o modo noturno no painel do WordPress e no frontend. Como de costume, os plugins são a solução para estender o WordPress com essa curiosa funcionalidade visual.

Como ativar o modo noturno no painel do WordPress

Começamos com o plugin Dark Mode para WordPress, que permite ativar o modo noturno no WordPress Dashboard. É fácil de usar e gratuito.

A primeira coisa é instalar e ativar o plugin. Podemos encontrá-lo diretamente no WordPress Plugin Directory, diretamente no painel do WordPress através do menu Plugins , como você pode ver na captura de tela acima.

Uma vez instalado o plugin Dark Mode, cada usuário do seu WordPress terá em seu perfil a opção de ativá-lo em seu Dashboard:

O bom desse plugin é que é cada usuário quem escolhe como quer ver o WordPress Dashboard, no modo escuro ou no modo normal. Dessa forma, se houver alguém que queira continuar usando o WordPress Dashboard como sempre, com fundo branco, não há problema em fazê-lo.

Na captura de tela anterior, você pode ver o resultado da ativação do modo escuro. E parece ótimo! Gostei muito do resultado de ter a cor de fundo preta também na parte central da página e não só no menu lateral.

Infelizmente, há um problema pendente para o plugin WordPress Dark Mode: fornecer compatibilidade com o editor de blocos Gutenberg. Na captura de tela a seguir, você pode ver que ainda não é possível aplicar o plano de fundo escuro ao Gutenberg:

Acho que se o plugin for bem-sucedido o suficiente e os usuários pedirem, seus desenvolvedores acabarão adaptando-o para que o editor de blocos também apareça no modo noturno. De qualquer forma, o ritmo frenético de desenvolvimento de Gutenberg e suas atualizações “frequentes” em seus estilos tornam a adaptação um tanto complexa.

Como ativar o modo noturno para seus visitantes do WordPress

O plugin Dark Mode apenas adiciona o modo noturno no painel do WordPress. O resto do seu site, ou seja, o frontend que os visitantes veem, continuará com a mesma aparência, sem sofrer alterações.

Se você deseja que seus visitantes tenham a opção de ativar o modo noturno em seu site, usando fundos escuros em vez de fundos claros, é necessário instalar o plug-in WP Night Mode.

Este plugin, como o Dark Mode, é totalmente gratuito e você também o tem disponível no WordPress Plugin Directory.

Uma vez instalado, você não verá nada em Configurações ou qualquer menu adicional. O que você precisa fazer é ir ao menu Aparência e lá editar seus menus. No seu menu principal, você deve adicionar um link personalizado sem nenhum URL específico. Este novo item de menu nos ajudará a adicionar o interruptor para ativar e desativar o modo noturno.

Na própria interface de gerenciamento de menus, você deve abrir as opções da tela que encontrará no canto superior direito para ativar a opção de adicionar classes CSS, como você vê na captura de tela a seguir:

Depois de fazer isso, quando você for editar o item de menu que adicionamos, você verá um campo adicional onde poderá adicionar classes CSS. Aqui você deve incluir a classe CSS wp-night-mode . Esta classe é aquela que o WP Night Mode precisa para identificar qual item deve ser usado como switch de modo noturno.

Por padrão, o WP Night Mode é um plugin que não adiciona cores escuras à sua interface. Você tem que escolher as cores escuras que deseja mostrar tanto para o plano de fundo, quanto para o texto e os links. Para definir essas cores, você deve ir ao menu Aparência e abrir o menu Personalizar .

O personalizador do WordPress será aberto e lá você encontrará a opção Modo Noturno . Se você selecioná-lo, verá que tem as opções para ativar o modo noturno por padrão e criar vários estilos. Em cada estilo você define a cor de fundo, a cor do texto e a cor dos links.

O bom do personalizador é que você pode ver uma prévia real de como seu site ficará com as cores escolhidas:

Infelizmente, o resultado não é perfeito: alguns elementos ainda possuem fundos claros que parecem estranhos no modo noturno. Mas não se preocupe, nós podemos consertar isso. No próprio personalizador, você pode adicionar regras CSS adicionais para corrigir esses pequenos problemas.

Volte no personalizador e você verá a opção CSS Adicional . Se você selecioná-lo, você tem a possibilidade de escrever regras CSS ali mesmo. Essas regras podem ser do seguinte tipo:

 body.wp-night-mode-on .class-of-the-element-to-fix { color: # 000; }

Tenha em mente que o que o plugin realmente faz é aplicar a classe CSS wp-night-mode-on na tag body do seu site. Portanto, se você deseja corrigir o plano de fundo de um elemento HTML e torná-lo escuro, tudo o que você precisa fazer é encontrar um seletor para esse elemento e aplicar a correção quando a tag body tiver a classe wp-night-mode-on .

Na comparação a seguir, você pode ver uma comparação básica entre o modo normal e o modo noturno com as cores que aplicamos:

Adicionar o modo noturno ao seu WordPress é muito fácil graças a alguns plugins. Hoje analisamos plugins que nos ajudam a ativar o modo noturno no painel do WordPress e no frontend.

Você é um usuário regular dos modos noturnos em seus aplicativos? Lembre-se de comentar abaixo com sua opinião!

Imagem em destaque por Priscilla Du Preez no Unsplash.