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?
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
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
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.
Thank you! That is the perfect answer!
This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.