# Admin Menu in Your Brand Colors

> Recolors the admin sidebar menu and admin bar with your brand colors, set as a few SCSS variables at the top.

- Type: SCSS
- Runs: Admin head
- Category: [Admin](https://wpide.com/library/category/admin/)
- Tags: admin, branding, scss
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/admin-menu-brand-colors/

## Code

```scss
// Brand colors.
$menu-bg: #1d2b3a;
$menu-text: #e6edf3;
$accent: #ff6b35;

#adminmenuback,
#adminmenuwrap,
#adminmenu,
#wpadminbar {
    background: $menu-bg;
}

#adminmenu a,
#adminmenu div.wp-menu-image::before,
#wpadminbar .ab-item,
#wpadminbar .ab-icon::before,
#wpadminbar .ab-item::before {
    color: $menu-text;
}

#adminmenu .wp-submenu,
#adminmenu .wp-has-current-submenu .wp-submenu,
#adminmenu a.wp-has-current-submenu:focus + .wp-submenu {
    background: darken($menu-bg, 5%);
}

#adminmenu li.menu-top:hover,
#adminmenu li > a.menu-top:focus,
#adminmenu li.current a.menu-top,
#adminmenu li.wp-has-current-submenu a.wp-has-current-submenu {
    background: $accent;
    color: #fff;
}

#adminmenu .awaiting-mod,
#adminmenu .update-plugins {
    background: $accent;
}
```

## Notes

Works best with the Default admin color scheme selected in each user profile.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Admin Menu in Your Brand Colors" in its snippet library and add it in one click; or create a new SCSS snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/