- https://grafana.com/grafana/plugins/yesoreyeram-boomtheme-panel
grafana-cli plugins install yesoreyeram-boomtheme-panel
- 1、新建Dashboard,Visualization 选择Boom Theme
- 2、新建自定义主题
- 自定义主题: https://github.com/gilbN/theme.park
- 由于theme.park可能受网络限制,可以clone下来后运行一个nginx代理下(文件引用需要手动处理)
- 下载theme.park-master.zip
- 解压后将CSS,Resources目录存放至nginx/html目录下做静态代理
- 修改themes/grafana/相关文件引用
- 同目录引用修改为 ./xxx.css,如aquamarine.css引用grafana-base.css
- 原引用: @import url(https://gilbn.github.io/theme.park/CSS/themes/grafana/grafana-base.css);
- 修改后: @import url(./grafana-base.css);
- 非同目录引用修改为相对路径引用,如plex.css引用 blur-noise.png,
- 原引用: --main-bg-color: url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/blur-noise.png"),
- 修改后: --main-bg-color: url("../../../Resources/blur-noise.png")
- 同目录引用修改为 ./xxx.css,如aquamarine.css引用grafana-base.css
- docker构建并运行
docker build -t grafana-theme-server docker run -d -p 80:80 grafana-theme-server
- 启动nginx代理后访问http://${NGINX_HOST}/CSS/themes/grafana/aquamarine.css测试是否正常
- 在grafana新增的theme中 CSS URL填入自定义样式地址。
- 保存后创建相关图表与原来方式一致。
- 复制该面板即可使用相同的主题。