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 #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.
Apache, Apache Lucene, Apache Hadoop, Hadoop, HDFS and the yellow elephant
logo are trademarks of the
Apache Software Foundation
in the United States and/or other countries.
