From 50e56453da3d781c9a7a8333fa561e3731566fd6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jan=20Z=C3=ADpek?= Date: Thu, 25 Aug 2022 09:52:12 +0200 Subject: [PATCH] Dark mode addded --- client/src/assets/style.css | 85 ++++++++++++++----- .../dashboard/components/BoxGraphContent.tsx | 23 ++++- 2 files changed, 87 insertions(+), 21 deletions(-) diff --git a/client/src/assets/style.css b/client/src/assets/style.css index cdd43aa..e0f42d3 100644 --- a/client/src/assets/style.css +++ b/client/src/assets/style.css @@ -1,3 +1,44 @@ +:root { + --main-bg-color: #eee; + --main-fg-color: #000; + --button-bg-color: #3988FF; + --button-fg-color: #fff; + --button-hover-bg-color: #0F6FFF; + --button-hover-fg-color: #fff; + --button-cancel-bg-color: transparent; + --button-cancel-fg-color: #000; + --button-remove-bg-color: transparent; + --button-remove-fg-color: #f00; + --header-bg-color: #fff; + --header-spacer-color: #ddd; + --header-shadow: linear-gradient(0deg, rgba(255,255,255,0) 5%, rgba(190,190,190,0.6) 100%); + --box-bg-color: #fff; + --box-fg-color: #111; + --box-loader-bg-color: rgba(128, 128, 128, 0.3); + --box-loader-fg-color: #fff; + --box-action-fg-color: #666; + --box-preview-bg-color: #3988FF; + --box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.1); + --modal-overlay-bg-color: rgba(0,0,0,0.2); + --graph-axis-fg-color: #777; + --graph-grid-color: rgb(238, 238, 238); +} + +@media (prefers-color-scheme: dark) { + :root { + --main-bg-color: #222; + --main-fg-color: #b8b8b8; + --header-bg-color: #000; + --header-spacer-color: #333; + --header-shadow: none; + --box-bg-color: #111; + --box-fg-color: #eee; + --box-shadow: none; + --graph-axis-fg-color: #666; + --graph-grid-color: rgb(25, 25, 25); + } +} + body, html { padding: 0; margin: 0; @@ -6,7 +47,8 @@ body, html { } body { - background: #eee; + background: var(--main-bg-color); + color: var(--main-fg-color); font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } @@ -15,8 +57,8 @@ button, input, select { } button { - background: #3988FF; - color: #fff; + background: var(--button-bg-color); + color: var(--button-fg-color); cursor: pointer; border: none; padding: 0.25rem 1rem; @@ -26,7 +68,8 @@ button { } button:hover { - background-color: #0F6FFF; + background-color: var(--button-hover-bg-color); + color: var(--button-hover-fg-color); } input, select { @@ -66,8 +109,9 @@ input, select { } .box { - box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.1); - background-color: #fff; + box-shadow: var(--box-shadow); + background-color: var(--box-bg-color); + color: var(--box-fg-color); border-radius: 0.5rem; } @@ -81,7 +125,7 @@ input, select { display: none; justify-content: center; align-items: flex-start; - background-color: rgba(0,0,0,0.2); + background-color: var(--modal-overlay-bg-color); z-index: 5; } @@ -90,9 +134,10 @@ input, select { } .settings-modal .inner { - background: #fff; + background-color: var(--box-bg-color); + color: var(--box-fg-color); margin-top: 5%; - box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.1); + box-shadow: var(--box-shadow); border-radius: 0.5rem; width: 20rem; } @@ -108,8 +153,8 @@ input, select { .settings-modal .actions .remove { margin-right: auto; - background-color: transparent; - color: #ff0000; + background-color: var(--button-remove-bg-color); + color: var(--button-remove-fg-color); } form { @@ -133,8 +178,8 @@ form .actions button { } form .actions button.cancel { - background-color: transparent; - color: #000; + background-color: var(--button-cancel-bg-color); + color: var(--button-cancel-fg-color); } form.horizontal { @@ -158,12 +203,12 @@ form.horizontal .input label { align-items: center; justify-content: flex-end; padding: 0.5rem 0.5rem; - background-color: #fff; + background-color: var(--header-bg-color); } .dashboard-head .shadow { position: absolute; - background: linear-gradient(0deg, rgba(255,255,255,0) 5%, rgba(190,190,190,0.6) 100%); + background: var(--header-shadow); width: 100%; height: 8px; z-index: 1; @@ -172,7 +217,7 @@ form.horizontal .input label { .dashboard-head .spacer { margin: 0 1rem; width: 1px; - background: #ddd; + background: var(--header-spacer-color); height: 20px; } @@ -230,8 +275,8 @@ form.horizontal .input label { right: 0; top: 0; bottom: 0; - background-color: rgba(128, 128, 128, 0.3); - color: #fff; + background-color: var(--box-loader-bg-color); + color: var(--box-loader-fg-color); font-size: 300%; z-index: 2; } @@ -311,7 +356,7 @@ form.horizontal .input label { margin-left: 0.25rem; font-size: 110%; cursor: pointer; - color: #666; + color: var(--box-action-fg-color); } .grid-sensors .grid-box .box .body { @@ -329,7 +374,7 @@ form.horizontal .input label { .grid-sensors .box-preview { position: absolute; - background-color: #3988FF; + background-color: var(--box-preview-bg-color); opacity: 0.5; transition: all 0.2s; z-index: 1; diff --git a/client/src/pages/dashboard/components/BoxGraphContent.tsx b/client/src/pages/dashboard/components/BoxGraphContent.tsx index 1fe8432..7449356 100644 --- a/client/src/pages/dashboard/components/BoxGraphContent.tsx +++ b/client/src/pages/dashboard/components/BoxGraphContent.tsx @@ -36,6 +36,18 @@ export const BoxGraphContent = ({ box, data, refreshRef }: Props) => { useEffect(() => { if (bodyRef.current && values.data) { + const bgColor = getComputedStyle( + document.documentElement + ).getPropertyValue('--box-bg-color') + + const axisFgColor = getComputedStyle( + document.documentElement + ).getPropertyValue('--graph-axis-fg-color') + + const gridColor = getComputedStyle( + document.documentElement + ).getPropertyValue('--graph-grid-color') + // TODO: These should be probably returned by server, could be outdated const from = filter.customFrom const to = filter.customTo @@ -79,7 +91,14 @@ export const BoxGraphContent = ({ box, data, refreshRef }: Props) => { }, ], { - xaxis: { range: [from, to], type: 'date' }, + plot_bgcolor: bgColor, + paper_bgcolor: bgColor, + xaxis: { + range: [from, to], + type: 'date', + tickfont: { color: axisFgColor }, + gridcolor: gridColor, + }, yaxis: { ...(customRange && { range: [ @@ -88,6 +107,8 @@ export const BoxGraphContent = ({ box, data, refreshRef }: Props) => { ], }), ...(data.unit && { ticksuffix: ` ${data.unit}` }), + tickfont: { color: axisFgColor }, + gridcolor: gridColor, }, margin: { l: 70,