Cómo activar el modo oscuro en el backend de WordPress sin plugins

El modo oscuro no solo es tendencia, sino una necesidad para quienes pasamos horas trabajando en el panel de administración de WordPress. En esta guía te explico cómo activar un modo oscuro personalizado en el backend de WordPress usando solo CSS, sin necesidad de plugins.

Ideal para desarrolladores, agencias o usuarios avanzados que deseen personalizar su experiencia sin sobrecargar su instalación con plugins desactualizados.

✨ Beneficios

• Reduce el cansancio visual
• Mejora la experiencia nocturna
• No depende de plugins externos
• Completamente personalizable

✅ Requisitos

• Tener un tema hijo activo (por ejemplo: mitema-child)
• Acceso al archivo functions.php
• Posibilidad de crear un archivo .css dentro del tema

📁 Paso 1: Crear el archivo CSS personalizado

1. Dentro del directorio de tu tema hijo, creá la carpeta css si no existe:
   /wp-content/themes/mitema-child/css/
2. Dentro de esa carpeta, creá un archivo llamado:
   admin-dark.css
3. Pegá el siguiente contenido:

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

#adminmenu,
#adminmenu .wp-submenu,
#wpadminbar {
    background-color: #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) {
    background-color: #232323 !important;
}

table.wp-list-table tbody tr:hover,
table.widefat tbody tr:hover {
    background-color: #333333 !important;
}

table.wp-list-table .search-box input,
table.wp-list-table .search-box .button,
.tablenav .tablenav-pages a,
.tablenav .tablenav-pages span {
    background-color: #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 {
    background-color: #2b2b2b !important;
    border: 1px solid #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 {
    background-color: #333333 !important;
    border-left: 4px solid #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 {
    background-color: #292929 !important;
    color: #ddd !important;
}

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

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

a {
    color: #6ea !important;
}

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

🔧 Paso 2: Cargar el CSS en el backend

1. Abrí el archivo functions.php de tu tema hijo activo.
2. Agregá este código al final del archivo:

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. Guardá los cambios y recargá el backend de WordPress.

🌟 Personalización extra (opcional)

Puedes ajustar cualquier parte del backend:

• Tablas y listados (plugins, pedidos WooCommerce, entradas)
• Metaboxes y widgets
• Notificaciones y modales
• Formularios y botones

Usá Inspeccionar elemento en el navegador para ver los selectores y sumarlos a tu CSS.

🚀 Bonus: modo oscuro condicional por usuario

Si querés activar el dark mode según la preferencia del usuario (ej. guardado en cookie o toggle manual), podés usar:

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

Esto permite que sólo lo vea quien haya activado el modo oscuro.

❓ Preguntas frecuentes

¿Este método afecta el frontend?
No. Solo aplica al backend (wp-admin).

¿Se pierde con actualizaciones?
No si lo guardás en un tema hijo.

¿Hay plugins que hagan esto?
Los que existen están desactualizados o limitados. Este método es más liviano y controlado.

¿Hay alguna de las opción de colores por defecto que hagan esto?
Si, una de las opciones de color del theme por defecto se llama "Midnight" o "Medianoche", pero hemos notado que no es muy bueno y dado que cada plugin que tengamos instalado agrega parámetros CSS, preferimos poder tener alguna forma de ir agregando reglas a nuestro propio css y mejorando la visibilidad del modo oscuro.

Si quieres conocer otros artículos parecidos a Cómo activar el modo oscuro en el backend de WordPress sin plugins puedes visitar la categoría Ayuda y Soporte.