# 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:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![adonahoe](https://avatars.discourse-cdn.com/v4/letter/a/eb9ed0/32.png) [@adonahoe](https://discuss.elastic.co/u/adonahoe)\
**Post date:** [July 23, 2017, 8:27pm UTC](https://discuss.elastic.co/t/change-colors-of-kibana-sidebar-pink-kibana-header/94256/1 "2017-07-23T20:27:22Z")

</div>

Hello All,

I am looking to change the sidebar color kibana and the pink background of kibana. I was attempting to follow this post: [Theming Kibana with a Plugin](https://discuss.elastic.co/t/theming-kibana-with-a-plugin/79431) but was unable to get it to work. I changed all of the colors.less files which are located in the below directories and then I deleted the optimization directory. I changed all of the pink colors to a random color to see if it would work. This did not work and was wondering if anyone knows what I am doing wrong?

/home/kibana/kibana-5.5.0-linux-x86\_64/node\_modules/material-colors/dist/colors.less  
/home/kibana/kibana-5.5.0-linux-x86\_64/src/core\_plugins/metrics/public/visualizations/less/includes/colors.less  
/home/kibana/kibana-5.5.0-linux-x86\_64/src/ui/public/styles/variables/colors.less

---

<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.

---

<div class="post-metadata">

**Author:** ![adonahoe](https://avatars.discourse-cdn.com/v4/letter/a/eb9ed0/32.png) [@adonahoe](https://discuss.elastic.co/u/adonahoe)\
**Post date:** [July 24, 2017, 5:31pm UTC](https://discuss.elastic.co/t/change-colors-of-kibana-sidebar-pink-kibana-header/94256/3 "2017-07-24T17:31:46Z")

</div>

Thank you! That is the perfect answer!

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\
**Post date:** [August 21, 2017, 5:31pm UTC](https://discuss.elastic.co/t/change-colors-of-kibana-sidebar-pink-kibana-header/94256/4 "2017-08-21T17:31:49Z")

</div>

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.