WordPress admin color schemes let users customize the appearance of the admin interface. WordPress ships with eight default schemes, but you can create custom ones for your plugin or client sites. A custom color scheme reinforces branding and provides a unique experience for your users.
This guide covers how to create custom WordPress admin color schemes.
Registering a Color Scheme
Register a custom color scheme with the admin_init action using the wp_admin_css_color() function. Each scheme needs a unique ID, a display name, stylesheet URL, and an array of four colors for the color picker interface. The stylesheet contains CSS overrides that change the admin interface colors. Register your scheme early enough for users to select it in their profile settings.
Include a screenshot of your color scheme for the profile selection interface.
Designing the CSS
Create a CSS file that overrides the default admin colors. Target specific admin classes and IDs to change colors. Key elements to style include the admin menu background, menu text colors, highlighted menu items, admin toolbar, button colors, and notification colors. Use CSS specificity to ensure your overrides take effect.
Test your color scheme with different screen sizes and admin pages. Ensure sufficient color contrast for accessibility.
User Selection
Users select their color scheme from their profile page under Admin Color Scheme. Your registered scheme appears as an option. When selected, WordPress loads your scheme’s CSS file. Users can switch back to a default scheme at any time. For client sites, set the default color scheme programmatically with the get_user_option_admin_color filter.
Force a specific color scheme for all users on client sites by filtering the user’s choice.
Plugin-Specific Schemes
If your plugin has its own admin pages, you can apply styles selectively. Use the admin_enqueue_scripts hook to load additional CSS only on your plugin’s pages. Check the current screen with get_current_screen() to target specific pages. This approach gives your plugin a unique look without affecting the rest of the admin interface.
Style your plugin’s admin pages to match your brand colors while maintaining consistency with WordPress core UI elements.
Accessibility Considerations
Custom color schemes must maintain accessibility. Ensure sufficient contrast between text and background colors. Use the WordPress admin color contrast guidelines as a baseline. Test with color blindness simulators. Provide enough contrast in all interactive elements including buttons, links, and hover states.
Dark color schemes are popular but can be harder to read. Test thoroughly before releasing a dark scheme.
The Bottom Line
Custom admin color schemes let you brand the WordPress admin experience. Register schemes with unique IDs and CSS files, design with accessibility in mind, allow user selection or force schemes on client sites, and add plugin-specific styles. A well-designed color scheme makes your plugin feel like a native part of WordPress.
