From 95741c7fa2f7bc88942d3c7e6406bdb64e421558 Mon Sep 17 00:00:00 2001
From: Thomas Basler <thomas@familie-basler.net>
Date: Mon, 6 Mar 2023 19:42:37 +0100
Subject: [PATCH] webapp: Implement dark theme

---
 webapp/package.json                     |   2 +-
 webapp/src/components/NavBar.vue        |  17 ++--
 webapp/src/components/ThemeSwitcher.vue | 106 ++++++++++++++++++++++++
 webapp/src/locales/de.json              |   5 ++
 webapp/src/locales/en.json              |   5 ++
 webapp/src/locales/fr.json              |   5 ++
 webapp/yarn.lock                        |   8 +-
 7 files changed, 137 insertions(+), 11 deletions(-)
 create mode 100644 webapp/src/components/ThemeSwitcher.vue

diff --git a/webapp/package.json b/webapp/package.json
index f09ffa31..c8009ab8 100644
--- a/webapp/package.json
+++ b/webapp/package.json
@@ -12,7 +12,7 @@
   },
   "dependencies": {
     "@popperjs/core": "^2.11.6",
-    "bootstrap": "^5.2.3",
+    "bootstrap": "^5.3.0-alpha1",
     "bootstrap-icons-vue": "^1.8.1",
     "mitt": "^3.0.0",
     "spark-md5": "^3.0.2",
diff --git a/webapp/src/components/NavBar.vue b/webapp/src/components/NavBar.vue
index e8285301..79328fd7 100644
--- a/webapp/src/components/NavBar.vue
+++ b/webapp/src/components/NavBar.vue
@@ -1,5 +1,5 @@
 <template>
-    <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
+    <nav class="navbar navbar-expand-md fixed-top bg-body-tertiary" data-bs-theme="dark">
         <div class="container-fluid">
             <router-link @click="onClick" class="navbar-brand" to="/">
                 <span v-if="isXmas" class="text-success">
@@ -95,11 +95,14 @@
                         <router-link @click="onClick" class="nav-link" to="/about">{{ $t('menu.About') }}</router-link>
                     </li>
                 </ul>
-                <form class="d-flex" role="search">
-                    <LocaleSwitcher class="me-2" />
-                    <button v-if="isLogged" class="btn btn-outline-danger" @click="signout">{{ $t('menu.Logout') }}</button>
-                    <button v-if="!isLogged" class="btn btn-outline-success" @click="signin">{{ $t('menu.Login') }}</button>
-                </form>
+                <ul class="navbar-nav flex-row flex-wrap ms-md-auto">
+                    <ThemeSwitcher class="me-2" />
+                    <form class="d-flex" role="search">
+                        <LocaleSwitcher class="me-2" />
+                        <button v-if="isLogged" class="btn btn-outline-danger" @click="signout">{{ $t('menu.Logout') }}</button>
+                        <button v-if="!isLogged" class="btn btn-outline-success" @click="signin">{{ $t('menu.Login') }}</button>
+                    </form>
+                </ul>
             </div>
         </div>
     </nav>
@@ -110,6 +113,7 @@ import { isLoggedIn, logout } from '@/utils/authentication';
 import { BIconEgg, BIconSun, BIconTree } from 'bootstrap-icons-vue';
 import { defineComponent } from 'vue';
 import LocaleSwitcher from './LocaleSwitcher.vue';
+import ThemeSwitcher from './ThemeSwitcher.vue';
 
 export default defineComponent({
     components: {
@@ -117,6 +121,7 @@ export default defineComponent({
         BIconSun,
         BIconTree,
         LocaleSwitcher,
+        ThemeSwitcher,
     },
     data() {
         return {
diff --git a/webapp/src/components/ThemeSwitcher.vue b/webapp/src/components/ThemeSwitcher.vue
new file mode 100644
index 00000000..2da88434
--- /dev/null
+++ b/webapp/src/components/ThemeSwitcher.vue
@@ -0,0 +1,106 @@
+<template>
+    <li class="nav-item dropdown">
+        <button class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle d-flex align-items-center" id="bd-theme"
+            type="button" aria-expanded="false" data-bs-toggle="dropdown" data-bs-display="static"
+            aria-label="Toggle theme (auto)">
+            <BIconCircleHalf class="bi my-1 theme-icon-active" />
+        </button>
+        <ul class="dropdown-menu dropdown-menu-end">
+            <li>
+                <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="light"
+                    aria-pressed="false">
+                    <BIconSunFill class="bi me-2 opacity-50 theme-icon" />
+                    {{ $t('localeswitcher.Light') }}
+                </button>
+            </li>
+            <li>
+                <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dark"
+                    aria-pressed="false">
+                    <BIconMoonStarsFill class="bi me-2 opacity-50 theme-icon" />
+                    {{ $t('localeswitcher.Dark') }}
+                </button>
+            </li>
+            <li>
+                <button type="button" class="dropdown-item d-flex align-items-center active" data-bs-theme-value="auto"
+                    aria-pressed="true">
+                    <BIconCircleHalf class="bi me-2 opacity-50 theme-icon" />
+                    {{ $t('localeswitcher.Auto') }}
+                </button>
+            </li>
+        </ul>
+    </li>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import {
+    BIconCircleHalf,
+    BIconSunFill,
+    BIconMoonStarsFill,
+} from 'bootstrap-icons-vue';
+
+export default defineComponent({
+    name: "ThemeSwitcher",
+    components: {
+        BIconCircleHalf,
+        BIconSunFill,
+        BIconMoonStarsFill,
+    },
+    data() {
+        return {
+            storedTheme: 'auto',
+        };
+    },
+    methods: {
+        getPreferredTheme() {
+            if (this.storedTheme) {
+                return this.storedTheme;
+            }
+            return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+        },
+        setTheme(theme: string) {
+            if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+                document.documentElement.setAttribute('data-bs-theme', 'dark');
+            } else {
+                document.documentElement.setAttribute('data-bs-theme', theme);
+            }
+        },
+        showActiveTheme(theme: string) {
+            const activeThemeIcon = document.querySelector('.theme-icon-active');
+            const btnToActive = document.querySelector(`[data-bs-theme-value="${theme}"]`);
+            const svgOfActiveBtn = btnToActive?.querySelector('.theme-icon');
+
+            document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
+                element.classList.remove('active');
+            })
+
+            btnToActive?.classList.add('active');
+
+            if (svgOfActiveBtn) {
+                activeThemeIcon?.replaceChildren('*', svgOfActiveBtn?.cloneNode(true));
+            }
+        },
+    },
+    mounted() {
+        this.storedTheme = localStorage.getItem('theme') || 'auto';
+        this.setTheme(this.getPreferredTheme());
+        this.showActiveTheme(this.getPreferredTheme());
+
+        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+            if (this.storedTheme !== 'light' && this.storedTheme !== 'dark') {
+                this.setTheme(this.getPreferredTheme());
+            }
+        });
+
+        document.querySelectorAll('[data-bs-theme-value]')
+            .forEach(toggle => {
+                toggle.addEventListener('click', () => {
+                    const theme = toggle.getAttribute('data-bs-theme-value') || 'auto';
+                    localStorage.setItem('theme', theme);
+                    this.setTheme(theme);
+                    this.showActiveTheme(theme);
+                })
+            });
+    },
+});
+</script>
\ No newline at end of file
diff --git a/webapp/src/locales/de.json b/webapp/src/locales/de.json
index dbda418e..f78e2262 100644
--- a/webapp/src/locales/de.json
+++ b/webapp/src/locales/de.json
@@ -25,6 +25,11 @@
     "base": {
         "Loading": "Lade..."
     },
+    "localeswitcher": {
+        "Dark": "Dunkel",
+        "Light": "Hell",
+        "Auto": "Automatisch"
+    },
     "apiresponse": {
         "1001": "Einstellungen gespeichert!",
         "1002": "Keine Werte gefunden!",
diff --git a/webapp/src/locales/en.json b/webapp/src/locales/en.json
index bc14ef33..986abd09 100644
--- a/webapp/src/locales/en.json
+++ b/webapp/src/locales/en.json
@@ -25,6 +25,11 @@
     "base": {
         "Loading": "Loading..."
     },
+    "localeswitcher": {
+        "Dark": "Dark",
+        "Light": "Light",
+        "Auto": "Auto"
+    },
     "apiresponse": {
         "1001": "Settings saved!",
         "1002": "No values found!",
diff --git a/webapp/src/locales/fr.json b/webapp/src/locales/fr.json
index a25777e6..4746202a 100644
--- a/webapp/src/locales/fr.json
+++ b/webapp/src/locales/fr.json
@@ -25,6 +25,11 @@
     "base": {
         "Loading": "Chargement..."
     },
+    "localeswitcher": {
+        "Dark": "Dark",
+        "Light": "Light",
+        "Auto": "Auto"
+    },
     "apiresponse": {
         "1001": "Paramètres enregistrés !",
         "1002": "Aucune valeur trouvée !",
diff --git a/webapp/yarn.lock b/webapp/yarn.lock
index 2ebfc642..ca3c049b 100644
--- a/webapp/yarn.lock
+++ b/webapp/yarn.lock
@@ -701,10 +701,10 @@ bootstrap-icons-vue@^1.8.1:
   resolved "https://registry.yarnpkg.com/bootstrap-icons-vue/-/bootstrap-icons-vue-1.8.1.tgz#ce4a0c1f6efe41dabcc1341f2cb191d307fbaf50"
   integrity sha512-uItRULwQz0epETi9x/RBEqfjHmTAmkIIczpH1R6L9T6yyaaijk0826PzTWnWNm15tw66JT/8GNuXjB0HI5PHLw==
 
-bootstrap@^5.2.3:
-  version "5.2.3"
-  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-5.2.3.tgz#54739f4414de121b9785c5da3c87b37ff008322b"
-  integrity sha512-cEKPM+fwb3cT8NzQZYEu4HilJ3anCrWqh3CHAok1p9jXqMPsPTBhU25fBckEJHJ/p+tTxTFTsFQGM+gaHpi3QQ==
+bootstrap@^5.3.0-alpha1:
+  version "5.3.0-alpha1"
+  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-5.3.0-alpha1.tgz#380629c4367893f02f7879a01ea3ae0f94e2e70e"
+  integrity sha512-ABZpKK4ObS3kKlIqH+ZVDqoy5t/bhFG0oHTAzByUdon7YIom0lpCeTqRniDzJmbtcWkNe800VVPBiJgxSYTYew==
 
 brace-expansion@^1.1.7:
   version "1.1.11"