WordPress Plugin: Customize Your Admin Styling and Add Light and Dark Modes

Years ago, I developed a plugin called NiceAdmin that modified the WordPress Admin look and feel to a more modern style. WordPress has advanced a lot since then, and the admin look and feel is pretty clean. That doesn’t mean there’s not room for some customization, though!

One example is that WordPress doesn’t offer its admin a light mode or dark mode skin. Well, I built a basic plugin to do just that!

WordPress Plugin: Customize Your Admin Styling for Light and Dark Modes

Customizing the WordPress admin interface can enhance usability and reflect personal or brand preferences. In this guide, you’ll learn how to install and use a plugin to customize the WordPress admin interface with separate light and dark mode styles. The plugin includes a settings page to edit the CSS for each mode. It also comes preloaded with default styles for a dark theme.

Plugin Features

1. Dynamic Light and Dark Modes: Styles automatically adjust based on the user’s system preference.
2. Preloaded CSS: Default styles are included for the dark mode.
3. Editable CSS: Easily edit styles using a settings page within the WordPress admin dashboard.
4. Easy Installation: Simple setup with immediate effects.

Step-by-Step Guide

1. Create the Plugin Directory
   • Navigate to the wp-content/plugins/ directory in your WordPress installation.
   • Create a folder named niceadmin.
2. Add the Plugin File
   • Inside the niceadmin folder, create a file named niceadmin.php.
   • Copy and paste the following code into the niceadmin.php file:

<?php
/*
Plugin Name: Custom Admin CSS
Description: Customize the WordPress admin interface with preloaded CSS for light and dark modes.
Version: 1.4
Author: Douglas Karr
Author URI: https://dknewmedia.com
*/

if (!defined('ABSPATH')) {
    exit; // Exit if accessed directly
}

// Add a menu item for the plugin settings
function cac_mode_add_admin_menu() {
    add_options_page(
        'Custom Admin CSS',
        'Custom Admin CSS',
        'manage_options',
        'custom-admin-css-mode',
        'cac_mode_settings_page'
    );
}
add_action('admin_menu', 'cac_mode_add_admin_menu');

// Register settings
function cac_mode_register_settings() {
    register_setting('cac_mode_settings_group', 'cac_light_mode_css');
    register_setting('cac_mode_settings_group', 'cac_dark_mode_css');
}
add_action('admin_init', 'cac_mode_register_settings');

// Enqueue the custom CSS in the admin area
function cac_mode_enqueue_custom_css() {
    $light_css = get_option('cac_light_mode_css', '');
    $dark_css = get_option('cac_dark_mode_css', '');

    echo '<style>';
    if (!empty($light_css)) {
        echo '@media (prefers-color-scheme: light) {' . esc_html($light_css) . '}';
    }
    if (!empty($dark_css)) {
        echo '@media (prefers-color-scheme: dark) {' . esc_html($dark_css) . '}';
    }
    echo '</style>';
}
add_action('admin_head', 'cac_mode_enqueue_custom_css');

// Display the plugin settings page
function cac_mode_settings_page() {
    ?>
    <div class="wrap">
        <h1>Custom Admin CSS</h1>
        <form method="post" action="options.php">
            <?php
            settings_fields('cac_mode_settings_group');
            do_settings_sections('cac_mode_settings_group');
            ?>
            <h2>Light Mode CSS</h2>
            <textarea name="cac_light_mode_css" rows="10" cols="100" style="width: 100%; font-family: monospace;"><?php echo esc_textarea(get_option('cac_light_mode_css', '')); ?></textarea>
            <h2>Dark Mode CSS</h2>
            <textarea name="cac_dark_mode_css" rows="10" cols="100" style="width: 100%; font-family: monospace;"><?php echo esc_textarea(get_option('cac_dark_mode_css', '')); ?></textarea>
            <?php submit_button(); ?>
        </form>
    </div>
    <?php
}

// Preload default CSS options on activation
function cac_mode_activate() {
    $default_light_css = "";

    $default_dark_css = "/* Dark Mode CSS */
body {
    background-color: #1e1e1e;
    color: #ddd;
}

h1, h2, h3, h4, h5, h6 { 
   color: #999; 
}

#adminmenu {
    background-color: #333;
}

#adminmenu a {
    color: #ccc;
}

#adminmenu .wp-has-current-submenu > a, #adminmenu .wp-menu-open > a {
    background-color: #444;
    color: #fff;
}

.notice, div.error, div.updated {
    background: #333;
}

#wpwrap {
    background-color: #2b2b2b;
}

.postbox {
    background-color: #2e2e2e;
    border: 1px solid #444;
}

.postbox h2 {
    background-color: #444;
    color: #fff;
}";

    if (get_option('cac_light_mode_css') === false) {
        update_option('cac_light_mode_css', $default_light_css);
    }

    if (get_option('cac_dark_mode_css') === false) {
        update_option('cac_dark_mode_css', $default_dark_css);
    }
}
register_activation_hook(__FILE__, 'cac_mode_activate');

3. Activate the Plugin
   • Log in to your WordPress admin dashboard.
   • Go to Plugins > Installed Plugins.
   • Find Custom Admin CSS in the list and click Activate.
4. Customize the CSS
   • Navigate to Settings > Custom Admin CSS.
   • Edit the light and dark mode CSS in their respective textareas.
   • Click Save Changes to apply your updates.

How the Plugin Works

1. Dynamic Styles: The plugin uses @media (prefers-color-scheme) to apply styles based on the user’s system preference.
2. Default CSS: Preloaded styles ensure that light and dark modes are immediately visible upon activation.
3. Customizable Interface: A settings page allows users to modify or add styles without editing code.