Change Colors of Kibana (Sidebar & Pink Kibana Header)

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.

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.

1 Like