The default WordPress admin uses a grey-and-blue colour palette that works fine but is entirely disconnected from the brand identity of the site it manages. Changing the admin colours to match a company’s brand palette, to a dark mode for reduced eye strain, or to a high-contrast scheme for accessibility creates a more cohesive experience for teams spending hours in the WordPress backend. WordPress color scheme customisation ranges from the quick built-in theme selector to fully custom admin CSS and branded white-label implementations. For the bigger picture, our Complete Guide to WordPress How pulls everything together.
WordPress Color Scheme — Built-In Admin Colour Schemes
WordPress ships with eight built-in WordPress color scheme options that change the admin sidebar, header, and button colours. These require no plugins, no code, and apply instantly — the perfect quick solution for teams that find the default admin visually fatiguing or want basic personalisation.
Change the admin colour scheme per user: navigate to Users → Your Profile → scroll to “Admin Color Scheme” → seven colour swatches appear (Default, Light, Modern, Blue, Coffee, Ectoplasm, Midnight, Ocean, Sunrise) → click any swatch to preview → the admin immediately updates to show the selected scheme → scroll down and click “Update Profile” to save. The colour scheme setting is per-user — different team members can use different colour schemes according to personal preference without affecting anyone else’s admin experience. An Editor who prefers the Coffee scheme and an Administrator who prefers Ocean can both have their preference without any conflict.
The “Modern” WordPress color scheme (added in WordPress 5.7) uses a cleaner, higher-contrast palette that many users find more readable than the original Default scheme. “Midnight” provides the closest to a dark mode experience in the built-in options, though it is not a true dark mode — only the sidebar and header darken. “Light” uses an all-white palette that provides the cleanest appearance for screenshots and screencasts but can cause eye strain in low-light working conditions. For teams where consistency across all admin accounts is preferred (agencies managing client sites where all users should see the same colour scheme), the admin_init hook can enforce a specific WordPress color scheme for all users: add_action('admin_init', function() { $user_id = get_current_user_id(); if ($user_id) { update_user_meta($user_id, 'admin_color', 'coffee'); } }); — this sets the Coffee scheme for every logged-in user on each admin page load, overriding individual preference settings. According to the WordPress developer documentation, the admin_color user meta key stores the selected colour scheme — it can be set programmatically using update_user_meta() for any user ID without requiring the user to visit their Profile page.
Creating a Custom WordPress Color Scheme
The eight built-in schemes cover common preferences but none will precisely match a specific brand palette. A custom WordPress color scheme registered as an additional option alongside the built-in choices uses the wp_admin_css_color() function to register a new scheme with the site’s exact brand colours.
Register a custom admin colour scheme in functions.php:
add_action('admin_init', function() {
wp_admin_css_color(
'mybrand', // Unique slug
'My Brand', // Display name shown in Profile
get_stylesheet_directory_uri() . '/css/admin-brand.css', // Stylesheet URL
['#2c3e50', '#e74c3e', '#ecf0f1', '#95a5a6'], // 4 preview colours
['base' => '#ecf0f1', 'focus' => '#ffffff', 'current' => '#ffffff']
);
});Create the admin-brand.css stylesheet in the child theme’s /css/ folder. Start with a copy of the existing WordPress admin colour scheme CSS (available in wp-admin/css/colors/) and replace the colour values with the brand palette. The admin CSS variables use specific class names (body.admin-color-mybrand) that scope all styles to the custom scheme, preventing any conflict with other admin colour settings. The four preview colours in the registration appear as colour swatches in the Profile page colour selector, showing users what the scheme looks like before selecting it. For a complete custom WordPress color scheme that covers all admin UI elements — buttons, links, menu items, input focus states, notification bars — test the stylesheet across multiple admin sections (Posts, Media, Settings, Plugin activation pages) to catch any elements that were missed in the initial styling pass. Our guide on adding custom CSS to WordPress covers the CSS specificity principles that apply to admin CSS alongside front-end CSS — admin-scoped styles using body.admin-color-{slug} selectors ensure the custom scheme does not accidentally affect front-end styles.
True Dark Mode for WordPress Admin
The built-in “Midnight” WordPress color scheme darkens the sidebar and header but leaves the main content area white — not a true dark mode. Users who work in low-light environments and want a full dark mode admin experience need a plugin or custom CSS that extends the dark palette to all admin UI elements.
WP Dark Mode provides the most comprehensive WordPress color scheme dark experience — it applies a dark stylesheet to the entire admin including the content area, post editor, media library, and all plugin settings pages. Install → WP Dark Mode → Settings → enable for the admin → configure whether dark mode is always on or triggered by the device’s system dark mode preference. The system preference detection (using the CSS media query prefers-color-scheme: dark) automatically applies dark mode for users whose operating system is set to dark mode and disables it for users on light mode — providing a seamless experience without requiring any per-user configuration in WordPress.
Custom CSS for a true dark WordPress color scheme: add a stylesheet to the admin using the admin_enqueue_scripts hook with a stylesheet that overrides the default admin background colours. Target #wpcontent, #wpfooter, and .wrap for the main content area; target .wp-list-table for list tables; target #postdiv and #wp-content-editor for the classic editor. A complete dark mode admin CSS stylesheet requires targeting 200+ selectors across all admin page contexts — the WP Dark Mode plugin’s stylesheet is significantly more comprehensive than what most developers would build manually. For teams with strong dark mode preference and limited development budget for custom CSS, the WP Dark Mode plugin provides the complete solution more efficiently than a custom implementation. Our guide on WordPress accessibility covers the colour contrast requirements that custom admin colour schemes must meet for users with low vision — even aesthetic colour choices in the admin must maintain minimum 4.5:1 contrast ratios for text legibility.
White-Label WordPress Admin
White-labelling replaces the WordPress color scheme and all WordPress branding and WordPress branding with the agency’s own branding creates a more professional product delivery. White-labelling removes or replaces: the WordPress logo in the admin bar, the “Howdy” user greeting, the WordPress footer credit, the colour scheme to match the agency brand, and the default About WordPress and update notifications pages.
White Label CMS (free plugin) provides all white-labelling features in a single interface: set a custom logo for the admin, add custom CSS, rename menu items, hide WordPress update notifications from the client’s admin view (while still allowing the agency’s admin account to see them), and replace the dashboard with a custom welcome page. The plugin’s CSS field accepts any valid CSS that applies to the admin interface — use this to set a custom WordPress color scheme using the same CSS approach described in the custom scheme section, without needing to write PHP for the wp_admin_css_color() registration. White-labelling improves the client experience: clients who see a branded interface associate the quality of the admin experience with the agency rather than WordPress, reinforcing the value of the agency relationship and reducing the “I could just set this up myself” perception that a generic WordPress admin can create.
The admin bar is part of the WordPress color scheme that appears on the front-end for logged-in users) can be recoloured separately from the admin dashboard using CSS targeting #wpadminbar. The admin bar inherits the selected WordPress color scheme‘s colours in the default implementation, but custom CSS applied through the admin_head action overrides this for a specific front-end branding requirement: add_action('admin_head', function() { echo '<style>#wpadminbar { background: #your-brand-colour; }</style>'; }); and separately, add_action('wp_head', function() { echo '<style>#wpadminbar { background: #your-brand-colour; }</style>'; }); — both hooks are needed since the admin bar appears both in the WordPress admin (admin_head) and on the front-end of the site (wp_head). This small branding detail — a brand-coloured admin bar instead of the default black — contributes to the cohesive branded experience that distinguishes professional agency-delivered WordPress implementations from standard template installations. Reviews from the WordPress developer community confirm that wp_admin_css_color() is the official and most maintainable method for registering custom admin colour schemes, as it integrates with WordPress’s user preference system and survives WordPress updates without requiring manual CSS override maintenance. Our guide on managing WordPress user roles covers the role-based access configuration that pairs with custom admin colour schemes — agencies often use different colour schemes for different role levels to provide visual role identification at a glance.
The login page WordPress color scheme is separate from the admin colour scheme — the admin colour scheme affects the logged-in dashboard only, while the login page at wp-login.php uses its own default white/blue styling regardless of the admin scheme selection. Matching the login page colour scheme to the admin branding creates a cohesive first impression and is part of a complete white-label implementation. The login page CSS is added via the login_enqueue_scripts hook: add_action('login_enqueue_scripts', function() { echo '<style>body.login { background: #2c3e50; } .login form { background: #34495e; } input[type=text], input[type=password] { color: #ecf0f1; background: #2c3e50; border-color: #7f8c8d; }</style>'; }); — this applies the same dark palette to the login page as the custom admin colour scheme, making the entire WordPress admin experience visually consistent from login through all admin pages.
Editor colour schemes for the Gutenberg block editor are a distinct customisation layer from the admin WordPress color scheme. The block editor uses its own CSS variables for its interface colours — the admin colour scheme affects the sidebar and toolbar chrome around the editor, but the editor canvas itself (the white writing area) uses its own styling. Customise the block editor appearance via the theme.json file’s editor styles settings (for block themes) or via the add_theme_support(‘editor-styles’) function combined with a custom editor stylesheet (for classic themes). The block editor also supports a dark mode toggle within the editor itself (three-dot menu → Preferences → Appearance → Dark) that is independent of both the admin colour scheme and the system dark mode setting. For a fully cohesive admin experience, coordinate all three layers: the admin WordPress color scheme, the block editor’s appearance setting, and the login page CSS. Our guide on understanding the WordPress block editor covers the editor appearance settings and theme.json editor styles that control the block editor canvas colours as part of the complete admin branding setup.
Testing a custom WordPress color scheme across all WordPress admin screens ensures no admin elements were missed in the styling. A testing checklist for complete admin colour scheme coverage: Dashboard (widgets, welcome panel), Posts (list table, quick edit), Media library (grid and list view), Pages, Comments moderation queue, Appearance (themes grid, menu editor, customizer), Plugins (list and activation screens), Users, Settings pages, any plugin settings pages that add their own admin menus. Screenshots of each screen at both the mobile and desktop admin breakpoints confirm the colour scheme applies consistently without any white, grey, or blue default WordPress colours visible where brand colours should appear. Run the scheme through the WAVE accessibility checker (webaim.org/resources/contrastchecker) for the primary text and background colour combinations to confirm 4.5:1 minimum contrast ratios are maintained across all elements in the custom colour palette.
Network-wide WordPress color scheme enforcement across all subsites in a WordPress multisite installation uses a must-use plugin (placed in wp-content/mu-plugins/) that runs on every page load for every subsite. Unlike regular plugins, mu-plugins cannot be deactivated by site administrators — ensuring the colour scheme is applied consistently across the entire network regardless of individual site admin preferences. The mu-plugin registers the custom colour scheme via wp_admin_css_color() and sets it for all users via update_user_meta() on admin_init. This network-enforced branding approach is used by franchise networks, educational institutions, and media groups operating multisite networks where visual consistency across all sites is a brand requirement. The mu-plugin approach requires Super Admin or server file access to deploy and update — appropriate for network administrators who manage the hosting environment, and not accessible to individual site administrators who might otherwise override the network branding by installing colour scheme plugins on their individual subsites.
Seasonal or event-based WordPress color scheme changes — applying a holiday theme to the admin for December, or a brand launch colour scheme for a campaign period — can be implemented with time-conditional CSS using PHP’s date() function in the admin_head hook: output the custom CSS only when the current date falls within the target period. This creates a temporary visual change that reverses automatically at the campaign’s end without any manual admin intervention. While primarily a fun team experience enhancement rather than a functional requirement, seasonal admin colour changes on agency-managed client sites can be a memorable client touchpoint that reinforces the relationship. The same approach works for anniversary dates, product launch countdowns, and other time-specific events that the team managing the WordPress site wants to acknowledge visually in the admin environment they use daily.
