自定义主题

Grafana 自定义主题可以通过插件或自定义css来配置实现自定义主题样式

插件方式

安装插件

安装BoomTheme插件（这个插件已经不支持9.x以后的版本了）

或者使用命令行安装

~ grafana-cli plugins install yesoreyeram-boomtheme-panel
# 或
~ grafana-cli --pluginUrl https://github.com/yesoreyeram/yesoreyeram-boomtheme-panel/releases/download/v0.2.1/yesoreyeram-boomtheme-panel-0.2.1.zip plugins install yesoreyeram-boomtheme-panel

配置主题

建一个panel，使用BoomTheme插件配置

BoomTheme1

编辑Theme为Custom，需要准备一个css文件

主题文件可以从Theme Park寻找，这里提供一个主题文件aquamarine theme，(可以直接点击下载)

BoomTheme2

自定义 CSS 方式

除了插件方式外，还可以通过自定义 CSS 来实现主题定制，主要有以下步骤

配置`disable_sanitize_html`参数

需要配置grafana.ini文件，设置disable_sanitize_html参数为true，这样可以允许自定义的HTML和CSS代码

[panels]
# If set to true Grafana will allow script tags in text panels. Not recommended as it enable XSS vulnerabilities.
disable_sanitize_html = true

修改参数后，需要重启服务生效

编辑 CSS

打开一个Dashboard，添加一个Text面板，选择HTML模式，并勾选透明背景隐藏这个panel

text-html-panel

然后在其中添加自定义的CSS代码

<style type="text/css">
  body {
    background-color: green; 
    /* You can also use more advanced CSS for background patterns etc. */
  }
</style>

这样就可以实现自定义主题样式了

插件方式​

安装插件​

配置主题​

自定义 CSS 方式​

配置disable_sanitize_html参数​

编辑 CSS​