From ad325c99d2b1234bbbef6b98fb379540641729d1 Mon Sep 17 00:00:00 2001
From: BryanG <davidbryanrs@gmail.com>
Date: Thu, 4 Jul 2024 13:25:23 -0500
Subject: [PATCH] feat: add transitions

---
 src/App.vue                 |  8 +++++++-
 src/pages/Home.page.vue     |  2 +-
 src/scripts/color-scheme.js | 23 ++++++++++++++++++-----
 3 files changed, 26 insertions(+), 7 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index a1f16a1..dec2fcf 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,15 +1,21 @@
 <script setup>
 
 import {backgroundColor, textColor} from "@/scripts/color-scheme.js";
+import {onMounted} from "vue";
 
 
+onMounted(() => {
+  document.getElementById("page").classList.add("transition-colors")
+})
+
 </script>
 
 <template>
 
-  <div :class="backgroundColor + ' ' + textColor " class = "w-full h-all-page flex flex-col items-center transition-colors">
+  <div id = "page" :class="backgroundColor + ' ' + textColor " class = "w-full h-all-page flex flex-col items-center">
     <router-view/>
   </div>
+
 </template>
 
 <style scoped>
diff --git a/src/pages/Home.page.vue b/src/pages/Home.page.vue
index d027815..c5a362f 100644
--- a/src/pages/Home.page.vue
+++ b/src/pages/Home.page.vue
@@ -14,7 +14,7 @@ import {changeLanguage, languageName}  from '@/scripts/i18n.js';
       <div class = "flex justify-between">
         <h1 class = "text-4xl">{{$t('home.title')}}</h1>
         <div :key="darkMode" class = " computer:text-2xl mobile:text-xl flex gap-2.5">
-          <rounded-button @click="toggleColorTheme">
+          <rounded-button @click="toggleColorTheme(!darkMode)">
             <i v-if="darkMode" class = "pi pi-moon"/>
             <i v-else class = "pi pi-sun"/>
           </rounded-button>
diff --git a/src/scripts/color-scheme.js b/src/scripts/color-scheme.js
index e5fd23c..d70ec07 100644
--- a/src/scripts/color-scheme.js
+++ b/src/scripts/color-scheme.js
@@ -6,19 +6,32 @@ let backgroundColor = ref("bg-white");
 let secondBackgroundColor = ref("bg-gray-200");
 let textColor = ref("text-black");
 
-function toggleColorTheme() {
-    console.log("Toggle color theme")
-    darkMode.value =!darkMode.value;
+function initDarkMode(){
+
+    if (localStorage.getItem("dark-mode") === null){
+        localStorage.setItem("dark-mode", "false");
+    }else{
+        toggleColorTheme(Boolean(localStorage.getItem("dark-mode")));
+    }
+}
+
+function toggleColorTheme(colorStatus) {
+
+    darkMode.value = colorStatus;
+    localStorage.setItem("dark-mode", darkMode.value);
 
     if (darkMode.value){
         backgroundColor.value = "bg-black";
         textColor.value = "text-white";
-        secondBackgroundColor = "bg-gray-500";
+        secondBackgroundColor.value = "bg-gray-500";
     }else{
         backgroundColor.value = "bg-white";
         textColor.value = "text-black";
-        secondBackgroundColor = "bg-gray-200";
+        secondBackgroundColor.value = "bg-gray-200";
     }
+
 }
 
+initDarkMode()
+
 export { darkMode, toggleColorTheme , backgroundColor, secondBackgroundColor, textColor};