---
disqus: ahb0222
GA : G-VF9ZT413CG
---
# 修改遠端水質監測器Node-Red dashboard(儀錶板)背景與外觀
> [color=#40f1ef][name=LHB阿好伯, 2021/11/20][:earth_africa:](https://www.facebook.com/LHB0222/)
###### tags: `Node-RED`
[TOC]
適用Node-RED Dashboard 2.0
:::spoiler
```
<script>
if (!window.nrdbStylesLoaded) {
window.nrdbStylesLoaded = true;
// 建立樣式容器
var customStyles = document.createElement('style');
customStyles.id = 'nrdb-custom-styles';
document.head.appendChild(customStyles);
// 建立時鐘容器
var clockContainer = document.createElement("div");
clockContainer.id = "nrdb-custom-clock";
clockContainer.style.position = "fixed";
clockContainer.style.top = "12px";
clockContainer.style.right = "16px";
clockContainer.style.zIndex = "9999";
document.body.appendChild(clockContainer);
// 啟動時鐘
startClock();
// 預設主題（淺色）
applyTheme("light");
console.log("Dashboard 2.0 自訂主題已載入 (支援 light/dark 切換 + 時鐘 + 背景圖)");
}
// 定義兩種主題
function getThemeCSS(theme) {
if (theme === "dark") {
return `
/* ===========================
Node-RED Dashboard Dark 主題
=========================== */
body, .v-application {
background: url("https://picsum.photos/1920/1080?grayscale") no-repeat center center fixed !important;
background-size: cover !important;
color: #e2e8f0 !important;
}
.v-app-bar, .v-toolbar {
background: rgba(30, 41, 59, 0.9) !important;
border-bottom: 1px solid #334155 !important;
box-shadow: none !important;
}
.v-toolbar-title, .v-app-bar-title {
color: #e2e8f0 !important;
font-weight: 600 !important;
}
.v-card {
background: rgba(30, 41, 59, 0.9) !important;
border-radius: 12px !important;
border: 1px solid #334155 !important;
box-shadow: 0 2px 8px rgba(0,0,0,0.5) !important;
}
.v-card-title {
background: rgba(15, 23, 42, 0.9) !important;
color: #e2e8f0 !important;
font-weight: 600 !important;
border-bottom: 1px solid #334155 !important;
}
.v-btn {
background: linear-gradient(45deg, #38bdf8, #0ea5e9) !important;
color: #ffffff !important;
border-radius: 18px !important;
min-height: 36px !important;
}
.v-btn:hover {
background: linear-gradient(45deg, #0284c7, #38bdf8) !important;
}
.v-navigation-drawer {
background: rgba(15, 23, 42, 0.9) !important;
border-right: 1px solid #334155 !important;
}
.v-list-item {
color: #e2e8f0 !important;
border-radius: 8px !important;
}
.v-list-item:hover {
background: rgba(30, 41, 59, 0.8) !important;
}
.v-list-item--active {
background: #0ea5e9 !important;
color: #ffffff !important;
}
.nrdb-ui-gauge-title {
color: #e2e8f0 !important;
}
.nrdb-ui-gauge-value span {
color: #38bdf8 !important;
font-weight: 700 !important;
}
#nrdb-custom-clock {
background: rgba(30, 41, 59, 0.85);
color: #e2e8f0;
padding: 6px 12px;
border-radius: 12px;
font-size: 13px;
font-family: monospace;
}
.v-text-field {
background: rgba(30, 41, 59, 0.9) !important;
border: 1px solid #334155 !important;
border-radius: 8px !important;
color: #e2e8f0 !important;
}
`;
} else {
return `
/* ===========================
Node-RED Dashboard Light 主題
=========================== */
body, .v-application {
background: url("https://picsum.photos/1920/1080") no-repeat center center fixed !important;
background-size: cover !important;
color: #495057 !important;
}
.v-app-bar, .v-toolbar {
background: rgba(255, 255, 255, 0.9) !important;
border-bottom: 1px solid #e0e0e0 !important;
box-shadow: 0 2px 6px rgba(0,0,0,0.08) !important;
}
.v-toolbar-title, .v-app-bar-title {
color: #1e3a5f !important;
font-weight: 600 !important;
}
.v-card {
background: rgba(255, 255, 255, 0.9) !important;
border-radius: 12px !important;
border: 1px solid #dee2e6 !important;
box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
}
.v-card-title {
background: rgba(241, 243, 245, 0.9) !important;
color: #1e3a5f !important;
font-weight: 600 !important;
border-bottom: 1px solid #dee2e6 !important;
}
.v-btn {
background: linear-gradient(45deg, #00b4d8, #48cae4) !important;
color: white !important;
border-radius: 18px !important;
min-height: 36px !important;
}
.v-btn:hover {
background: linear-gradient(45deg, #0096c7, #38bdf8) !important;
}
.v-navigation-drawer {
background: rgba(255, 255, 255, 0.9) !important;
border-right: 1px solid #e0e0e0 !important;
}
.v-list-item {
border-radius: 8px !important;
margin: 2px 6px !important;
}
.v-list-item:hover {
background: rgba(241, 243, 245, 0.8) !important;
}
.v-list-item--active {
background: #e3f2fd !important;
color: #0288d1 !important;
}
.nrdb-ui-gauge-title {
color: #495057 !important;
}
.nrdb-ui-gauge-value span {
color: #0288d1 !important;
font-weight: 700 !important;
}
#nrdb-custom-clock {
background: rgba(241, 243, 245, 0.85);
color: #495057;
padding: 6px 12px;
border-radius: 12px;
font-size: 13px;
font-family: monospace;
}
.v-text-field {
background: rgba(255, 255, 255, 0.9) !important;
border: 1px solid #dee2e6 !important;
border-radius: 8px !important;
}
`;
}
}
// 套用主題
function applyTheme(theme) {
var styleTag = document.getElementById("nrdb-custom-styles");
if (styleTag) {
styleTag.innerHTML = getThemeCSS(theme);
console.log("已套用主題:", theme);
}
}
// 啟動時鐘
function startClock() {
function updateClock() {
var now = new Date();
var timeStr = now.toLocaleTimeString("zh-TW", { hour12: false });
var dateStr = now.toLocaleDateString("zh-TW", { weekday: "short", year: "numeric", month: "2-digit", day: "2-digit" });
document.getElementById("nrdb-custom-clock").innerText = timeStr + " | " + dateStr;
}
updateClock();
setInterval(updateClock, 1000);
}
// 監聽 Node-RED 訊息
(function(scope) {
if (scope && scope.$watch) {
scope.$watch('msg', function(msg) {
if (msg && msg.topic === "theme" && msg.payload) {
applyTheme(msg.payload);
}
});
}
})(scope);
</script>
```
:::
之前分享過一版[LilyGo T-Call SIM 連接 MQTT & Node-Red & Telegram 製作遠端pH監測器(ESP32 SIM800L)_分享](/FlpNFLrxSpSbFl_CLTch-A)
最近完成新的一版遠端水質連續偵測器
上面除了原本的pH計這次還新增了TDS電極
使用Node-Red收集數據後當然就是製作儀表板
之前曾看到益師傅分享過才知道原來儀表板也可以在做美化
利用了一些時間找到下面的資料
>參考網頁
>[Changing background of any widget](https://discourse.nodered.org/t/changing-background-of-any-widget/30005)[name=kvramji]
>[Customize dashboard CSS](https://discourse.nodered.org/t/customize-dashboard-css/23139)[name=hotNipi]
>[View and change CSS](https://developer.chrome.com/docs/devtools/css/)[name=Kayce Basques]
研究一下最後製作出下面的成果
還有一些地方需要加強但這也是我第一次接觸CSS
能做到這樣也很滿足了XD
# 修改方法
匯入 [Changing background of any widget](https://discourse.nodered.org/t/changing-background-of-any-widget/30005)文章中網友分享的節點
:::spoiler
```json=
[{"id":"ec59b076.d8389","type":"ui_template","z":"6af0f382.7eae1c","group":"d7d53078.9580c","name":"Tab Stylesheet","order":1,"width":0,"height":0,"format":"<style>\n\n:root {\n --color-green-primary: rgb(51, 204, 51);\n --color-green-secondary: rgb(26, 101, 26);\n --color-red-primary: rgb(255, 0, 0);\n --color-red-secondary: rgba(153,0,0,1);\n --color-gray-primary:rgba(40,40,40,1);\n --color-gray-secondary:rgba(65,65,65,1);\n --color-text-primary: rgb(230, 226, 209);\n --color-widget-border: rgb(84, 78, 78);\n}\n\nbody {\n background-image: url(https://images.hdqwalls.com/wallpapers/raspberry-pi-logo-h0.jpg);\n background-repeat: no-repeat;\n background-size: cover;\n}\n\n#Control_Panel_System {\n background: transparent;\n border: transparent; \n}\n\nbody.nr-dashboard-theme md-content md-card {\n background-color: #33333300;\n color: #ffffff;\n text-shadow: 4px 2px 4px #00000045;\n box-shadow: 0 -1px 5px 1px #00000045;\n border-radius: 12px;\n border: 1px solid var(--color-widget-border);\n}\n\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":220,"y":80,"wires":[[]]},{"id":"d7d53078.9580c","type":"ui_group","z":"","name":"System","tab":"b0c27d05.c92f7","order":1,"disp":true,"width":30,"collapse":false},{"id":"b0c27d05.c92f7","type":"ui_tab","z":"","name":"Control Panel","icon":"fa-cogs","order":1,"disabled":false,"hidden":false}]
```
:::
就可以得到相關背景樣式的修改
如果想修改成自己的照片只需要修改第15行的網址即可
# 增加時間顯示
https://discourse.nodered.org/t/example-flow-of-three-clocks-in-title-bar-could-use-some-cleanup/44241
🌟全文可以至下方連結觀看或是補充
全文分享至
https://www.facebook.com/LHB0222/
https://www.instagram.com/ahb0222/
有疑問想討論的都歡迎於下方留言
喜歡的幫我分享給所有的朋友 \o/
有所錯誤歡迎指教
# [:page_with_curl: 全部文章列表](https://hackmd.io/@LHB-0222/AllWritings)
Sign in with Wallet
Connect another wallet