Search code examples
elasticsearchkibanakibana-4

Change the Kibana 4 Discover and Visualize Page Themes


I keep my Kibana Dashboard and Discover pages open on two different displays in our NOC. I want the Discover page to have the same "Dark" theme as my dashboard. However, I see that in Kibana 4.5 this is not a clickable option. Does anyone know where in Kibana4's code I can enable this, or can anyone point to a plugin that will enable this?


Solution

  • There is an open issue to enable the dark theme everywhere in Kibana and not just the dashboard.

    There are a few ways to achieve what you want. The quickest one is to modify the optimize/bundles/commons.style.css file and blatantly copy all .tab-dashboard.theme-dark rules to .tab-discover.theme-dark and .tab-visualize.theme-dark rules.

    The correct way of doing it is to checkout the kibana project (git clone https://github.com/elastic/kibana.git), then modify the src/ui/public/styles/dark-theme.less LESS file to replace

    .tab-dashboard.theme-dark {
    

    by

    .tab-dashboard.theme-dark, .tab-discover.theme-dark, .tab-visualize.theme-dark {
    

    You'll then need to recompile the LESS files to generate a new commons.style.css file using grunt build and you can replace your current optimize/bundles/commons.style.css with the newly generated one.

    Enjoy your dark theme!!