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.