Kibana custom dashboard background color

I am trying to customize the background color for Kibana dashboard to match my website design.

I am using IFrame to publish the dashboard, and I could not change the background using CSS.

I was designing my website thinking that Kibana is customizable. For the past 5 hours I have searched all over the internet and I couldn't find one article describe so.

Is there any supported/hacked way that customized the background color ?

Solution

Answering my own question, First thing you should make sure your application in the same origin as the Iframe, otherwise it will not work.

Assuming we have this iframe:

<iframe
      #chatFrame
      [frameBorder]="0"
      id="chatFrame"
      src="YOUR_URL"
      height="1000px" width="100%"></iframe>

you should access the DOM of that jquery and change the css classes accordingly,

    $('chatFrame').on('load', function() {
      let head = $('iframe').contents().find('head');
      let css = '<style> html{background-color: #202548 !important;} .euiPanel{margin:2px; background-color:#262b4d} .mapboxgl-canvas{background-color: #0f6674}</style>';
      $(head).append(css);
    });

The tricky part here is knowing that YOU HAVE TO BE IN THE SAME ORIGIN