From 94fd50d4041844f430c9e7515d97221f9fba3e5c Mon Sep 17 00:00:00 2001
From: Sam <sam@samr1.net>
Date: Sat, 16 Dec 2023 18:54:40 +0100
Subject: [PATCH] Client - add dark theme to base.scss & button in navbar to
 toggle theme

---
 fittrackee_client/src/components/NavBar.vue | 55 ++++++++++++++++-----
 fittrackee_client/src/locales/en/user.json  |  1 +
 fittrackee_client/src/locales/fr/user.json  |  1 +
 fittrackee_client/src/scss/base.scss        |  1 +
 fittrackee_client/src/scss/colors-dark.scss |  2 +-
 5 files changed, 48 insertions(+), 12 deletions(-)

diff --git a/fittrackee_client/src/components/NavBar.vue b/fittrackee_client/src/components/NavBar.vue
index 5fbced34..23d31efd 100644
--- a/fittrackee_client/src/components/NavBar.vue
+++ b/fittrackee_client/src/components/NavBar.vue
@@ -60,12 +60,12 @@
               {{ authUser.username }}
             </router-link>
             <button
-              class="logout-button transparent"
+              class="nav-button transparent"
               @click="updateDisplayModal(true)"
-              :aria-label="$t('user.LOGOUT')"
+              :title="$t('user.LOGOUT')"
             >
-              <i class="fa fa-sign-out logout-fa" aria-hidden="true" />
-              <span class="logout-text">{{ $t('user.LOGOUT') }}</span>
+              <i class="fa fa-sign-out nav-button-fa" aria-hidden="true" />
+              <span class="nav-button-text">{{ $t('user.LOGOUT') }}</span>
             </button>
           </div>
           <div class="nav-items-group" v-else>
@@ -76,6 +76,14 @@
               {{ $t('user.REGISTER') }}
             </router-link>
           </div>
+          <button
+            class="nav-button transparent"
+            @click="toggleTheme"
+            :title="$t('user.TOGGLE_THEME')"
+          >
+            <i class="fa nav-button-fa" :class="themeIcon" aria-hidden="true" />
+            <span class="nav-button-text">{{ $t('user.TOGGLE_THEME') }}</span>
+          </button>
           <Dropdown
             v-if="availableLanguages && language"
             class="nav-item"
@@ -93,7 +101,7 @@
 </template>
 
 <script setup lang="ts">
-  import { computed, ref, capitalize } from 'vue'
+  import { computed, ref, capitalize, onBeforeMount } from 'vue'
   import type { ComputedRef, Ref } from 'vue'
 
   import UserPicture from '@/components/User/UserPicture.vue'
@@ -119,6 +127,12 @@
   )
   const isMenuOpen: Ref<boolean> = ref(false)
   const displayModal: Ref<boolean> = ref(false)
+  const darkTheme: Ref<boolean> = ref(false)
+  const themeIcon: ComputedRef<string> = computed(() =>
+    darkTheme.value ? 'fa-moon' : 'fa-sun-o'
+  )
+
+  onBeforeMount(() => initTheme())
 
   function openMenu() {
     isMenuOpen.value = true
@@ -141,6 +155,24 @@
   function updateDisplayModal(display: boolean) {
     displayModal.value = display
   }
+  function setTheme() {
+    if (darkTheme.value) {
+      darkTheme.value = true
+      document.body.setAttribute('data-theme', 'dark')
+    } else {
+      document.body.removeAttribute('data-theme')
+    }
+  }
+  function initTheme() {
+    if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+      darkTheme.value = true
+    }
+    setTheme()
+  }
+  function toggleTheme() {
+    darkTheme.value = !darkTheme.value
+    setTheme()
+  }
 </script>
 
 <style scoped lang="scss">
@@ -252,13 +284,13 @@
       .nav-separator {
         display: none;
       }
-      .logout-button {
+      .nav-button {
         padding: $default-padding * 0.5 $default-padding * 0.75;
         margin-left: 2px;
-        .logout-fa {
+        .nav-button-fa {
           display: block;
         }
-        .logout-text {
+        .nav-button-text {
           display: none;
         }
       }
@@ -323,15 +355,16 @@
           display: flex;
           flex-direction: column;
 
-          .logout-button {
+          .nav-button {
             padding: $default-padding $default-padding $default-padding
               $default-padding * 2.4;
             color: var(--app-a-color);
             text-align: left;
-            .logout-fa {
+            .nav-button-fa {
               display: none;
+              width: 36px;
             }
-            .logout-text {
+            .nav-button-text {
               display: block;
             }
           }
diff --git a/fittrackee_client/src/locales/en/user.json b/fittrackee_client/src/locales/en/user.json
index 53ea8d95..5bae78a7 100644
--- a/fittrackee_client/src/locales/en/user.json
+++ b/fittrackee_client/src/locales/en/user.json
@@ -136,6 +136,7 @@
   "REVIEW": "review",
   "SHOW_PASSWORD": "show password",
   "THIS_USER_ACCOUNT_IS_INACTIVE": "This user account is inactive.",
+  "TOGGLE_THEME": "Toggle theme (Light or Dark mode)",
   "USERNAME": "Username",
   "USERNAME_INFO": "3 to 30 characters required, only alphanumeric characters and the underscore character \"_\" allowed.",
   "USER_PICTURE": "user picture",
diff --git a/fittrackee_client/src/locales/fr/user.json b/fittrackee_client/src/locales/fr/user.json
index fcdf702e..6bbb91c6 100644
--- a/fittrackee_client/src/locales/fr/user.json
+++ b/fittrackee_client/src/locales/fr/user.json
@@ -136,6 +136,7 @@
   "REVIEW": "accepter",
   "SHOW_PASSWORD": "afficher le mot de passe",
   "THIS_USER_ACCOUNT_IS_INACTIVE": "Le compte de cet utilisateur est inactif.",
+  "TOGGLE_THEME": "Modifier le thème (Mode Clair ou Sombre)",
   "USERNAME": "Nom d'utilisateur",
   "USERNAME_INFO": "3 à 30 caractères requis, seuls les caractères alphanumériques et le caractère _ sont autorisés.",
   "USER_PICTURE": "photo de l'utilisateur",
diff --git a/fittrackee_client/src/scss/base.scss b/fittrackee_client/src/scss/base.scss
index 0255ca33..a1f133b7 100644
--- a/fittrackee_client/src/scss/base.scss
+++ b/fittrackee_client/src/scss/base.scss
@@ -1,4 +1,5 @@
 @import 'colors';
+@import 'colors-dark';
 @import 'fonts';
 @import 'vars';
 
diff --git a/fittrackee_client/src/scss/colors-dark.scss b/fittrackee_client/src/scss/colors-dark.scss
index 58043b6a..497e8aa4 100644
--- a/fittrackee_client/src/scss/colors-dark.scss
+++ b/fittrackee_client/src/scss/colors-dark.scss
@@ -1,4 +1,4 @@
-:root {
+:root [data-theme='dark'] {
   --app-background-color: #090909;
   --app-color: #ffffff;
   --app-color-light: #6f7070;