Since version 3.0.0 of the plugin, WordPress Admin Bar has supported custom themes. If you are a WordPress theme developer, please consider including a WordPress Admin Bar theme with your WordPress theme. It’s easy to do, doesn’t take long to make, and will greatly improve the look and feel of the admin bar when used with your theme.

Adding A New WP Admin Bar Theme Via A WordPress Theme

First, copy one of the default themes’ stylesheets (for example grey.css) and place it in your theme’s folder. I’d name it wordpress-admin-bar.css if I were you.

Then open up your theme’s functions.php file. If your theme doesn’t have one, just create a blank PHP file and name it that.

Then place the following code in it:

if ( function_exists('wpabar_register_theme') )
	wpabar_register_theme( 'My Theme', 'my-theme', 'wordpress-admin-bar.css' );

wpabar_register_theme() parameters (all are required):

1. The proper name of your theme. This is what users will see on my plugin’s options page. You can have it be translatable if you wish: __( 'My Theme', 'my-theme-text-domain' )
2. A unique stub for your theme. I suggest using the same thing as your theme’s folder name.
3. The path/filename, relative to the root of your theme folder, to the stylesheet.

Now that you have that set up, visit this plugin’s options page and select the new theme. From there, you can tweak the stylesheet and images to match your theme. It’s just standard CSS, so have at it.

Adding A New WP Admin Bar Theme Via A WordPress Plugin

Since everything inside of the wordpress-admin-bar folder gets deleted and replaced when you upgrade the plugin via the admin interface, it is strongly advised you do not modify any of the default themes or the plugin file in an attempt to add/customize your own theme.

Instead use the wpabar_themes filter. Here is some example plugin code:

<?php /*

Plugin Name:  My WP Admin Bar Theme
Description:  Adds a theme to the WordPress Admin Bar plugin.
Version:      1.0.0
Author:       My Name
Author URI:   http://www.mysite.com/

*/

add_filter( 'wpabar_themes', 'myname_wpabar_theme' );

function myname_wpabar_theme( $themes ) {
	$themes['myname'] = array(
		'name' => 'My Theme',
		'css' => '/wp-content/plugins/myname-wpabar-theme/mytheme.css',
	);

	return $themes;
}

?>