https://segmentfault.com/a/1190000039165676
正常grafana看板的顏色非常單調，時間長了也會審美疲勞，對於那些喜新厭舊的人來說，多少有點不能滿足，於是我就在網上找了一些方式來讓我的grafana看板變得更加炫酷，講之前先貼個對比圖吧
再來個動圖
第一張圖顯得暗淡了許多，哈哈哈。下面講講如何去做。
grafana安裝插件yesoreyeram-boomtheme-panel
因爲我的grafana沒有使用k8s進行安裝，我直接用docker起的，所以這裏我直接進入到docker裏執行安裝操作
# docker ps
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
cef753a202d5 grafana/grafana "/run.sh" 3 months ago Up 2 hours 0.0.0.0:3000->3000/tcp grafana-server
查到CONTAINER ID然後進入容器
# 進入容器
docker exec -it cef75 bash
# 安裝插件
grafana-cli plugins install yesoreyeram-boomtheme-panel
安裝完成後，需要重啓容器
docker container restart cef753a202d5
然後，我們的grafana上就有了這個插件
安裝很簡單，沒啥可說的
配置grafana
配置的話也很簡單，但是沒接觸過的小寶貝可能就比較懵逼，其實整個流程是這樣的，我們先創建一個dashboard，然在這個dashboard中新建一個面板，創建面板的時候，選擇剛裝的插件Boom Theme，然後配置此插件，配置完成後，點擊保存，保存完整個dashboard就會發生變化，然後我們拷貝此面板到任意其他的dashboard中，然後其他的dashboard主題也會相應的發生變化。
簡而言之就是：看下面的操作吧
創建一個dashboard並添加面板
選擇Boom Theme並進行配置
點擊添加新的主題
這裏我們看到有添加背景圖片的，還有添加CSS一些樣式的，文章開頭貼了一些圖片，是不是明白了，有美女背景的，有gif動圖的，也有類似於火焰的，其實就是設置的這裏，然後你可能會問了，背景圖片我知道哪裏弄，但是那些CSS的樣式我哪裏弄呢？
添加外部CSS地址
地址欄輸入：https://github.com/gilbN/theme.park/tree/master/CSS/themes/grafana
然後你就會看到有好幾個類型的CSS，對應的就是不同顏色的樣式，可以都配置下，看看什麼效果
我這裏都整理好了，直接配置成我這裏的地址就可以了
https://gilbn.github.io/theme.park/CSS/themes/grafana/hotline.css https://gilbn.github.io/theme.park/CSS/themes/grafana/aquamarine.css https://gilbn.github.io/theme.park/CSS/themes/grafana/organizr-dark.css https://gilbn.github.io/theme.park/CSS/themes/grafana/organizr-dashboard.css https://gilbn.github.io/theme.park/CSS/themes/grafana/plex.css https://gilbn.github.io/theme.park/CSS/themes/grafana/space-gray.css
如圖所示：
然後點擊apply，然後你就會看到整個dashboard發生了變化
也就是說只要應用了這個插件，整個dashboard就會變化，準確說是添加的這個面板
應用於其他的dashboard
雖然主題變了，但是得讓其他的dashboard炫酷纔行啊，所以把這個面板拷貝到其他dashboard中，這裏我隨便找一個應用下
複製
然後就變了。有點簡單。
雖然簡單，但是你以爲到這裏就完了嗎？還有點不完美，每次加載的時候速度有點慢，究其原因就是去github上獲取這個css，所以多少會有點慢，那麼接下來就做下優化
優化css加載速度
優化無非就是把這個css放到國內，放到國內原廠商的對象存儲裏，或者徹底一點，直接放到本地，我這裏都進行嘗試了，都可！下面說一下如何將這個css放到本地
下載css並配置grafana
先進入docker中創建存放css的目錄
docker exec -it --user root cef75 bash
注意： 這裏加了一個--user root，因爲不加這個進入容器後，創建目錄會權限拒絕，所以需要添加下，如果是虛機部署直接創建即可
# 進入到此目錄中
cd /usr/share/grafana/public
# 創建目錄
mkdir css
# 下載css
wget https://gilbn.github.io/theme.park/CSS/themes/grafana/hotline.css
這樣就行了，然後配置下grafana，其實就是改成本地的地址
注意後面的路徑就好了: /public/css/hotline.css
然後速度就刷刷的了，幾乎打開就能生效。