From 9ade9af1e29979e8f81b461eda13f86560939d6a Mon Sep 17 00:00:00 2001
From: Niyas <niyasmohammed64@gmail.com>
Date: Thu, 5 Aug 2021 21:41:11 +0530
Subject: [PATCH 01/10] Discord enhancements

---
 server/notification.js | 78 ++++++++++++++++++++++++++++++++++--------
 1 file changed, 64 insertions(+), 14 deletions(-)

diff --git a/server/notification.js b/server/notification.js
index f53b681a..06926b31 100644
--- a/server/notification.js
+++ b/server/notification.js
@@ -83,41 +83,91 @@ class Notification {
             return await Notification.smtp(notification, msg)
 
         } else if (notification.type === "discord") {
+            let kumaURL = notification.discorduptimekumaUrl || "https://github.com/louislam/uptime-kuma";
+            let dashboardURL = notification.discorduptimekumaUrl + '/dashboard/' + monitorJSON["id"];
             try {
                 // If heartbeatJSON is null, assume we're testing.
                 if (heartbeatJSON == null) {
-                    let data = {
-                        username: "Uptime-Kuma",
+                    let discordtestdata = {
+                        username: "Uptime Kuma",
                         content: msg,
                     }
-                    await axios.post(notification.discordWebhookUrl, data)
+                    await axios.post(notification.discordWebhookUrl, discordtestdata)
                     return okMsg;
                 }
                 // If heartbeatJSON is not null, we go into the normal alerting loop.
                 if (heartbeatJSON["status"] == 0) {
-                    var alertColor = "16711680";
-                } else if (heartbeatJSON["status"] == 1) {
-                    var alertColor = "65280";
-                }
-                let data = {
-                    username: "Uptime-Kuma",
+                    let discorddowndata = {
+                    username: "Uptime Kuma",
                     embeds: [{
-                        title: "Uptime-Kuma Alert",
-                        color: alertColor,
+                        title: "❌ One of your services went down. ❌",
+                        color: 16711680,
+                        timestamp: heartbeatJSON["time"],
                         fields: [
+                            {
+                                name: "Service Name",
+                                value: monitorJSON["name"],
+                            },
+                            {
+                                name: "Service URL",
+                                value: monitorJSON["url"],
+                            },
                             {
                                 name: "Time (UTC)",
                                 value: heartbeatJSON["time"],
                             },
                             {
-                                name: "Message",
-                                value: msg,
+                                name: "Error",
+                                value: heartbeatJSON["msg"],
+                            },
+                            {
+                                name: "Visit Service Dashboard",
+                                value: "[Visit Dashboard]("+ dashboardURL + ")",
+                            },
+                            {
+                                name: "Visit Uptime Kuma",
+                                value: "[Visit]("+ kumaURL +")",
                             },
                         ],
                     }],
                 }
-                await axios.post(notification.discordWebhookUrl, data)
+                await axios.post(notification.discordWebhookUrl, discorddowndata)
                 return okMsg;
+                    
+                } else if (heartbeatJSON["status"] == 1) {
+                    let discordupdata = {
+                    username: "Uptime Kuma",
+                    embeds: [{
+                        title: "✅ Your service " +  monitorJSON["name"] + " is up! ✅",
+                        color: 65280,
+                        timestamp: heartbeatJSON["time"],
+                        fields: [
+                            {
+                                name: "Service Name",
+                                value: monitorJSON["name"],
+                            },
+                            {
+                                name: "Service URL",
+                                value: "[Visit Service]("+ monitorJSON["url"] +")",
+                            },
+                            {
+                                name: "Time (UTC)",
+                                value: heartbeatJSON["time"],
+                            },
+                            {
+                                name: "Ping",
+                                value: heartbeatJSON["ping"] + "ms",
+                            },
+                            {
+                                name: "Visit Uptime Kuma",
+                                value: "[Visit]("+ kumaURL +")",
+                            },
+                        ],
+                    }],
+                }
+                await axios.post(notification.discordWebhookUrl, discordupdata)
+                return okMsg;
+                }
             } catch (error) {
                 throwGeneralAxiosError(error)
             }

From 908176c910e59740efa8238961d73bd3d12ef28f Mon Sep 17 00:00:00 2001
From: Niyas <niyasmohammed64@gmail.com>
Date: Thu, 5 Aug 2021 21:42:45 +0530
Subject: [PATCH 02/10] Discord enhancements

---
 src/components/NotificationDialog.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/NotificationDialog.vue b/src/components/NotificationDialog.vue
index 4eea85d6..3a80a929 100644
--- a/src/components/NotificationDialog.vue
+++ b/src/components/NotificationDialog.vue
@@ -143,6 +143,8 @@
                             <div class="mb-3">
                                 <label for="discord-webhook-url" class="form-label">Discord Webhook URL</label>
                                 <input id="discord-webhook-url" v-model="notification.discordWebhookUrl" type="text" class="form-control" required autocomplete="false">
+                                <label for="discord-uptime-kuma-url" class="form-label">Uptime Kuma URL</label>
+                                <input id="discord-uptime-kuma-url" v-model="notification.discorduptimekumaUrl" type="text" class="form-control" autocomplete="false">
                                 <div class="form-text">
                                     You can get this by going to Server Settings -> Integrations -> Create Webhook
                                 </div>

From 3a7414125a6af1eb24167f8a7eddee1dd7c926f7 Mon Sep 17 00:00:00 2001
From: Niyas <niyasmohammed64@gmail.com>
Date: Fri, 6 Aug 2021 17:37:22 +0530
Subject: [PATCH 03/10] Updated discord embeds

---
 server/notification.js | 14 --------------
 1 file changed, 14 deletions(-)

diff --git a/server/notification.js b/server/notification.js
index 06926b31..bf4bac54 100644
--- a/server/notification.js
+++ b/server/notification.js
@@ -83,8 +83,6 @@ class Notification {
             return await Notification.smtp(notification, msg)
 
         } else if (notification.type === "discord") {
-            let kumaURL = notification.discorduptimekumaUrl || "https://github.com/louislam/uptime-kuma";
-            let dashboardURL = notification.discorduptimekumaUrl + '/dashboard/' + monitorJSON["id"];
             try {
                 // If heartbeatJSON is null, assume we're testing.
                 if (heartbeatJSON == null) {
@@ -120,14 +118,6 @@ class Notification {
                                 name: "Error",
                                 value: heartbeatJSON["msg"],
                             },
-                            {
-                                name: "Visit Service Dashboard",
-                                value: "[Visit Dashboard]("+ dashboardURL + ")",
-                            },
-                            {
-                                name: "Visit Uptime Kuma",
-                                value: "[Visit]("+ kumaURL +")",
-                            },
                         ],
                     }],
                 }
@@ -158,10 +148,6 @@ class Notification {
                                 name: "Ping",
                                 value: heartbeatJSON["ping"] + "ms",
                             },
-                            {
-                                name: "Visit Uptime Kuma",
-                                value: "[Visit]("+ kumaURL +")",
-                            },
                         ],
                     }],
                 }

From 91fce75a9354038c8cc60e1f18c818df89619c7b Mon Sep 17 00:00:00 2001
From: Niyas <niyasmohammed64@gmail.com>
Date: Fri, 6 Aug 2021 17:38:16 +0530
Subject: [PATCH 04/10] Removed UptimeKuma url field

---
 src/components/NotificationDialog.vue | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/components/NotificationDialog.vue b/src/components/NotificationDialog.vue
index 3a80a929..4eea85d6 100644
--- a/src/components/NotificationDialog.vue
+++ b/src/components/NotificationDialog.vue
@@ -143,8 +143,6 @@
                             <div class="mb-3">
                                 <label for="discord-webhook-url" class="form-label">Discord Webhook URL</label>
                                 <input id="discord-webhook-url" v-model="notification.discordWebhookUrl" type="text" class="form-control" required autocomplete="false">
-                                <label for="discord-uptime-kuma-url" class="form-label">Uptime Kuma URL</label>
-                                <input id="discord-uptime-kuma-url" v-model="notification.discorduptimekumaUrl" type="text" class="form-control" autocomplete="false">
                                 <div class="form-text">
                                     You can get this by going to Server Settings -> Integrations -> Create Webhook
                                 </div>

From ebf207c2f513d7d12872efdb9994a5bb333b7f2c Mon Sep 17 00:00:00 2001
From: Niyas <niyasmohammed64@gmail.com>
Date: Sat, 7 Aug 2021 11:12:36 +0530
Subject: [PATCH 05/10] Custom embed username

---
 server/notification.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/server/notification.js b/server/notification.js
index bf4bac54..65cccfbf 100644
--- a/server/notification.js
+++ b/server/notification.js
@@ -87,7 +87,7 @@ class Notification {
                 // If heartbeatJSON is null, assume we're testing.
                 if (heartbeatJSON == null) {
                     let discordtestdata = {
-                        username: "Uptime Kuma",
+                        username: notification.discordUsername || "Uptime Kuma",
                         content: msg,
                     }
                     await axios.post(notification.discordWebhookUrl, discordtestdata)
@@ -96,7 +96,7 @@ class Notification {
                 // If heartbeatJSON is not null, we go into the normal alerting loop.
                 if (heartbeatJSON["status"] == 0) {
                     let discorddowndata = {
-                    username: "Uptime Kuma",
+                    username: notification.discordUsername || "Uptime Kuma",
                     embeds: [{
                         title: "❌ One of your services went down. ❌",
                         color: 16711680,
@@ -126,7 +126,7 @@ class Notification {
                     
                 } else if (heartbeatJSON["status"] == 1) {
                     let discordupdata = {
-                    username: "Uptime Kuma",
+                    username: notification.discordUsername || "Uptime Kuma",
                     embeds: [{
                         title: "✅ Your service " +  monitorJSON["name"] + " is up! ✅",
                         color: 65280,

From 4469b3a19b90e0d12b452363b1819a3fb0c65346 Mon Sep 17 00:00:00 2001
From: Niyas <niyasmohammed64@gmail.com>
Date: Sat, 7 Aug 2021 11:13:25 +0530
Subject: [PATCH 06/10] Added discord username field

---
 src/components/NotificationDialog.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/NotificationDialog.vue b/src/components/NotificationDialog.vue
index 4eea85d6..1260e024 100644
--- a/src/components/NotificationDialog.vue
+++ b/src/components/NotificationDialog.vue
@@ -143,6 +143,8 @@
                             <div class="mb-3">
                                 <label for="discord-webhook-url" class="form-label">Discord Webhook URL</label>
                                 <input id="discord-webhook-url" v-model="notification.discordWebhookUrl" type="text" class="form-control" required autocomplete="false">
+                                <label for="discord-username" class="form-label">Username</label>
+                                <input id="discord-username" v-model="notification.discordUsername" type="text" class="form-control" autocomplete="false">
                                 <div class="form-text">
                                     You can get this by going to Server Settings -> Integrations -> Create Webhook
                                 </div>

From 2677f5dd876f67a378137c6b7dad6afd4c3ee807 Mon Sep 17 00:00:00 2001
From: LouisLam <louislam@users.noreply.github.com>
Date: Sun, 8 Aug 2021 02:18:33 +0800
Subject: [PATCH 07/10] run eslint for discord enhancement

---
 server/notification.js | 112 ++++++++++++++++++++---------------------
 1 file changed, 56 insertions(+), 56 deletions(-)

diff --git a/server/notification.js b/server/notification.js
index 65cccfbf..c43983d7 100644
--- a/server/notification.js
+++ b/server/notification.js
@@ -96,63 +96,63 @@ class Notification {
                 // If heartbeatJSON is not null, we go into the normal alerting loop.
                 if (heartbeatJSON["status"] == 0) {
                     let discorddowndata = {
-                    username: notification.discordUsername || "Uptime Kuma",
-                    embeds: [{
-                        title: "❌ One of your services went down. ❌",
-                        color: 16711680,
-                        timestamp: heartbeatJSON["time"],
-                        fields: [
-                            {
-                                name: "Service Name",
-                                value: monitorJSON["name"],
-                            },
-                            {
-                                name: "Service URL",
-                                value: monitorJSON["url"],
-                            },
-                            {
-                                name: "Time (UTC)",
-                                value: heartbeatJSON["time"],
-                            },
-                            {
-                                name: "Error",
-                                value: heartbeatJSON["msg"],
-                            },
-                        ],
-                    }],
-                }
-                await axios.post(notification.discordWebhookUrl, discorddowndata)
-                return okMsg;
-                    
-                } else if (heartbeatJSON["status"] == 1) {
+                        username: notification.discordUsername || "Uptime Kuma",
+                        embeds: [{
+                            title: "❌ One of your services went down. ❌",
+                            color: 16711680,
+                            timestamp: heartbeatJSON["time"],
+                            fields: [
+                                {
+                                    name: "Service Name",
+                                    value: monitorJSON["name"],
+                                },
+                                {
+                                    name: "Service URL",
+                                    value: monitorJSON["url"],
+                                },
+                                {
+                                    name: "Time (UTC)",
+                                    value: heartbeatJSON["time"],
+                                },
+                                {
+                                    name: "Error",
+                                    value: heartbeatJSON["msg"],
+                                },
+                            ],
+                        }],
+                    }
+                    await axios.post(notification.discordWebhookUrl, discorddowndata)
+                    return okMsg;
+
+                } if (heartbeatJSON["status"] == 1) {
                     let discordupdata = {
-                    username: notification.discordUsername || "Uptime Kuma",
-                    embeds: [{
-                        title: "✅ Your service " +  monitorJSON["name"] + " is up! ✅",
-                        color: 65280,
-                        timestamp: heartbeatJSON["time"],
-                        fields: [
-                            {
-                                name: "Service Name",
-                                value: monitorJSON["name"],
-                            },
-                            {
-                                name: "Service URL",
-                                value: "[Visit Service]("+ monitorJSON["url"] +")",
-                            },
-                            {
-                                name: "Time (UTC)",
-                                value: heartbeatJSON["time"],
-                            },
-                            {
-                                name: "Ping",
-                                value: heartbeatJSON["ping"] + "ms",
-                            },
-                        ],
-                    }],
-                }
-                await axios.post(notification.discordWebhookUrl, discordupdata)
-                return okMsg;
+                        username: notification.discordUsername || "Uptime Kuma",
+                        embeds: [{
+                            title: "✅ Your service " + monitorJSON["name"] + " is up! ✅",
+                            color: 65280,
+                            timestamp: heartbeatJSON["time"],
+                            fields: [
+                                {
+                                    name: "Service Name",
+                                    value: monitorJSON["name"],
+                                },
+                                {
+                                    name: "Service URL",
+                                    value: "[Visit Service](" + monitorJSON["url"] + ")",
+                                },
+                                {
+                                    name: "Time (UTC)",
+                                    value: heartbeatJSON["time"],
+                                },
+                                {
+                                    name: "Ping",
+                                    value: heartbeatJSON["ping"] + "ms",
+                                },
+                            ],
+                        }],
+                    }
+                    await axios.post(notification.discordWebhookUrl, discordupdata)
+                    return okMsg;
                 }
             } catch (error) {
                 throwGeneralAxiosError(error)

From c990edc87ddd2060383442fa02ebae8e05e05fda Mon Sep 17 00:00:00 2001
From: LouisLam <louislam@users.noreply.github.com>
Date: Sun, 8 Aug 2021 02:34:51 +0800
Subject: [PATCH 08/10] allowElseIf for else return, since its auto fix removes
 "else" but without newline

---
 .eslintrc.js           | 3 ---
 server/notification.js | 2 +-
 2 files changed, 1 insertion(+), 4 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 41ad54b8..dcd4215c 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -62,9 +62,6 @@ module.exports = {
             exceptAfterSingleLine: true,
         }],
         "no-unneeded-ternary": "error",
-        "no-else-return": ["error", {
-            "allowElseIf": false,
-        }],
         "array-bracket-newline": ["error", "consistent"],
         "eol-last": ["error", "always"],
         //'prefer-template': 'error',
diff --git a/server/notification.js b/server/notification.js
index c43983d7..38cb80d9 100644
--- a/server/notification.js
+++ b/server/notification.js
@@ -124,7 +124,7 @@ class Notification {
                     await axios.post(notification.discordWebhookUrl, discorddowndata)
                     return okMsg;
 
-                } if (heartbeatJSON["status"] == 1) {
+                } else if (heartbeatJSON["status"] == 1) {
                     let discordupdata = {
                         username: notification.discordUsername || "Uptime Kuma",
                         embeds: [{

From d5b40dfebf9ed4427e480478344e35ee60b293b3 Mon Sep 17 00:00:00 2001
From: LouisLam <louislam@users.noreply.github.com>
Date: Sun, 8 Aug 2021 11:03:22 +0800
Subject: [PATCH 09/10] better code reuse and "Username" to "Bot Display Name"

---
 server/notification.js                |  8 +++++---
 src/components/NotificationDialog.vue | 14 ++++++++------
 src/main.js                           |  6 ++++++
 src/util.js                           |  3 ++-
 src/util.ts                           |  1 +
 5 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/server/notification.js b/server/notification.js
index 38cb80d9..05dae8ad 100644
--- a/server/notification.js
+++ b/server/notification.js
@@ -84,10 +84,12 @@ class Notification {
 
         } else if (notification.type === "discord") {
             try {
+                const discordDisplayName = notification.discordUsername || "Uptime Kuma";
+
                 // If heartbeatJSON is null, assume we're testing.
                 if (heartbeatJSON == null) {
                     let discordtestdata = {
-                        username: notification.discordUsername || "Uptime Kuma",
+                        username: discordDisplayName,
                         content: msg,
                     }
                     await axios.post(notification.discordWebhookUrl, discordtestdata)
@@ -96,7 +98,7 @@ class Notification {
                 // If heartbeatJSON is not null, we go into the normal alerting loop.
                 if (heartbeatJSON["status"] == 0) {
                     let discorddowndata = {
-                        username: notification.discordUsername || "Uptime Kuma",
+                        username: discordDisplayName,
                         embeds: [{
                             title: "❌ One of your services went down. ❌",
                             color: 16711680,
@@ -126,7 +128,7 @@ class Notification {
 
                 } else if (heartbeatJSON["status"] == 1) {
                     let discordupdata = {
-                        username: notification.discordUsername || "Uptime Kuma",
+                        username: discordDisplayName,
                         embeds: [{
                             title: "✅ Your service " + monitorJSON["name"] + " is up! ✅",
                             color: 65280,
diff --git a/src/components/NotificationDialog.vue b/src/components/NotificationDialog.vue
index 1260e024..e4adb528 100644
--- a/src/components/NotificationDialog.vue
+++ b/src/components/NotificationDialog.vue
@@ -143,8 +143,11 @@
                             <div class="mb-3">
                                 <label for="discord-webhook-url" class="form-label">Discord Webhook URL</label>
                                 <input id="discord-webhook-url" v-model="notification.discordWebhookUrl" type="text" class="form-control" required autocomplete="false">
-                                <label for="discord-username" class="form-label">Username</label>
-                                <input id="discord-username" v-model="notification.discordUsername" type="text" class="form-control" autocomplete="false">
+                            </div>
+
+                            <div class="mb-3">
+                                <label for="discord-username" class="form-label">Bot Display Name</label>
+                                <input id="discord-username" v-model="notification.discordUsername" type="text" class="form-control" autocomplete="false" :placeholder="$root.appName">
                                 <div class="form-text">
                                     You can get this by going to Server Settings -> Integrations -> Create Webhook
                                 </div>
@@ -235,17 +238,17 @@
                         <template v-if="notification.type === 'pushy'">
                             <div class="mb-3">
                                 <label for="pushy-app-token" class="form-label">API_KEY</label>
-                                <input type="text" class="form-control" id="pushy-app-token" required v-model="notification.pushyAPIKey">
+                                <input id="pushy-app-token" v-model="notification.pushyAPIKey" type="text" class="form-control" required>
                             </div>
 
                             <div class="mb-3">
                                 <label for="pushy-user-key" class="form-label">USER_TOKEN</label>
                                 <div class="input-group mb-3">
-                                    <input type="text" class="form-control" id="pushy-user-key" required v-model="notification.pushyToken">
+                                    <input id="pushy-user-key" v-model="notification.pushyToken" type="text" class="form-control" required>
                                 </div>
                             </div>
                             <p style="margin-top: 8px;">
-                                    More info on: <a href="https://pushy.me/docs/api/send-notifications" target="_blank">https://pushy.me/docs/api/send-notifications</a>
+                                More info on: <a href="https://pushy.me/docs/api/send-notifications" target="_blank">https://pushy.me/docs/api/send-notifications</a>
                             </p>
                         </template>
 
@@ -336,7 +339,6 @@
                                 </div>
                             </div>
                         </template>
-
                     </div>
                     <div class="modal-footer">
                         <button v-if="id" type="button" class="btn btn-danger" :disabled="processing" @click="deleteConfirm">
diff --git a/src/main.js b/src/main.js
index 6eb296dc..5b9ab944 100644
--- a/src/main.js
+++ b/src/main.js
@@ -15,6 +15,7 @@ import Details from "./pages/Details.vue";
 import EditMonitor from "./pages/EditMonitor.vue";
 import Settings from "./pages/Settings.vue";
 import Setup from "./pages/Setup.vue";
+import { appName } from "./util.ts";
 
 const routes = [
     {
@@ -77,6 +78,11 @@ const app = createApp({
     mixins: [
         socket,
     ],
+    data() {
+        return {
+            appName: appName
+        }
+    },
     render: () => h(App),
 })
 
diff --git a/src/util.js b/src/util.js
index 9b4c4dab..8e80cb61 100644
--- a/src/util.js
+++ b/src/util.js
@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.debug = exports.ucfirst = exports.sleep = exports.flipStatus = exports.PENDING = exports.UP = exports.DOWN = void 0;
+exports.debug = exports.ucfirst = exports.sleep = exports.flipStatus = exports.PENDING = exports.UP = exports.DOWN = exports.appName = void 0;
+exports.appName = "Uptime Kuma";
 exports.DOWN = 0;
 exports.UP = 1;
 exports.PENDING = 2;
diff --git a/src/util.ts b/src/util.ts
index 23446c83..4d532320 100644
--- a/src/util.ts
+++ b/src/util.ts
@@ -3,6 +3,7 @@
 // Frontend uses util.ts
 // Need to run "tsc" to compile if there are any changes.
 
+export const appName = "Uptime Kuma";
 export const DOWN = 0;
 export const UP = 1;
 export const PENDING = 2;

From 123fca43a1de8e7a06b0f1f9c6d1a987c2f5af0a Mon Sep 17 00:00:00 2001
From: Philipp Dormann <17651032+philippdormann@users.noreply.github.com>
Date: Sun, 8 Aug 2021 07:47:29 +0200
Subject: [PATCH 10/10] FEAT: darkmode (#155)

* darkmode fixes

* fix: darkmode: empty beats in active/ hovered state

* fix: color for empty beats

* fix: navbar background color

* Update src/assets/vars.scss

Co-authored-by: Adam Stachowicz <saibamenppl@gmail.com>

* Update src/assets/app.scss

Co-authored-by: Adam Stachowicz <saibamenppl@gmail.com>

* wip, split dark theme style by .dark and store light theme to normal

* add back missing css

* working switch theme button and tuning dark theme

* finish dark theme

Co-authored-by: Adam Stachowicz <saibamenppl@gmail.com>
Co-authored-by: LouisLam <louislam@users.noreply.github.com>
---
 server/model/monitor.js               |   4 +-
 src/assets/app.scss                   | 105 ++++++++++++++++-
 src/assets/vars.scss                  |   8 +-
 src/components/HeartbeatBar.vue       |  12 +-
 src/components/NotificationDialog.vue |  12 +-
 src/layouts/Layout.vue                | 161 ++++++++++++++------------
 src/main.js                           |   2 +
 src/mixins/socket.js                  |   2 +-
 src/mixins/theme.js                   |  39 +++++++
 src/pages/Dashboard.vue               |  16 ++-
 src/pages/DashboardHome.vue           |   2 +-
 src/pages/Details.vue                 |  12 +-
 src/pages/Settings.vue                |  30 ++++-
 src/util.js                           |   2 +-
 src/util.ts                           |   2 +-
 15 files changed, 319 insertions(+), 90 deletions(-)
 create mode 100644 src/mixins/theme.js

diff --git a/server/model/monitor.js b/server/model/monitor.js
index 49fcfb30..ae738a6b 100644
--- a/server/model/monitor.js
+++ b/server/model/monitor.js
@@ -122,7 +122,9 @@ class Monitor extends BeanModel {
                         try {
                             await this.updateTlsInfo(checkCertificate(res));
                         } catch (e) {
-                            console.error(e.message)
+                            if (e.message !== "No TLS certificate in response") {
+                                console.error(e.message)
+                            }
                         }
                     }
 
diff --git a/src/assets/app.scss b/src/assets/app.scss
index cb72fb9d..0c32f2b8 100644
--- a/src/assets/app.scss
+++ b/src/assets/app.scss
@@ -5,6 +5,26 @@
     font-family: ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,segoe ui,Roboto,helvetica neue,Arial,noto sans,sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol,noto color emoji;
 }
 
+.modal {
+    backdrop-filter: blur(3px);
+}
+
+.modal-content {
+    border-radius: 1rem;
+    box-shadow: 0 15px 70px rgba(0, 0, 0, .1);
+
+    .dark & {
+        box-shadow: 0 15px 70px rgb(0 0 0);
+        background-color: $dark-bg;
+    }
+}
+
+.VuePagination__count {
+    font-size: 13px;
+    text-align: center;
+}
+
+
 .shadow-box {
     overflow: hidden;
     box-shadow: 0 15px 70px rgba(0, 0, 0, .1);
@@ -29,10 +49,87 @@
         background-color: $highlight;
         border-color: $highlight;
     }
+
+    .dark & {
+        color: $dark-font-color2;
+    }
 }
 
-.modal-content {
-    border-radius: 1rem;
-    backdrop-filter: blur(3px);
-}
 
+
+// Dark Theme override here
+.dark {
+    background-color: #090C10;
+    color: $dark-font-color;
+
+    .shadow-box {
+        background-color: $dark-bg;
+    }
+
+    .form-check-input {
+        background-color: $dark-bg2;
+    }
+
+    .form-switch .form-check-input {
+        background-color: #131a21;
+    }
+
+    a,
+    .table,
+    .nav-link {
+        color: $dark-font-color;
+    }
+
+    .form-control,
+    .form-control:focus,
+    .form-select,
+    .form-select:focus {
+        color: $dark-font-color;
+        background-color: $dark-bg2;
+    }
+
+    .form-control, .form-select {
+        border-color: $dark-border-color;
+    }
+
+    .table-hover > tbody > tr:hover {
+        --bs-table-accent-bg: #070A10;
+        color: $dark-font-color;
+    }
+
+    .nav-pills .nav-link.active, .nav-pills .show > .nav-link {
+        color: $dark-font-color2;
+    }
+
+    .bg-primary {
+        color: $dark-font-color2;
+    }
+
+    .btn-secondary {
+        color: white;
+    }
+
+    .btn-close {
+        opacity: 1;
+    }
+
+    .modal-header {
+        border-color: $dark-bg;
+    }
+
+    .modal-footer {
+        border-color: $dark-bg;
+    }
+
+    // Pagination
+    .page-item.disabled .page-link {
+        background-color: $dark-bg;
+        border-color: $dark-border-color;
+    }
+
+    .page-link {
+        background-color: $dark-bg;
+        border-color: $dark-border-color;
+        color: $dark-font-color;
+    }
+}
diff --git a/src/assets/vars.scss b/src/assets/vars.scss
index ebec378a..6d331370 100644
--- a/src/assets/vars.scss
+++ b/src/assets/vars.scss
@@ -5,4 +5,10 @@ $link-color: #111;
 $border-radius: 50rem;
 
 $highlight: #7ce8a4;
-$highlight-white: #e7faec;
\ No newline at end of file
+$highlight-white: #e7faec;
+
+$dark-font-color: #b1b8c0;
+$dark-font-color2: #020b05;
+$dark-bg: #0D1117;
+$dark-bg2: #070A10;
+$dark-border-color: #1d2634;
diff --git a/src/components/HeartbeatBar.vue b/src/components/HeartbeatBar.vue
index eed132d1..ddd1617c 100644
--- a/src/components/HeartbeatBar.vue
+++ b/src/components/HeartbeatBar.vue
@@ -133,7 +133,7 @@ export default {
 }
 </script>
 
-<style scoped lang="scss">
+<style lang="scss" scoped>
 @import "../assets/vars.scss";
 
 .wrap {
@@ -150,6 +150,10 @@ export default {
 
         &.empty {
             background-color: aliceblue;
+
+            .dark & {
+                background-color: #d0d3d5;
+            }
         }
 
         &.down {
@@ -168,4 +172,10 @@ export default {
     }
 }
 
+.dark {
+    .hp-bar-big .beat.empty{
+        background-color: #848484;
+    }
+}
+
 </style>
diff --git a/src/components/NotificationDialog.vue b/src/components/NotificationDialog.vue
index e4adb528..b6862458 100644
--- a/src/components/NotificationDialog.vue
+++ b/src/components/NotificationDialog.vue
@@ -325,7 +325,7 @@
                                 <p>
                                     Status:
                                     <span v-if="appriseInstalled" class="text-primary">Apprise is installed</span>
-                                    <span v-else class="text-danger">Apprise is not installed. <a href="https://github.com/caronc/apprise">Read more</a></span>
+                                    <span v-else class="text-danger">Apprise is not installed. <a href="https://github.com/caronc/apprise" target="_blank">Read more</a></span>
                                 </p>
                             </div>
                         </template>
@@ -512,3 +512,13 @@ export default {
     },
 }
 </script>
+
+<style lang="scss" scoped>
+@import "../assets/vars.scss";
+
+.dark {
+    .modal-dialog .form-text, .modal-dialog p {
+        color: $dark-font-color;
+    }
+}
+</style>
diff --git a/src/layouts/Layout.vue b/src/layouts/Layout.vue
index 4405ebb7..9607483e 100644
--- a/src/layouts/Layout.vue
+++ b/src/layouts/Layout.vue
@@ -1,76 +1,78 @@
 <template>
-    <div v-if="! $root.socket.connected && ! $root.socket.firstConnect" class="lost-connection">
-        <div class="container-fluid">
-            {{ $root.connectionErrorMsg }}
+    <div :class="$root.theme">
+        <div v-if="! $root.socket.connected && ! $root.socket.firstConnect" class="lost-connection">
+            <div class="container-fluid">
+                {{ $root.connectionErrorMsg }}
+            </div>
         </div>
+
+        <!-- Desktop header -->
+        <header v-if="! $root.isMobile" class="d-flex flex-wrap justify-content-center py-3 mb-3 border-bottom">
+            <router-link to="/dashboard" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-dark text-decoration-none">
+                <object class="bi me-2 ms-4" width="40" height="40" data="/icon.svg" alt="Logo" />
+                <span class="fs-4 title">Uptime Kuma</span>
+            </router-link>
+
+            <ul class="nav nav-pills">
+                <li class="nav-item">
+                    <router-link to="/dashboard" class="nav-link">
+                        <font-awesome-icon icon="tachometer-alt" /> Dashboard
+                    </router-link>
+                </li>
+                <li class="nav-item">
+                    <router-link to="/settings" class="nav-link">
+                        <font-awesome-icon icon="cog" /> Settings
+                    </router-link>
+                </li>
+            </ul>
+        </header>
+
+        <!-- Mobile header -->
+        <header v-else class="d-flex flex-wrap justify-content-center pt-2 pb-2 mb-3">
+            <router-link to="/dashboard" class="d-flex align-items-center text-dark text-decoration-none">
+                <object class="bi" width="40" height="40" data="/icon.svg" />
+                <span class="fs-4 title ms-2">Uptime Kuma</span>
+            </router-link>
+        </header>
+
+        <main>
+            <!-- Add :key to disable vue router re-use the same component -->
+            <router-view v-if="$root.loggedIn" :key="$route.fullPath" />
+            <Login v-if="! $root.loggedIn && $root.allowLoginDialog" />
+        </main>
+
+        <footer>
+            <div class="container-fluid">
+                Uptime Kuma -
+                Version: {{ $root.info.version }} -
+                <a href="https://github.com/louislam/uptime-kuma/releases" target="_blank" rel="noopener">Check Update On GitHub</a>
+            </div>
+        </footer>
+
+        <!-- Mobile Only -->
+        <div v-if="$root.isMobile" style="width: 100%;height: 60px;" />
+        <nav v-if="$root.isMobile" class="bottom-nav">
+            <router-link to="/dashboard" class="nav-link" @click="$root.cancelActiveList">
+                <div><font-awesome-icon icon="tachometer-alt" /></div>
+                Dashboard
+            </router-link>
+
+            <a href="#" :class=" { 'router-link-exact-active' : $root.showListMobile } " @click="$root.showListMobile = ! $root.showListMobile">
+                <div><font-awesome-icon icon="list" /></div>
+                List
+            </a>
+
+            <router-link to="/add" class="nav-link" @click="$root.cancelActiveList">
+                <div><font-awesome-icon icon="plus" /></div>
+                Add
+            </router-link>
+
+            <router-link to="/settings" class="nav-link" @click="$root.cancelActiveList">
+                <div><font-awesome-icon icon="cog" /></div>
+                Settings
+            </router-link>
+        </nav>
     </div>
-
-    <!-- Desktop header -->
-    <header v-if="! $root.isMobile" class="d-flex flex-wrap justify-content-center py-3 mb-3 border-bottom">
-        <router-link to="/dashboard" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-dark text-decoration-none">
-            <object class="bi me-2 ms-4" width="40" height="40" data="/icon.svg" alt="Logo" />
-            <span class="fs-4 title">Uptime Kuma</span>
-        </router-link>
-
-        <ul class="nav nav-pills">
-            <li class="nav-item">
-                <router-link to="/dashboard" class="nav-link">
-                    <font-awesome-icon icon="tachometer-alt" /> Dashboard
-                </router-link>
-            </li>
-            <li class="nav-item">
-                <router-link to="/settings" class="nav-link">
-                    <font-awesome-icon icon="cog" /> Settings
-                </router-link>
-            </li>
-        </ul>
-    </header>
-
-    <!-- Mobile header -->
-    <header v-else class="d-flex flex-wrap justify-content-center mt-3 mb-3">
-        <router-link to="/dashboard" class="d-flex align-items-center  text-dark text-decoration-none">
-            <object class="bi" width="40" height="40" data="/icon.svg" />
-            <span class="fs-4 title ms-2">Uptime Kuma</span>
-        </router-link>
-    </header>
-
-    <main>
-        <!-- Add :key to disable vue router re-use the same component -->
-        <router-view v-if="$root.loggedIn" :key="$route.fullPath" />
-        <Login v-if="! $root.loggedIn && $root.allowLoginDialog" />
-    </main>
-
-    <footer>
-        <div class="container-fluid">
-            Uptime Kuma -
-            Version: {{ $root.info.version }} -
-            <a href="https://github.com/louislam/uptime-kuma/releases" target="_blank" rel="noopener">Check Update On GitHub</a>
-        </div>
-    </footer>
-
-    <!-- Mobile Only -->
-    <div v-if="$root.isMobile" style="width: 100%;height: 60px;" />
-    <nav v-if="$root.isMobile" class="bottom-nav">
-        <router-link to="/dashboard" class="nav-link" @click="$root.cancelActiveList">
-            <div><font-awesome-icon icon="tachometer-alt" /></div>
-            Dashboard
-        </router-link>
-
-        <a href="#" :class=" { 'router-link-exact-active' : $root.showListMobile } " @click="$root.showListMobile = ! $root.showListMobile">
-            <div><font-awesome-icon icon="list" /></div>
-            List
-        </a>
-
-        <router-link to="/add" class="nav-link" @click="$root.cancelActiveList">
-            <div><font-awesome-icon icon="plus" /></div>
-            Add
-        </router-link>
-
-        <router-link to="/settings" class="nav-link" @click="$root.cancelActiveList">
-            <div><font-awesome-icon icon="cog" /></div>
-            Settings
-        </router-link>
-    </nav>
 </template>
 
 <script>
@@ -103,7 +105,7 @@ export default {
 }
 </script>
 
-<style scoped lang="scss">
+<style lang="scss" scoped>
 @import "../assets/vars.scss";
 
 .bottom-nav {
@@ -159,9 +161,24 @@ footer {
     color: #AAA;
     font-size: 13px;
     margin-top: 10px;
-    margin-bottom: 30px;
+    padding-bottom: 30px;
     margin-left: 10px;
     text-align: center;
 }
 
+.dark {
+    header {
+        background-color: #161B22;
+        border-bottom-color: #161B22 !important;
+
+        span {
+            color: #F0F6FC;
+        }
+    }
+
+    .bottom-nav {
+        background-color: $dark-bg;
+    }
+}
+
 </style>
diff --git a/src/main.js b/src/main.js
index 5b9ab944..6ef72034 100644
--- a/src/main.js
+++ b/src/main.js
@@ -9,6 +9,7 @@ import { FontAwesomeIcon } from "./icon.js";
 import EmptyLayout from "./layouts/EmptyLayout.vue";
 import Layout from "./layouts/Layout.vue";
 import socket from "./mixins/socket";
+import theme from "./mixins/theme";
 import Dashboard from "./pages/Dashboard.vue";
 import DashboardHome from "./pages/DashboardHome.vue";
 import Details from "./pages/Details.vue";
@@ -77,6 +78,7 @@ const router = createRouter({
 const app = createApp({
     mixins: [
         socket,
+        theme
     ],
     data() {
         return {
diff --git a/src/mixins/socket.js b/src/mixins/socket.js
index 59abd27c..46449ade 100644
--- a/src/mixins/socket.js
+++ b/src/mixins/socket.js
@@ -29,7 +29,7 @@ export default {
             notificationList: [],
             windowWidth: window.innerWidth,
             showListMobile: false,
-            connectionErrorMsg: "Cannot connect to the socket server. Reconnecting..."
+            connectionErrorMsg: "Cannot connect to the socket server. Reconnecting...",
         }
     },
 
diff --git a/src/mixins/theme.js b/src/mixins/theme.js
new file mode 100644
index 00000000..673a8caa
--- /dev/null
+++ b/src/mixins/theme.js
@@ -0,0 +1,39 @@
+export default {
+
+    data() {
+        return {
+            system: (window.matchMedia("(prefers-color-scheme: dark)")) ? "dark" : "light",
+            userTheme: localStorage.theme,
+        };
+    },
+
+    mounted() {
+        // Default Light
+        if (! this.userTheme) {
+            this.userTheme = "light";
+        }
+
+        document.body.classList.add(this.theme);
+    },
+
+    computed: {
+        theme() {
+            if (this.userTheme === "auto") {
+                return this.system;
+            }
+            return this.userTheme;
+        }
+    },
+
+    watch: {
+        userTheme(to, from) {
+            localStorage.theme = to;
+        },
+
+        theme(to, from) {
+            document.body.classList.remove(from);
+            document.body.classList.add(this.theme);
+        }
+    }
+}
+
diff --git a/src/pages/Dashboard.vue b/src/pages/Dashboard.vue
index 60b7ca46..bbb60a26 100644
--- a/src/pages/Dashboard.vue
+++ b/src/pages/Dashboard.vue
@@ -89,7 +89,7 @@ export default {
 }
 </script>
 
-<style scoped lang="scss">
+<style lang="scss" scoped>
 @import "../assets/vars.scss";
 
 .container-fluid {
@@ -133,4 +133,18 @@ export default {
     padding-right: 5px !important;
 }
 
+.dark {
+    .list {
+        .item {
+            &:hover {
+                background-color: $dark-bg2;
+            }
+
+            &.active {
+                background-color: $dark-bg2;
+            }
+        }
+    }
+}
+
 </style>
diff --git a/src/pages/DashboardHome.vue b/src/pages/DashboardHome.vue
index 1fd4f602..969652f3 100644
--- a/src/pages/DashboardHome.vue
+++ b/src/pages/DashboardHome.vue
@@ -169,7 +169,7 @@ export default {
 }
 </script>
 
-<style scoped lang="scss">
+<style lang="scss" scoped>
 @import "../assets/vars";
 
 .num {
diff --git a/src/pages/Details.vue b/src/pages/Details.vue
index 551e6cd5..d1167298 100644
--- a/src/pages/Details.vue
+++ b/src/pages/Details.vue
@@ -6,7 +6,7 @@
         <span v-if="monitor.type === 'ping'">Ping: {{ monitor.hostname }}</span>
         <span v-if="monitor.type === 'keyword'">
             <br>
-            <span>Keyword:</span> <span style="color: black">{{ monitor.keyword }}</span>
+            <span>Keyword:</span> <span class="keyword">{{ monitor.keyword }}</span>
         </span>
     </p>
 
@@ -352,4 +352,14 @@ table {
         margin: 20px 0;
     }
 }
+
+.keyword {
+    color: black;
+}
+
+.dark  {
+    .keyword {
+        color: $dark-font-color;
+    }
+}
 </style>
diff --git a/src/pages/Settings.vue b/src/pages/Settings.vue
index 5eaab88b..72f2d6a0 100644
--- a/src/pages/Settings.vue
+++ b/src/pages/Settings.vue
@@ -20,6 +20,19 @@
                         </select>
                     </div>
 
+                    <div class="mb-3">
+                        <div class="btn-group" role="group" aria-label="Basic checkbox toggle button group">
+                            <input id="btncheck1" v-model="$root.userTheme" type="radio" class="btn-check" name="theme" autocomplete="off" value="light">
+                            <label class="btn btn-outline-primary" for="btncheck1">Light</label>
+
+                            <input id="btncheck2" v-model="$root.userTheme" type="radio" class="btn-check" name="theme" autocomplete="off" value="dark">
+                            <label class="btn btn-outline-primary" for="btncheck2">Dark</label>
+
+                            <input id="btncheck3" v-model="$root.userTheme" type="radio" class="btn-check" name="theme" autocomplete="off" value="auto">
+                            <label class="btn btn-outline-primary" for="btncheck3">Auto</label>
+                        </div>
+                    </div>
+
                     <div>
                         <button class="btn btn-primary" type="submit">
                             Save
@@ -67,7 +80,7 @@
                 </template>
             </div>
 
-            <div class="col-md-6">
+            <div class="notification-list col-md-6">
                 <div v-if="$root.isMobile" class="mt-3" />
 
                 <h2>Notifications</h2>
@@ -201,8 +214,17 @@ export default {
 }
 </script>
 
-<style scoped>
-    .shadow-box {
-        padding: 20px;
+<style lang="scss" scoped>
+@import "../assets/vars.scss";
+
+.shadow-box {
+    padding: 20px;
+}
+
+.dark {
+    .list-group-item {
+        background-color: $dark-bg2;
+        color: $dark-font-color;
     }
+}
 </style>
diff --git a/src/util.js b/src/util.js
index 8e80cb61..44630993 100644
--- a/src/util.js
+++ b/src/util.js
@@ -29,7 +29,7 @@ function ucfirst(str) {
 exports.ucfirst = ucfirst;
 function debug(msg) {
     if (process.env.NODE_ENV === "development") {
-        console.log(msg);
+        console.debug(msg);
     }
 }
 exports.debug = debug;
diff --git a/src/util.ts b/src/util.ts
index 4d532320..1ed6d4c6 100644
--- a/src/util.ts
+++ b/src/util.ts
@@ -39,6 +39,6 @@ export function ucfirst(str) {
 
 export function debug(msg) {
     if (process.env.NODE_ENV === "development") {
-        console.log(msg)
+        console.debug(msg);
     }
 }