From 43d338000713d72d57edccd8a9543dbfac808095 Mon Sep 17 00:00:00 2001 From: LouisLam Date: Sun, 8 Aug 2021 13:45:43 +0800 Subject: [PATCH] finish dark theme --- server/model/monitor.js | 4 +- src/assets/app.scss | 112 +++++++++++++++++--------- src/assets/vars.scss | 15 +--- src/components/NotificationDialog.vue | 17 ++-- src/layouts/Layout.vue | 6 +- src/mixins/theme.js | 7 ++ src/pages/Dashboard.vue | 4 +- src/pages/Details.vue | 12 ++- src/pages/Settings.vue | 20 ++--- src/util.js | 2 +- src/util.ts | 2 +- 11 files changed, 124 insertions(+), 77 deletions(-) diff --git a/server/model/monitor.js b/server/model/monitor.js index 49fcfb303..ae738a6bb 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 142963565..0c32f2b8c 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,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 { - color: #7ce8a4; + .form-check-input { + background-color: $dark-bg2; } - .btn-primary { - color: #0a0a0a; - - &:hover, &:active, &:focus, &.active { - color: #0a0a0a; - background-color: $highlight; - border-color: $highlight; - } + .form-switch .form-check-input { + background-color: #131a21; } - html, - body, - input, - .modal-content { - background: var(--page-background); - color: var(--main-font-color); - } a, .table, .nav-link { - color: var(--main-font-color); - } - .nav-pills .nav-link.active, - .nav-pills .show > .nav-link { - color: #0a0a0a; - } - - .nav-link:hover, - .nav-link:focus { - color: #5cdd8b; + color: $dark-font-color; } .form-control, .form-control:focus, .form-select, .form-select:focus { - color: var(--main-font-color); - background-color: var(--background-4); + color: $dark-font-color; + background-color: $dark-bg2; } - .form-control { - border-color: #21262D; + .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 cc04cb498..6d331370b 100644 --- a/src/assets/vars.scss +++ b/src/assets/vars.scss @@ -7,15 +7,8 @@ $border-radius: 50rem; $highlight: #7ce8a4; $highlight-white: #e7faec; - $dark-font-color: #b1b8c0; - -.dark { - --page-background: #0a0a0a; - --background-secondary: #656565; - --background-4: #070A10; - --background-ternary: #a7a7a7; - --background-sidebar-active: #777777; - --background-navbar: #333333; - --main-font-color: $dark-font-color; -} +$dark-font-color2: #020b05; +$dark-bg: #0D1117; +$dark-bg2: #070A10; +$dark-border-color: #1d2634; diff --git a/src/components/NotificationDialog.vue b/src/components/NotificationDialog.vue index 4790ff9a0..b6862458c 100644 --- a/src/components/NotificationDialog.vue +++ b/src/components/NotificationDialog.vue @@ -325,7 +325,7 @@

Status: Apprise is installed - Apprise is not installed. Read more + Apprise is not installed. Read more

@@ -514,18 +514,11 @@ export default { diff --git a/src/layouts/Layout.vue b/src/layouts/Layout.vue index 8446bb75e..9607483eb 100644 --- a/src/layouts/Layout.vue +++ b/src/layouts/Layout.vue @@ -28,7 +28,7 @@ -
+
Uptime Kuma @@ -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; } } diff --git a/src/mixins/theme.js b/src/mixins/theme.js index 38ce3cace..673a8caa6 100644 --- a/src/mixins/theme.js +++ b/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); } } } diff --git a/src/pages/Dashboard.vue b/src/pages/Dashboard.vue index 1597d6c30..bbb60a265 100644 --- a/src/pages/Dashboard.vue +++ b/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; } } } diff --git a/src/pages/Details.vue b/src/pages/Details.vue index 551e6cd5b..d11672983 100644 --- a/src/pages/Details.vue +++ b/src/pages/Details.vue @@ -6,7 +6,7 @@ Ping: {{ monitor.hostname }}
- Keyword: {{ monitor.keyword }} + Keyword: {{ monitor.keyword }}

@@ -352,4 +352,14 @@ table { margin: 20px 0; } } + +.keyword { + color: black; +} + +.dark { + .keyword { + color: $dark-font-color; + } +} diff --git a/src/pages/Settings.vue b/src/pages/Settings.vue index a58453f08..72f2d6a0e 100644 --- a/src/pages/Settings.vue +++ b/src/pages/Settings.vue @@ -80,7 +80,7 @@ -
+

Notifications

@@ -215,14 +215,16 @@ export default { diff --git a/src/util.js b/src/util.js index 8e80cb61a..44630993a 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 4d5323208..1ed6d4c64 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); } }