feat: add transitions

devblook · Jul 4, 2024 · ad325c9 · ad325c9
1 parent 642c64a
commit ad325c9
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 7 deletions.
diff --git 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
@@ -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
@@ -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};