Kibana 自定义仪表板背景颜色

【问题标题】：Kibana custom dashboard background colorKibana 自定义仪表板背景颜色
【发布时间】：2021-02-28 23:45:49
【问题描述】：

我正在尝试自定义 Kibana 仪表板的背景颜色，以匹配我的网站设计。

我正在使用 IFrame 发布仪表板，但无法使用 CSS 更改背景。

我在设计我的网站时认为 Kibana 是可定制的。在过去的 5 个小时里，我在整个互联网上进行了搜索，但找不到一篇这样描述的文章。

是否有任何支持/破解的方式来自定义背景颜色？

【问题讨论】：

标签： angular iframe kibana

【解决方案1】：

回答我自己的问题，首先你应该确保你的应用程序与 iframe 的来源相同，否则它将无法工作。

假设我们有这个 iframe：

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

您应该访问该 jquery 的 DOM 并相应地更改 css 类，

    $('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);
    });

这里的棘手部分是知道你必须在同一个来源

【讨论】：