finish dark theme

server/model/monitor.js

@@ -122,9 +122,11 @@ class Monitor extends BeanModel {
                         try {
                             await this.updateTlsInfo(checkCertificate(res));
                         } catch (e) {
+                            if (e.message !== "No TLS certificate in response") {
                                 console.error(e.message)
                             }
                         }
+                    }
 
                     debug("Cert Info Query Time: " + (dayjs().valueOf() - certInfoStartTime) + "ms")
 

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,12 +49,13 @@
         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 {
@@ -42,54 +63,73 @@
     color: $dark-font-color;
 
     .shadow-box {
-        background-color: #0D1117;
+        background-color: $dark-bg;
     }
 
-    a:hover {
+    .form-check-input {
-        color: #7ce8a4;
+        background-color: $dark-bg2;
     }
 
-    .btn-primary {
+    .form-switch .form-check-input {
-        color: #0a0a0a;
+        background-color: #131a21;
-
-        &:hover, &:active, &:focus, &.active {
-            color: #0a0a0a;
-            background-color: $highlight;
-            border-color: $highlight;
-        }
     }
 
-    html,
-    body,
-    input,
-    .modal-content {
-        background: var(--page-background);
-        color: var(--main-font-color);
-    }
     a,
     .table,
     .nav-link {
-        color: var(--main-font-color);
+        color: $dark-font-color;
-    }
-    .nav-pills .nav-link.active,
-    .nav-pills .show > .nav-link {
-        color: #0a0a0a;
-    }
-
-    .nav-link:hover,
-    .nav-link:focus {
-        color: #5cdd8b;
     }
 
     .form-control,
     .form-control:focus,
     .form-select,
     .form-select:focus {
-        color: var(--main-font-color);
+        color: $dark-font-color;
-        background-color: var(--background-4);
+        background-color: $dark-bg2;
     }
 
-    .form-control {
+    .form-control, .form-select {
-        border-color: #21262D;
+        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;
     }
 }

src/assets/vars.scss

@@ -7,15 +7,8 @@ $border-radius: 50rem;
 $highlight: #7ce8a4;
 $highlight-white: #e7faec;
 
-
 $dark-font-color: #b1b8c0;
-
+$dark-font-color2: #020b05;
-.dark {
+$dark-bg: #0D1117;
-    --page-background: #0a0a0a;
+$dark-bg2: #070A10;
-    --background-secondary: #656565;
+$dark-border-color: #1d2634;
-    --background-4: #070A10;
-    --background-ternary: #a7a7a7;
-    --background-sidebar-active: #777777;
-    --background-navbar: #333333;
-    --main-font-color: $dark-font-color;
-}

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>
@@ -514,18 +514,11 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import "../assets/vars.scss";
+
 .dark {
-    .modal-dialog .form-text, .modal-dialog p{
+    .modal-dialog .form-text, .modal-dialog p {
-        color: var(--main-font-color);
+        color: $dark-font-color;
-    }
-
-    .modal-content{
-        border: 1px solid var(--main-font-color);
-    }
-
-    .btn-close{
-        background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FFF'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
-        opacity: 1;
     }
 }
 </style>

src/layouts/Layout.vue

@@ -28,7 +28,7 @@
         </header>
 
         <!-- Mobile header -->
-        <header v-else class="d-flex flex-wrap justify-content-center mt-3 mb-3">
+        <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>
@@ -161,7 +161,7 @@ footer {
     color: #AAA;
     font-size: 13px;
     margin-top: 10px;
-    margin-bottom: 30px;
+    padding-bottom: 30px;
     margin-left: 10px;
     text-align: center;
 }
@@ -177,7 +177,7 @@ footer {
     }
 
     .bottom-nav {
-        background-color: var(--background-navbar);
+        background-color: $dark-bg;
     }
 }
 

src/mixins/theme.js

@@ -12,6 +12,8 @@ export default {
         if (! this.userTheme) {
             this.userTheme = "light";
         }
+
+        document.body.classList.add(this.theme);
     },
 
     computed: {
@@ -26,6 +28,11 @@ export default {
     watch: {
         userTheme(to, from) {
             localStorage.theme = to;
+        },
+
+        theme(to, from) {
+            document.body.classList.remove(from);
+            document.body.classList.add(this.theme);
         }
     }
 }

src/pages/Dashboard.vue

@@ -137,11 +137,11 @@ export default {
     .list {
         .item {
             &:hover {
-                background-color: var(--background-4);
+                background-color: $dark-bg2;
             }
 
             &.active {
-                background-color: var(--background-4);
+                background-color: $dark-bg2;
             }
         }
     }

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>

src/pages/Settings.vue

@@ -80,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>
@@ -215,14 +215,16 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-    .shadow-box {
+@import "../assets/vars.scss";
-        padding: 20px;
-    }
 
-    .dark {
+.shadow-box {
+    padding: 20px;
+}
+
+.dark {
     .list-group-item {
-            background-color: var(--background-4);
+        background-color: $dark-bg2;
-            color: var(--main-font-color);
+        color: $dark-font-color;
-        }
     }
+}
 </style>

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;

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);
     }
 }