How to build a custom WordPress admin color scheme as a tiny plugin?

#wordpress #php #css #webdev

Every WordPress site I touch has the same gray wp-admin. WordPress ships eight color schemes under Users → Profile, and they haven't meaningfully changed in a decade. They also only recolor the menu. Buttons, notices, links, and table stripes stay stock no matter which one you pick.

The admin is just HTML and CSS, though. You can restyle the whole thing with one small plugin, and it's a nicer exercise than it sounds because the admin markup responds well to CSS custom properties. This post walks through how the plugin works, then shows a generator that writes it for you, with a Copy button for the PHP and CSS if you'd rather paste it into your own file.

How admin styling actually works

There's a legacy API (wp_admin_css_color()) for registering color schemes, but it expects a full compiled stylesheet per scheme, which is why nobody uses it for one-off client work.

The practical route is simpler: enqueue your CSS on every admin page with admin_enqueue_scripts and wp_add_inline_style. Define your palette once as CSS custom properties, then point the admin's known selectors at those tokens.

<?php
/**
 * Plugin Name: Custom WordPress Admin
 * Plugin URI: https://wpadminify.com/tools/color-generator
 * Description: Custom admin color scheme, sidebar width, and typography.
 * Version: 1.0.0
 */

if ( ! defined( 'ABSPATH' ) ) { exit; }

add_action( 'admin_enqueue_scripts', function () {
    $custom_colors = '
        :root {
            --background: #da9292;
            --foreground: #3c434a;
            --heading-foreground: #356d92;
            --menu-background: #b7706d;
            --menu-foreground: #f6e4e3;
            --active-menu-background: #8f4340;
            --active-menu-foreground: #ffffff;
            --primary: #dd823b;
            --link: #461fe0;
            --sidebar-expand: 167px;
            --radius: 0.125rem;
        }

        #wpbody-content { background: var(--background); }
        #wpbody-content h1, #wpbody-content h2 { color: var(--heading-foreground); }

        #adminmenu, #adminmenuback, #adminmenuwrap {
            background: var(--menu-background);
            width: var(--sidebar-expand);
        }
        #adminmenu a { color: var(--menu-foreground); }
        #adminmenu li.current a.menu-top,
        #adminmenu li.wp-has-current-submenu a.wp-has-current-submenu {
            background: var(--active-menu-background);
            color: var(--active-menu-foreground);
        }

        .wp-core-ui .button-primary {
            background: var(--primary);
            border-color: var(--primary);
            border-radius: var(--radius);
        }
        #wpbody-content a { color: var(--link); }

        .striped > tbody > :nth-child(odd) {
            background-color: color-mix(in srgb, var(--background) 92%, #000);
        }
    ';
    wp_add_inline_style( 'wp-admin', $custom_colors );
} );

A few things worth noting. wp_add_inline_style( 'wp-admin', ... ) attaches your CSS after the core admin stylesheet, so specificity mostly takes care of itself and you won't need a wall of !important. The whole thing is read-only styling: it adds no database tables and writes no options, so deactivating returns the stock admin instantly. And because the palette lives in :root tokens, swapping the entire scheme later means editing eleven lines instead of hunting selectors.

Drop that file in a folder, zip it, upload through Plugins → Add Plugin, done. Or skip the zip entirely:

# straight into a running site
wp plugin install ./custom-wordpress-admin.zip --activate

# or as a must-use plugin — no activation step, can't be disabled from the UI
cp custom-admin.php wp-content/mu-plugins/

The mu-plugin route is what I use on client sites where the branding shouldn't be one misclick away from disappearing.

The tedious part (and the shortcut)

Writing the enqueue boilerplate takes two minutes. Picking the actual colors is where the time goes, because the admin has more surfaces than you think: menu, submenu hover, active states, four notice types, primary and secondary buttons, links, form field borders, focus rings, odd/even table stripes, comment action links. Getting all of that coherent by hand means a lot of reload-and-squint.

This is the part the Admin Color Generator automates. It's a free browser tool from the WP Adminify team. Full disclosure: it's a lead magnet for their plugin, but the generator itself needs no signup to use.

The left panel exposes every token group; the right side is a live WordPress admin preview that updates as you drag. You can click into Posts, Media, or Settings inside the preview to check how the scheme holds up on real screens. Table stripes and notices look very different on a posts list than on the dashboard.

If you don't want to design from zero, there are presets: the WordPress classics like Midnight, Coffee, and Ectoplasm, plus community schemes like Tokyo Night, Claude, and Ghibli Studio.

An Advanced tab handles the two non-color tokens I always end up wanting anyway: sidebar expand/collapse width and border radius. A Typography tab swaps the admin font (Inter, Poppins, Montserrat, and friends).

Getting the code out

The Download button opens an export dialog with the complete generated plugin, plus tabs for the raw PHP and CSS with a Copy button:

Three ways to use it:

Download the zip. You get a standalone plugin named whatever you typed in the Plugin Name field. Upload, activate, colors apply immediately.
Copy the PHP. Paste it into your own plugin file or an mu-plugin, as above. The generated code is the same admin_enqueue_scripts + wp_add_inline_style pattern shown earlier. It's readable, unminified PHP.
Copy the CSS only. Useful if you already have a site plugin and just want the stylesheet portion, or if you manage admin styles through something like a theme's admin.css.

The email step only exists on the zip route (the link it sends also restores your design for later editing). If you copy the code from the tabs, you never enter anything.

Verify before you install

Habit worth keeping regardless of where generated code comes from: read it. The export here is short enough to review in under a minute. One action hook, one inline style call, a block of CSS. Confirm it makes no external HTTP calls and writes nothing to the database, then put it on the site.

If you build a scheme you like, I'm curious what tokens you changed beyond the menu. Drop your palette in the comments.

Tool: wpadminify.com/tools/color-generator — free, works without an account.
*Details guide: Check admin color scheme generator guideline.