From a3aba01adcbb4a3e2801a9bbdd45e79b38b5b94b Mon Sep 17 00:00:00 2001 From: Michael Geers Date: Mon, 1 Aug 2022 10:15:27 +0200 Subject: [PATCH] Add manual dark/light switch (#3901) * Add manual dark/light switch * Improve color theme labels --- assets/css/app.css | 26 +++-- assets/js/app.js | 9 +- .../components/Energyflow/Visualization.vue | 7 +- assets/js/components/Logo.vue | 6 +- assets/js/components/Phases.vue | 7 +- assets/js/components/TopNavigation.vue | 16 +++ assets/js/i18n/de.js | 5 + assets/js/i18n/en.js | 5 + assets/js/theme.js | 57 +++++++++ ...{index.36f32821.css => index.78e2f4a8.css} | 2 +- dist/assets/index.aadc69fd.js | 109 ++++++++++++++++++ dist/assets/index.f9e9d211.js | 109 ------------------ dist/index.html | 4 +- 13 files changed, 219 insertions(+), 143 deletions(-) create mode 100644 assets/js/theme.js rename dist/assets/{index.36f32821.css => index.78e2f4a8.css} (92%) create mode 100644 dist/assets/index.aadc69fd.js delete mode 100644 dist/assets/index.f9e9d211.js diff --git a/assets/css/app.css b/assets/css/app.css index dab49a44a..c5225334f 100644 --- a/assets/css/app.css +++ b/assets/css/app.css @@ -60,18 +60,16 @@ "Segoe UI Symbol", "Noto Color Emoji"; } -@media (--dark-mode) { - :root { - --evcc-grid: var(--bs-gray-medium); - --evcc-background: var(--bs-gray-deep); - --evcc-box: var(--bs-gray-dark); - --evcc-default-text: var(--bs-white); - --evcc-gray: var(--bs-gray-light); - --evcc-accent1: var(--evcc-yellow); - --evcc-accent2: var(--evcc-dark-green); - --evcc-accent3: var(--evcc-darker-green); - --bs-primary: var(--evcc-dark-green); - } +:root.dark { + --evcc-grid: var(--bs-gray-medium); + --evcc-background: var(--bs-gray-deep); + --evcc-box: var(--bs-gray-dark); + --evcc-default-text: var(--bs-white); + --evcc-gray: var(--bs-gray-light); + --evcc-accent1: var(--evcc-yellow); + --evcc-accent2: var(--evcc-dark-green); + --evcc-accent3: var(--evcc-darker-green); + --bs-primary: var(--evcc-dark-green); } html { @@ -80,6 +78,10 @@ html { overflow-x: hidden; } +html.no-transitions * { + transition-duration: 0ms !important; +} + body { background-color: var(--evcc-background); color: var(--evcc-default-text); diff --git a/assets/js/app.js b/assets/js/app.js index 2aa49e64d..4e8c9da24 100644 --- a/assets/js/app.js +++ b/assets/js/app.js @@ -10,6 +10,7 @@ import VueNumber from "vue-number-animation"; import router from "./router"; import i18n from "./i18n"; import featureflags from "./featureflags"; +import { watchThemeChanges } from "./theme"; smoothscroll.polyfill(); @@ -76,10 +77,4 @@ window.setInterval(function () { api.get("health").then(window.app.setOnline).catch(window.app.setOffline); }, 5000); -const isDarkMode = window.matchMedia("(prefers-color-scheme: dark)"); -isDarkMode.addEventListener("change", updateThemeColor); -function updateThemeColor() { - const $el = document.querySelector("meta[name=theme-color]"); - $el.setAttribute("content", isDarkMode.matches ? "#020318" : "#f3f3f7"); -} -updateThemeColor(); +watchThemeChanges(); diff --git a/assets/js/components/Energyflow/Visualization.vue b/assets/js/components/Energyflow/Visualization.vue index 15dec63aa..5a0f26341 100644 --- a/assets/js/components/Energyflow/Visualization.vue +++ b/assets/js/components/Energyflow/Visualization.vue @@ -217,11 +217,10 @@ export default { background-color: var(--evcc-grid); color: var(--bs-white); } -@media (--dark-mode) { - .grid-import { - color: var(--bs-dark); - } +html.dark .grid-import { + color: var(--bs-dark); } + .self-consumption { background-color: var(--evcc-self); color: var(--bs-dark); diff --git a/assets/js/components/Logo.vue b/assets/js/components/Logo.vue index 45fa880ad..ae03ea24d 100644 --- a/assets/js/components/Logo.vue +++ b/assets/js/components/Logo.vue @@ -31,9 +31,7 @@ export default { .letter { fill: #18191a; } -@media (--dark-mode) { - .letter { - fill: var(--bs-white); - } +html.dark .letter { + fill: var(--bs-white); } diff --git a/assets/js/components/Phases.vue b/assets/js/components/Phases.vue index c41b42906..d656106d6 100644 --- a/assets/js/components/Phases.vue +++ b/assets/js/components/Phases.vue @@ -53,11 +53,10 @@ export default { border-radius: 1px; overflow: hidden; } -@media (--dark-mode) { - .phase { - background-color: var(--bs-gray-bright); - } +html.dark .phase { + background-color: var(--bs-gray-bright); } + .phase.inactive { display: none; } diff --git a/assets/js/components/TopNavigation.vue b/assets/js/components/TopNavigation.vue index 54704b4a1..efb52d7cf 100644 --- a/assets/js/components/TopNavigation.vue +++ b/assets/js/components/TopNavigation.vue @@ -38,6 +38,11 @@ {{ $t("header.about") }} +
  • + +