Custom admin bar css on front end bug

Question

I want to apply my valid custom admin bar color scheme to front-end toolbar.

I am using this code to do it:

add_action(
'wp_enqueue_scripts',
function () {
    wp_enqueue_style(
        'color-admin-bar',
        PATH_TO_CSS,
        array( 'admin-bar' )
    );
} );

However it causes some strange bugs.

For example, when I hover a button it is colored with deep blue which is ok. But when it loses hover for 1 second it changes back to original color cheme (black background and blue text color).

I guess this is happening because of the default admin bar stylesheet:

<link rel='stylesheet' id='admin-bar-css'  href='http://neuralnet.info.loc/wp-includes/css/admin-bar.min.css?ver=4.8' type='text/css' media='all' />

But I can't turn it off because whole toolbar layout gets broken.

So how to properly replace admin bar color scheme in front-end?

UPD

I did look in admin-bar.css and it seems that it is a bit different from back-end admin bar...

Answer 1

You make it the wrong way.

First, you do double work. Enqueue inside enqueue. You don't need wp_enqueue_scripts():

wp_enqueue_style(
    'color-admin-bar',
    PATH_TO_CSS,
    array( 'admin-bar' )
);

Second. Don't use anonymous functions with WordPress Actions. Once-for-all-time is OK, but while the project is growing up you can collide with the inability to dequeue that style when you'll want to.

The solution.

Make a copy of the admin-bar.css and correct it to fit your needs. Then minimize it using any tool you can google for (optionally).

Dequeue the original admin bar:

<?php
add_action('admin_init', 'my_remove_admin_bar');
function my_remove_admin_bar() {
    wp_dequeue_style('admin-bar')
}

And enqueue your new-laid my-admin-bar.css

Slight hitch. You can face the problem when the whole admin bar gets updated to the new look with the new WordPress version.

Answer 2

This might be useful to you. The Admin Bar has some fairly specific CSS because it has to ensure that it's not accidentally overridden by theme CSS, which is why the post I linked makes heavy use of !important.

When deliberately trying to override it you need to be more specific and cover each of the states an element has styled by default otherwise it will fall back to whatever the default styles are.