How to Enable Dark Mode in the WordPress Backend Without Plugins

Dark mode isn't just a trend—it's a necessity for those of us who spend hours working in the WordPress admin panel. In this guide, I'll explain how to enable a Custom dark mode in the WordPress backend using only CSS, without the need for plugins.

Ideal for developers, agencies, or advanced users who want to customize their experience without overloading their installation with outdated plugins.

✨ Benefits

• Reduces eye strain
• Enhance the nightlife experience
• It does not rely on external plugins
• Fully customizable

✅ Requirements

• Having a active child theme (for example: mitema-child)
• Access to the archive functions.php
• Ability to create a file .css on the subject

📁 Step 1: Create the custom CSS file

1. Inside your child theme directory, create the folder css if it doesn't exist:
   /wp-content/themes/mitema-child/css/
2. Inside that folder, create a file named:
   admin-dark.css
3. Paste the following content:

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;
}

🔧 Step 2: Load the CSS on the backend

1. I opened the file functions.php from your active child's topic.
2. Add this code to the end of the file:

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. Save your changes and reload the WordPress backend.

🌟 Additional customization (optional)

You can customize any part of the backend:

• Tables and Lists (plugins, WooCommerce orders, posts)
• Metaboxes and widgets
• Notifications and Manners
• Forms and Buttons

Use Inspect item in your browser to view the selectors and add them to your CSS.

🚀 Bonus: User-specific conditional dark mode

If you want to enable dark mode based on the user's preference (e.g., stored in a cookie or manually toggled), you can use:

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

This ensures that only those who have enabled dark mode can see it.

❓ Frequently Asked Questions

Does this method affect the front end?
No. It only applies to the backend (wp-admin).

Does it get lost during updates?
Not if you save it in a sub-topic.

Are there any plugins that do this?
The ones that exist are outdated or limited. This method is more streamlined and controlled.

Are there any of the default color options that do this?
Yes, one of the color options for the default theme is called "Midnight," but we’ve noticed that it isn’t very good, and since every plugin we have installed adds CSS parameters, we’d prefer to have a way to add rules to our own CSS and improve the visibility of dark mode.

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.