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檔案即可
喜歡的話，麻煩關注點贊一下，謝謝啦~
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/251803.html
標籤：其他