文章出处：https://medium.com/@maiccaejfeng/grafana-%E7%B3%BB%E5%88%97-5-%E7%BD%AE%E6%8F%9B-logo-%E5%BA%95%E5%9C%96-%E5%BA%95%E8%89%B2-%E9%A0%81%E7%B1%A4-title-macos-a6b952069248
客製化 Grafana 系統 style。
- 打開本機的 Grafana。打開 Terminal，輸入以下指令 ：
$ brew update
$ brew reinstall grafana
$ brew tap homebrew/services
$ brew services start grafana 或是 $ brew services restart grafana - 在瀏覽器輸入 http://localhost:3000/login 登入。預設帳密為 admin/admin。
1. 換掉「login 頁」的 logo 跟背景底圖
目標是先將上圖的 Grafana logo 換掉。
第 1 步：換 logo
此 login 頁的程式碼位於我 mac 電腦本機端的 /usr/local/Cellar/grafana/6.5.3/share/grafana/public/views/index.html。每次更改程式碼皆需重新 $ brew services restart grafana 才會生效。
把 /usr/local/Cellar/grafana/6.5.3/share/grafana/public/app/core/components/Login/LoginPage.tsx 中的
換成
無反應。
在 Visual Studio Code 打開 /usr/local/Cellar/grafana/6.5.3/share/grafana/，搜尋 public/img/grafana_icon.svg 後全部以 public/img/systex_logo.png 取代，即可：
把 /usr/local/Cellar/grafana/6.5.3/share/grafana/public/sass/pages/_login.scss 中的
換成
無反應。
在 Visual Studio Code 打開 /usr/local/Cellar/grafana/6.5.3/share/grafana/，搜尋 img/grafana_typelogo.svg 後全部以 img/systex_logo_cn.png 取代，即可：
第 2 步：換背景圖
在 Visual Studio Code 打開 /usr/local/Cellar/grafana/6.5.3/share/grafana/，搜尋 /img/heatmap_bg_test.svg 後全部以 /img/systex_login_bg.jpg 取代：
2. 換掉「全部頁面」的頁籤 logo 跟 title
第 1 步：換頁籤 title
將 /usr/local/Cellar/grafana/6.5.3/share/grafana/public/views/index.html 中的
換成
可得此效果：
在 Visual Studio Code 打開 /usr/local/Cellar/grafana/6.5.3/share/grafana/，搜尋 <title> 後，將 html 檔（error-template.html、error.html、index-template.html）的 title 內容改成「SYSTEX 日誌監控儀表板」。
在 /usr/local/Cellar/grafana/6.5.3/share/grafana/public/app/core/components/Page/Page.tsx 中，把
換成
沒有反應。
在 Visual Studio Code 打開 /usr/local/Cellar/grafana/6.5.3/share/grafana/，搜尋「- Grafana」後，將疑似目標 title 的改成「- SYSTEX 日誌監控儀表板」即可。
第 2 步：換頁籤 logo
把 /usr/local/Cellar/grafana/6.5.3/share/grafana/public/views/index.html 中的
換成
可成功換 logo：
在 Visual Studio Code 打開 /usr/local/Cellar/grafana/6.5.3/share/grafana/，搜尋 public/img/fav32.png 後全部以 public/img/systex_logo_x.png 取代即可。
3. 換掉「全部頁面」的 sidemenu logo
目標是換掉左側 sidemenu 最上方的 Grafana logo。
在 Visual Studio Code 打開 /usr/local/Cellar/grafana/6.5.3/share/grafana/，搜尋 public/img/systex_logo.png 後（因為在之前的步驟有換過一次了），找是 sidemenu__logo 的，以 public/img/systex_logo_x.png 取代即可。
4. 換掉「全部頁面」的 sidemenu 底色
目標是換掉左側 sidemenu 的底色。
在 Visual Studio Code 打開 /usr/local/Cellar/grafana/6.5.3/share/grafana/，搜尋 #1e2028，找是 .sidemenu 的 background: #1e2028 的，以 #2c6a9c 取代即可。
好！完成！！