From 172eeaeeafb5a7e7a9145fd6dd62132d20f5e9d2 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Wed, 2 Nov 2022 11:41:00 +0100
Subject: [PATCH] add light and dark mode in seperate scss, add switch in
 sidebar

---
 .../assets/scss/gradido-template-dark.scss    | 19 +++++++++++
 .../src/assets/scss/gradido-template.scss     |  2 ++
 frontend/src/assets/scss/gradido.scss         |  1 +
 frontend/src/components/Menu/SidebarNew.vue   | 19 +++++++++--
 frontend/src/layouts/DashboardLayout.vue      | 32 ++++++++++++++++++-
 5 files changed, 70 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/assets/scss/gradido-template-dark.scss

diff --git a/frontend/src/assets/scss/gradido-template-dark.scss b/frontend/src/assets/scss/gradido-template-dark.scss
new file mode 100644
index 000000000..9ccf4db5d
--- /dev/null
+++ b/frontend/src/assets/scss/gradido-template-dark.scss
@@ -0,0 +1,19 @@
+$dark: #171717;
+$mode-toggle-bg: #262626;
+
+// _dark-mode.scss
+#app {
+  &.dark-mode {
+      background-color:  black;
+      color: #fff;
+  }
+}
+
+#app a,
+.navbar-light,
+.navbar-nav,
+.nav-link {
+    &.dark-mode {
+        color: #a7ffa9;
+    }
+ }
diff --git a/frontend/src/assets/scss/gradido-template.scss b/frontend/src/assets/scss/gradido-template.scss
index 0dba0513a..5931e287c 100644
--- a/frontend/src/assets/scss/gradido-template.scss
+++ b/frontend/src/assets/scss/gradido-template.scss
@@ -1,6 +1,8 @@
 html,
 body {
+  background-color: #fff;
   height: 100%;
+  transition: background-color .5s ease, color .5s ease;
 }
 
 .pointer {
diff --git a/frontend/src/assets/scss/gradido.scss b/frontend/src/assets/scss/gradido.scss
index 7366eb466..2277cfbc6 100644
--- a/frontend/src/assets/scss/gradido.scss
+++ b/frontend/src/assets/scss/gradido.scss
@@ -52,3 +52,4 @@
 // Bootstrap-vue (2.21.1) scss
 @import "~bootstrap-vue/src/index";
 @import "gradido-template";
+@import "gradido-template-dark";
diff --git a/frontend/src/components/Menu/SidebarNew.vue b/frontend/src/components/Menu/SidebarNew.vue
index 2e11b9ae9..bc2e644ac 100644
--- a/frontend/src/components/Menu/SidebarNew.vue
+++ b/frontend/src/components/Menu/SidebarNew.vue
@@ -36,9 +36,19 @@
         </b-nav>
         <hr />
         <b-nav vertical class="w-100">
-          <b-nav-item to="#" class="mb-3">
-            <b-icon icon="toggle-off" aria-hidden="true"></b-icon>
+          <b-nav-item
+            @click="
+              lightmode = !lightmode
+              $emit('modeToggle')
+            "
+            class="mb-3"
+          >
+            <b-icon :icon="lightmode ? 'toggle-on' : 'toggle-off'" aria-hidden="true"></b-icon>
             <span class="d-none d-lg-inline ml-2">{{ $t('navigation.lightmode') }}</span>
+            <label for="checkbox" class="switch-label">
+              <span v-if="lightmode">🌙</span>
+              <span v-else>☀️</span>
+            </label>
           </b-nav-item>
           <b-nav-item to="/settings" class="mb-3">
             <b-icon icon="gear" aria-hidden="true"></b-icon>
@@ -60,6 +70,11 @@
 <script>
 export default {
   name: 'sidebar',
+  data() {
+    return {
+      lightmode: false,
+    }
+  },
 }
 </script>
 <style>
diff --git a/frontend/src/layouts/DashboardLayout.vue b/frontend/src/layouts/DashboardLayout.vue
index f6d7ad7d5..b42a890f4 100755
--- a/frontend/src/layouts/DashboardLayout.vue
+++ b/frontend/src/layouts/DashboardLayout.vue
@@ -35,7 +35,12 @@
               @admin="admin"
               @logout="logout"
             /> -->
-            <sidebar-new class="main-sidebar" @admin="admin" @logout="logout" />
+            <sidebar-new
+              class="main-sidebar"
+              @admin="admin"
+              @logout="logout"
+              @modeToggle="modeToggle"
+            />
           </b-col>
           <b-col
             cols="12"
@@ -119,6 +124,7 @@ export default {
       visible: false,
       tunneledEmail: null,
       hamburger: true,
+      darkMode: false,
     }
   },
   provide() {
@@ -187,6 +193,30 @@ export default {
       this.$refs.sideMenu.classList.toggle('d-none')
       this.hamburger ? (this.hamburger = false) : (this.hamburger = true)
     },
+    dark() {
+      document.getElementById('app').classList.add('dark-mode')
+      document.querySelector('#app a').classList.add('dark-mode')
+      this.darkMode = true
+    },
+
+    light() {
+      document.getElementById('app').classList.remove('dark-mode')
+      document.querySelector('#app a').classList.remove('dark-mode')
+      this.darkMode = false
+    },
+
+    modeToggle() {
+      if (this.darkMode || document.getElementById('app').classList.contains('dark-mode')) {
+        this.light()
+      } else {
+        this.dark()
+      }
+    },
+  },
+  computed: {
+    darkDark() {
+      return this.darkMode && 'darkmode-toggled'
+    },
   },
 }
 </script>