【详细】Grafana轻松实现自定义主题

Grafana 有两个默认主题，dark 和 light，但是实际项目中，这两个主题展示效果并不出色，有时候为了更好的展示效果，我们需要修改Grafana的主题实现更漂亮的展示，今天就来探究实现这个功能

Grafana版本 

• Grafana v7.3.7

1. 效果展示

（1）星空主题

（2）hotline主题

(3) 青色主题

（4）灰度主题

 

2. 具体实现

2.1 安装Boom Theme Plugin

（1）指令安装 

grafana-cli plugins install yesoreyeram-boomtheme-panel

（2）重启Grafana

 win10下直接双击

（3）打开Plugins发现Boom Theme插件已经存在，说明插件安装成功

2.2 自定义css主题 

这里我写了一个自定义css文件，引入依赖theme.park这个依赖，传入我所需要的rgba颜色参数，进行适配，得到自己想要的主题

/* Hangli THEME */
@import url(https://gilbn.github.io/theme.park/CSS/themes/grafana/grafana-base.css);
:root {
  --main-bg-color: url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/blur-noise.png"), url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/preset-light2.png") center center/cover no-repeat fixed;
  --modal-bg-color: url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/blur-noise.png"), url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/preset-dark2.png") center center/cover no-repeat fixed;
  --button-color: #cc7b19;
  --button-color-hover: #e59029;
  --accent-color:  #e5a00d;
  --accent-color-hover: #ffc107;
}

 

2.3 引入自定义css文件

 添加一个新的 Dashboard，作为主题模板，然后 add new panel，选择面板类型 Boom Theme

      

 

然后引入自定义的css文件即可

 

喜欢的话，麻烦关注点赞一下，谢谢啦~