Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Copa WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Como adicionar o modo escuro ao seu painel de administração do WordPress

Alguns dos membros da nossa equipe preferem trabalhar até tarde da noite e descobriram que a interface de administração brilhante do WordPress pode ser bastante agressiva para os olhos. Por isso, tentamos encontrar uma maneira de tornar a área de administração mais confortável para os notívagos e para aqueles que trabalham em condições de pouca luz.

Foi então que descobrimos os benefícios do modo escuro. Um esquema de cores mais escuras pode reduzir significativamente a luz branca e azul que vem da sua tela, facilitando a visão durante as sessões de edição noturnas.

Neste artigo, mostraremos como adicionar o modo escuro ao seu painel de administração do WordPress. Quer você seja um usuário noturno, um usuário que se preocupa com a bateria ou alguém que simplesmente adora a aparência elegante das interfaces escuras, temos tudo o que você precisa.

How to Add Dark Mode to Your WordPress Admin Dashboard

O que é o modo escuro e por que adicioná-lo ao WordPress?

Se você costuma trabalhar no seu site WordPress tarde da noite ou em condições de pouca iluminação, a luz forte da tela do computador pode causar cansaço visual.

Algumas pessoas até acreditam que a luz brilhante pode perturbar os ritmos circadianos naturais e dificultar o adormecimento.

Com isso em mente, muitos aplicativos, sites e até mesmo sistemas operacionais vêm com um modo escuro integrado que reduz a quantidade de luz branca proveniente da tela.

Dark mode in macOS

Se você tiver um smartphone iPhone ou Android, poderá alternar para o modo escuro usando um botão de alternância.

Alguns sites populares, como o YouTube, oferecem até mesmo um esquema de cores escuras incorporado.

An example of Dark Mode on the YouTube website

Adicionar o modo escuro ao seu site WordPress é ótimo para os visitantes, mas talvez você também queira adicionar um modo escuro ao back-end do seu site. O WordPress vem com esquemas de cores de administração, mas nenhum dos esquemas de cores padrão realmente reduz a quantidade de luz branca que passa pela tela.

Dito isso, vamos adicionar um modo escuro à área de administração do WordPress para que você possa trabalhar confortavelmente em seu site até tarde da noite ou em condições de pouca luz.

Maneira rápida e fácil de adicionar o modo escuro à sua área de administração do WordPress

A maneira mais fácil de adicionar um modo escuro ao painel de administração do WordPress é usar o WP Dark Mode. Esse plug-in permite que os administradores ativem e desativem o modo escuro com um único clique.

Melhor ainda, se você tiver um blog WordPress com vários autores, cada pessoa poderá ativar e desativar o modo escuro conforme preferir. O plug-in lembrará a preferência de cada um na próxima vez em que fizerem login. Para saber mais, consulte nossa análise completa do WP Dark Mode.

Primeiro, você precisará instalar e ativar o plug-in WP Dark Mode. Para obter mais detalhes, consulte nosso guia passo a passo sobre como instalar um plug-in do WordPress.

Após a ativação, acesse a página WP Dark Mode ” Settings (Modo escuro WP ) no painel do WordPress e clique na guia Admin Panel Dark Mode (Modo escuro do painel de administração).

Em seguida, ative o botão “Enable Admin Dashboard Dark Mode” (Ativar modo escuro do painel do administrador).

Enabling dark mode in WordPress

Você também pode ativar o modo escuro para o editor de blocos, se preferir.

Em seguida, role a tela para baixo e clique no botão “Save Changes” (Salvar alterações).

Saving WP Dark Mode plugin settings

Nesse momento, você verá um novo botão “Claro / Escuro” na barra de ferramentas do administrador.

Você pode clicar nesse botão de alternância para ativar e desativar o modo escuro na área de administração.

Turning on the dark mode in WordPress

O “Modo escuro” não é um esquema de cores do administrador, portanto, depois de ativá-lo, talvez você queira tentar alterar o esquema de cores do administrador.

Ao escolher um esquema de cores escuras, você pode reduzir ainda mais a quantidade de luz proveniente da tela. Outra opção é escolher um esquema de cores mais claras, o que tornará o painel do modo escuro mais fácil de ler.

Para alterar o esquema de cores do administrador, vá para Usuários ” Perfil e escolha qualquer uma das opções em Esquema de cores do administrador.

Admin Color Scheme

Você também pode ativar o modo escuro no front-end do seu site.

Para fazer isso, vá para a guia “Frontend Dark Mode” e ative o botão “Enable Frontend Dark Mode”.

Enabling dark mode for the website's front end

Como antes, certifique-se de pressionar o botão “Save Changes” (Salvar alterações) quando terminar.

Os visitantes ainda verão a versão normal e clara do seu blog ou site do WordPress. Mas eles podem mudar para o modo escuro a qualquer momento, clicando no ícone no canto inferior direito.

Adding dark mode to your WordPress website

Para obter mais dicas e truques sobre como personalizar sua área administrativa, consulte estes guias:

Esperamos que este tutorial tenha ajudado você a aprender como adicionar o modo escuro ao seu painel de administração do WordPress. Talvez você também queira ver nossas escolhas de especialistas dos melhores plug-ins de painel de administração do WordPress e nosso guia sobre como desativar todos os plug-ins quando o wp-admin não estiver acessível.

Se você gostou deste artigo, inscreva-se em nosso canal do YouTube para receber tutoriais em vídeo sobre o 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 receber uma comissão. Veja como o WPBeginner é financiado, por que isso é importante e como você pode nos apoiar. Aqui está nosso processo editorial.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

O kit de ferramentas definitivo WordPress

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

Reader Interactions

12 ComentáriosDeixe uma resposta

  1. Syed Balkhi

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Jiří Vaněk

    Thank you for the advice. I have both system and browser dark mode set on Windows 11, but WordPress keeps ignoring this setting. Browser settings and even a browser extension that should force dark mode didn’t help. And now I understand that it will be a problem of WordPress missing color scheme for dark mode. Thank you for the valuable experience and advice on how to force dark mode.

    • WPBeginner Support

      You’re welcome :)

      Administrador

  3. Dan

    Thank you.
    This is a workaround plugin, which is not ideal.
    I’ve observed that every time I click anything in the interface, it blinks for 1 second in the original color and then switches to dark mode.
    Ideally, WordPress should add it to its color scheme.

    • WPBeginner Support

      You may want to change your color scheme under User>Profile to set the base color to help prevent the delay in the style’s loading.

      Administrador

  4. Thia

    Awesome. Just tried the plugin and It’s really cool.

    • WPBeginner Support

      Glad you liked our recommendation!

      Administrador

  5. Darlington

    What about how to implement dark mode in the frontend of my wordpress website?

    • WPBeginner Support

      That would be determined by your theme, if you reach out to your theme’s support they should be able to let you know.

      Administrador

  6. Kuldeep Singh

    Awesome!

    Thank you guys. It helped me to get desired dashboard dark theme. But I need the default editor background in dark theme too. It there any single plugin which can change the dashboard and editor background to dark mode?

    • WPBeginner Support

      You would want to reach out to the plugin’s support for their recommendation first

      Administrador

Deixe uma resposta

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