From 673d3c124ce09caddd2820fa04ed1603cbb838b7 Mon Sep 17 00:00:00 2001 From: Philipp Dormann Date: Mon, 12 Jul 2021 00:26:33 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=A7=20WIP=20on=20darkmode=20?= =?UTF-8?q?=F0=9F=8C=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/app.scss | 36 +++++++++++++++++++++++++-------- src/assets/vars.scss | 24 +++++++++++++++++++--- src/components/HeartbeatBar.vue | 2 +- src/components/Status.vue | 11 ++++++---- src/components/Uptime.vue | 4 +++- src/layouts/Layout.vue | 6 +++--- src/pages/Dashboard.vue | 8 +++++--- src/pages/DashboardHome.vue | 2 +- 8 files changed, 69 insertions(+), 24 deletions(-) diff --git a/src/assets/app.scss b/src/assets/app.scss index cb72fb9dd..dfdae79c5 100644 --- a/src/assets/app.scss +++ b/src/assets/app.scss @@ -1,16 +1,33 @@ @import "vars.scss"; @import "node_modules/bootstrap/scss/bootstrap"; +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; +} + #app { - 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; + 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; } .shadow-box { overflow: hidden; - box-shadow: 0 15px 70px rgba(0, 0, 0, .1); + box-shadow: 0 15px 70px rgba(0, 0, 0, 0.1); padding: 10px; - border-radius: 10px; - &.big-padding { padding: 20px; } @@ -22,10 +39,14 @@ } .btn-primary { - color: white; + // color: white; + color: #0a0a0a; - &:hover, &:active, &:focus, &.active { - color: white; + &:hover, + &:active, + &:focus, + &.active { + color: #0a0a0a; background-color: $highlight; border-color: $highlight; } @@ -35,4 +56,3 @@ border-radius: 1rem; backdrop-filter: blur(3px); } - diff --git a/src/assets/vars.scss b/src/assets/vars.scss index 31b0262d8..85f430700 100644 --- a/src/assets/vars.scss +++ b/src/assets/vars.scss @@ -1,7 +1,25 @@ -$primary: #5CDD8B; -$danger: #DC3545; +$primary: #5cdd8b; +$danger: #dc3545; $link-color: #111; -$border-radius: 50rem; +$border-radius: .25rem; $highlight: #7ce8a4; $highlight-white: #e7faec; + +:root { + --page-background: #fafafa; + --background-secondary: #d0d3d5; + --background-4: #d0d3d5; + --background-ternary: #d0d3d5; + --main-font-color: #212529; +} + +@media (prefers-color-scheme: dark) { + :root { + --page-background: #0a0a0a; + --background-secondary: #656565; + --background-4: #313131; + --background-ternary: #a7a7a7; + --main-font-color: #e4e4e4; + } +} \ No newline at end of file diff --git a/src/components/HeartbeatBar.vue b/src/components/HeartbeatBar.vue index 48ffd2926..9e063fb29 100644 --- a/src/components/HeartbeatBar.vue +++ b/src/components/HeartbeatBar.vue @@ -159,7 +159,7 @@ export default { border-radius: 50rem; &.empty { - background-color: aliceblue; + background-color: var(--background-ternary); } &.down { diff --git a/src/components/Status.vue b/src/components/Status.vue index c5fec2241..274c0a154 100644 --- a/src/components/Status.vue +++ b/src/components/Status.vue @@ -1,5 +1,5 @@ diff --git a/src/components/Uptime.vue b/src/components/Uptime.vue index ad8114fcb..0c3e90e7e 100644 --- a/src/components/Uptime.vue +++ b/src/components/Uptime.vue @@ -57,5 +57,7 @@ export default { diff --git a/src/layouts/Layout.vue b/src/layouts/Layout.vue index ef116f4c1..8731eb07c 100644 --- a/src/layouts/Layout.vue +++ b/src/layouts/Layout.vue @@ -8,7 +8,7 @@
- + Uptime Kuma @@ -21,7 +21,7 @@
- + Uptime Kuma @@ -87,7 +87,7 @@ export default { height: 60px; width: 100%; left: 0; - background-color: #fff; + background-color: var(--background-secondary); box-shadow: 0 15px 47px 0 rgba(0, 0, 0, 0.05), 0 5px 14px 0 rgba(0, 0, 0, 0.05); text-align: center; white-space: nowrap; diff --git a/src/pages/Dashboard.vue b/src/pages/Dashboard.vue index c42f27656..e8ad30fbb 100644 --- a/src/pages/Dashboard.vue +++ b/src/pages/Dashboard.vue @@ -115,7 +115,7 @@ export default { display: block; text-decoration: none; padding: 15px 15px 12px 15px; - border-radius: 10px; + border-radius: .25rem; transition: all ease-in-out 0.15s; &.disabled { @@ -129,17 +129,19 @@ export default { } &:hover { - background-color: $highlight-white; + color: var(--main-font-color); + background-color: var(--background-4); } &.active { - background-color: #cdf8f4; + background-color: var(--background-secondary); } } } .badge { min-width: 58px; + color: #0a0a0a; } .small-padding { diff --git a/src/pages/DashboardHome.vue b/src/pages/DashboardHome.vue index 820842bac..cdf7cb59d 100644 --- a/src/pages/DashboardHome.vue +++ b/src/pages/DashboardHome.vue @@ -137,7 +137,7 @@ export default { @import "../assets/vars"; .num { - font-size: 30px; + font-size: 1rem; color: $primary; font-weight: bold; display: block;