Change Colors of Kibana (Sidebar & Pink Kibana Header)

[adonahoe (Andrew)]

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

[Joe_Fleming]

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.

[adonahoe (Andrew)]

Thank you! That is the perfect answer!