# Change Colors of Kibana (Sidebar & Pink Kibana Header)

**URL:** <https://discuss.elastic.co/t/change-colors-of-kibana-sidebar-pink-kibana-header/94256>\
**Category:** Kibana\
**Created:** [July 23, 2017, 8:27pm UTC](https://discuss.elastic.co/t/change-colors-of-kibana-sidebar-pink-kibana-header/94256 "2017-07-23T20:27:22Z")\
**Posts on this page:** 1\
**Showing post:** 2

<div class="post-metadata">

**Author:** ![Joe\_Fleming](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/joe_fleming/32/3561_2.png) [@Joe\_Fleming](https://discuss.elastic.co/u/Joe_Fleming)\
**Post date:** [July 24, 2017, 5:28pm UTC](https://discuss.elastic.co/t/change-colors-of-kibana-sidebar-pink-kibana-header/94256/2 "2017-07-24T17:28:18Z")

</div>

I used my browser inspector to dig down into the elements that were actually supplying the colors. You have to poke around a bunch to find it, but it's not impossible. This is what I found:

The pink logo color if defined in `src/ui/public/chrome/directives/global_nav/global_nav.less`, and is simply a hard-coded value of `#e8488b` in `.global-nav .logo.kibana`.

The blue sidebar is defined in the same file, under `.global-nav`, but its value actually comes from another less file, `src/ui/public/styles/variables/for-theme.less`, using the names `@app-links-wrapper-background` and `@app-links-active-background`.

Changing those values will be reflected on rebuild.

![](https://us1.discourse-cdn.com/elastic/original/3X/6/5/65a856ae548155931ce1f2f92462aeb334b4c188.png)

The easier way to do this, and that would probably survive future changes to the less structure, would be to write a hack that simply injected your own stylesheet and overrode whatever Kibana sets. This would also have the advantage of making the changes portable, and not requiring you to make a custom build of Kibana.

---

_[View the full topic](https://discuss.elastic.co/t/change-colors-of-kibana-sidebar-pink-kibana-header/94256)._