Finally WordPress 3.8 (Beta 1) introduces the new (responsive) admin user interface for everyone (design originally introduced and available via MP6).

With the final release it’s no longer only a colored admin theme; there are a lot of new features within the admin interface, too! So let’s keep this in mind:

»It’s no longer MP6. It’s now just WordPress.«
— via, Targeting the new dashboard design in a post-MP6 world

Light vs. dark interfaces

But wait! Let’s take a fine step backwards to the design: every prior version of the WordPress admin interface has had a light background (at least sort of). With the release of v3.8 we’re changing from light to dark for the first time. Which is, from my point of view, a major design modification, especially for plugin and theme developers. However there is no built-in way (yet) to target these two states (light/dark):

»To those asking why we shouldn’t just include the class in 3.8: WordPress evolves over time, and even 3.8 has significant changes when compared to MP6 the plugin. While we do strive to maintain backwards compatibility — including, to some extent, when we merge in popular plugins — a line needs to be drawn somewhere. Short of introducing a ›version‹ string of the UI (which would be redundant, given WP versions), there’s just no great way to solve this, especially when trying to be forwards compatible with future design changes (to 3.8 and beyond). It’s worth noting that the branch-x-y classes were introduced a few versions ago specifically for the purposes of managing UI changes in plugins.«
— via, Targeting the new dashboard design in a post-MP6 world

I totally understand the official statement, written by Andrew Nacin, but switching between light and dark background-colors per default should really be captured in some way.

Do we really need a fallback?

Sure enough there will be no problems with font colors; not even with these nice new dashicon vector icons. But what about your custom post type with this simple *.PNG icon? Will the icon be light or dark? And what about your custom plugin with its own menu page? Of course, one can create a custom dashicon, but that’s not the point. Without an easy way to know whether the interface is light or dark, designing for WordPress admin will get much more tricky than it sould be.

Using our own admin body class

The idea is to add a dynamic admin body class (like .light-admin-ui vs. .dark-admin-ui) to the admin area.
In the first instance this is a design choice (making it easy for developers), but of course it’s about backwards compatibility, too.

Simply copy and paste the following filter to your functions.php to attach an appropriate class (depending on wp_version) to the body within the admin user interface.


What about custom plugins?

There will be cases with an old version of WordPress but a dark interface (e.g. WordPress 3.7 and MP6). Feel free to alter the filter to fit your needs:


What about custom user settings?

Did you know that users can also define their own custom admin color scheme within their profiles (including light and dark schemes)?

WordPress Admin › Users › Your Profile › Admin Color Scheme

Since WordPress 3.8 these color schemes vary quite a lot. Go ahead and try it yourself:








Selected Color: Default
User Option: 'fresh'
Admin Body Class: .admin-color-fresh
Selected Color: Light
User Option: 'light'
Admin Body Class: .admin-color-light
Selected Color: Blue
User Option: 'blue'
Admin Body Class: .admin-color-blue
Selected Color: Coffee
User Option: 'coffee'
Admin Body Class: .admin-color-coffee
Selected Color: Ectoplasm
User Option: 'ectoplasm'
Admin Body Class: .admin-color-ectoplasm
Selected Color: Midnight
User Option: 'midnight'
Admin Body Class: .admin-color-midnight
Selected Color: Ocean
User Option: 'ocean'
Admin Body Class: .admin-color-ocean
Selected Color: Sunrise
User Option: 'sunrise'
Admin Body Class: .admin-color-sunrise


Fortunately these settings are already available within the admin body class. The settings are stored within the user options and can be called via get_user_option( 'admin_color' ) if needed. For the sake of completeness one can combine these two things (nearly the same thing we did above):



Plugin and theme developers will definitely need a way to know if they are designing for a light or a dark interface. Adding a dynamic admin body class will offer an easy way to fix potential design issues.


I just answered a question on WPSE on how to change the default admin color for all users:
» WP 3.8 Default Admin Colour For All Users


Make sure to check out this post, written by Tran Ngoc Tuan Anh, and learn everything about modifying the admin body classes.