How to override admin-bar style

How can I override the admin-bar so that it matched the style of the backend admin area of WordPress? Should that disable the default and clone the admin-bar.css and modify that file is good idea?

You can override admin-bar with this function, don’t need to mess with admin-bar.css.

Steps:

1. Write your css
2. Put inside the function (given below)

3. Add this inside functions.php

   // customize admin bar css
   function override_admin_bar_css() { 
   
      if ( is_admin_bar_showing() ) { ?>
   
   
         <style type="text/css">
            /* add your style here */
         </style>
   
      <?php }
   
   }
   
   // on backend area
   add_action( 'admin_head', 'override_admin_bar_css' );
   
   // on frontend area
   add_action( 'wp_head', 'override_admin_bar_css' );