Como ativar o modo escuro no backend do WordPress sem plugins

O modo escuro não é apenas uma tendência, mas uma necessidade para quem passa horas trabalhando no painel de administração do WordPress. Neste guia, vou explicar como ativar um modo escuro personalizado no backend do WordPress usando apenas CSS, sem a necessidade de plugins.

Ideal para desenvolvedores, agências ou usuários avançados que desejam personalizar sua experiência sem sobrecarregar sua instalação com plugins desatualizados.

✨ Benefícios

• Reduz a fadiga visual
• Melhore a experiência noturna
• Não depende de plugins externos
• Totalmente personalizável

✅ Requisitos

• Ter um tema filho ativo (por exemplo: mitema-child)
• Acesso ao arquivo functions.php
• Possibilidade de criar um arquivo .css dentro do tema

📁 Passo 1: Criar o arquivo CSS personalizado

1. Dentro do diretório do seu tema filho, crie a pasta css se não existir:
   /wp-content/themes/mitema-child/css/
2. Nessa pasta, crie um arquivo chamado:
   admin-dark.css
3. Cole o seguinte conteúdo:

body.wp-admin {
    background-color: #1b1b1b !important;
    color: #ddd !important;
}

#adminmenu,
#adminmenu .wp-submenu,
#wpadminbar {
    cor de fundo: #1e1e1e !important;
}

#adminmenu a,
#wpadminbar a,
#adminmenu .wp-has-current-submenu a,
#adminmenu .wp-has-current-submenu .wp-submenu a {
    color: #bbb !important;
}

#adminmenu .wp-has-current-submenu a,
#adminmenu .wp-has-current-submenu .wp-submenu a {
    color: #fff !important;
}

table.wp-list-table,
table.widefat,
table.wp-list-table th,
table.widefat thead th,
table.wp-list-table td,
table.widefat tbody tr {
    background-color: #2a2a2a !important;
    color: #ddd !important;
    border-color: #444 !important;
}

table.wp-list-table tbody tr:nth-child(2n),
table.widefat tbody tr:nth-child(2n) {
    cor de fundo: #232323 !important;
}

table.wp-list-table tbody tr:hover,
table.widefat tbody tr:hover {
    cor de fundo: #333333 !important;
}

table.wp-list-table .search-box input,
table.wp-list-table .search-box .button,
.tablenav .tablenav-pages a,
.tablenav .tablenav-pages span {
    cor de fundo: #333 !important;
    color: #ccc !important;
    border: 1px solid #444 !important;
}

.updates-table .plugin-title p,
td.column-title p,
td.plugin-title p,
.widefat td p {
    color: #eee !important;
}

.postbox,
.meta-box-sortables .postbox,
#dashboard-widgets .postbox {
    cor de fundo: #2b2b2b !important;
    borda: 1px sólida #444 !important;
}

.postbox .inside,
.postbox h2 {
    color: #ddd !important;
}

.postbox-header {
    background-color: #1f1f1f !important;
    color: #fff !important;
}

#TB_window,
#TB_title,
.ThickBox .wp-core-ui {
    background-color: #2a2a2a !important;
    color: #ddd !important;
    border-color: #444 !important;
}

.notice,
.updated,
.error,
.is-dismissible {
    cor de fundo: #333333 !important;
    borda esquerda: 4px sólida #555 !important;
    color: #eee !important;
}

.notice .notice-success,
.updated {
    border-left-color: #4a8c4a !important;
}

.notice .notice-error,
.error {
    border-left-color: #a00 !important;
}

input[type="text"],
textarea,
select,
.wp-core-ui .button,
button,
.page-title-action {
    background-color: #333 !important;
    color: #ddd !important;
    border: 1px solid #444 !important;
}

.media-modal,
.media-frame,
.wp-core-ui .media-modal-content {
    cor de fundo: #292929 !important;
    cor: #ddd !important;
}

body.wp-admin {
    cor de fundo: #1b1b1b !important;
}

.emphasis,
strong,
th {
    cor: #fff !important;
}

a {
    color: #6ea !important;
}

a:hover {
    color: #9ec2e6 !important;
}

🔧 Passo 2: Carregar o CSS no backend

1. Abri o arquivo functions.php do seu tema filho ativo.
2. Adicione este código ao final do arquivo:

function flatsome_child_enqueue_admin_dark_mode() {
    wp_enqueue_style(
        'admin-dark-style',
        get_stylesheet_directory_uri() . '/css/admin-dark.css',
        array(),
        '1.0'
    );
}
add_action('admin_enqueue_scripts', 'flatsome_child_enqueue_admin_dark_mode');

3. Salve as alterações e atualize o backend do WordPress.

🌟 Personalização adicional (opcional)

Você pode ajustar qualquer parte do backend:

• Tabelas e listas (plug-ins, pedidos do WooCommerce, entradas)
• Metaboxes e widgets
• Notificações e regras de conduta
• Formulários e botões

Use Inspecionar elemento no navegador para ver os seletores e adicioná-los ao seu CSS.

🚀 Bônus: modo escuro condicional por usuário

Se você quiser ativar o modo escuro de acordo com a preferência do usuário (por exemplo, salva em um cookie ou ativada manualmente), você pode usar:

if ( isset($_COOKIE['darkmode']) && $_COOKIE['darkmode'] === '1' ) {
    add_action('admin_enqueue_scripts', 'flatsome_child_enqueue_admin_dark_mode');
}

Isso permite que apenas quem tiver ativado o modo escuro possa ver.

❓ Perguntas frequentes

Esse método afeta o front-end?
Não. Isso se aplica apenas ao backend (wp-admin).

Isso se perde com as atualizações?
Não, se você guardá-lo em um tópico secundário.

Existem plugins que façam isso?
Os que existem estão desatualizados ou têm limitações. Esse método é mais leve e controlado.

Existe alguma das opções de cores padrão que faça isso?
Sim, uma das opções de cor do tema padrão se chama "Midnight" ou "Medianoche", mas percebemos que ela não é muito boa e, como cada plugin instalado adiciona parâmetros CSS, preferimos ter alguma forma de ir adicionando regras ao nosso próprio CSS e melhorar a visibilidade do modo escuro.

Se você quiser conhecer outros artigos semelhantes a Cómo activar el modo oscuro en el backend de WordPress sin plugins, visite a categoria %tegory%%.