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>
2021-08-08 07:47:29 +02:00 · 2021-08-08 07:47:29 +02:00 · 123fca43a1
parent d5b40dfebf
commit 123fca43a1
15 changed files with 319 additions and 90 deletions
--- a/server/model/monitor.js
+++ b/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")

--- 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;
+    }
+}
--- a/src/assets/vars.scss
+++ b/src/assets/vars.scss
@ -6,3 +6,9 @@ $border-radius: 50rem;

 $highlight: #7ce8a4;
 $highlight-white: #e7faec;
+
+$dark-font-color: #b1b8c0;
+$dark-font-color2: #020b05;
+$dark-bg: #0D1117;
+$dark-bg2: #070A10;
+$dark-border-color: #1d2634;
--- 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>
--- 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>
--- a/src/layouts/Layout.vue
+++ b/src/layouts/Layout.vue
@ -1,4 +1,5 @@
 <template>
+    <div :class="$root.theme">
        <div v-if="! $root.socket.connected && ! $root.socket.firstConnect" class="lost-connection">
            <div class="container-fluid">
                {{ $root.connectionErrorMsg }}
@ -27,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>
@ -71,6 +72,7 @@
                Settings
            </router-link>
        </nav>
+    </div>
 </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>
--- 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 {
--- 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...",
        }
    },

--- a/src/mixins/theme.js
+++ 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);
+        }
+    }
+}
+
--- 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>
--- 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 {
--- 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>
--- 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 {
+<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>
--- 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;
--- 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);
    }
 }