From d1b253bd0af24fb4b3d352f59b1e97b57a8d05cb Mon Sep 17 00:00:00 2001
From: Aakash <aakashkumargorai@gmail.com>
Date: Sun, 9 Oct 2022 22:35:45 +0530
Subject: [PATCH] fix: dark mode during transition from homepage to internship
 page

---
 checkMode.js     | 44 ++++++++++++++++++++++++++++++++++++++++++++
 index.html       | 16 +++++++++-------
 internships.html | 11 ++++++-----
 3 files changed, 59 insertions(+), 12 deletions(-)
 create mode 100644 checkMode.js

diff --git a/checkMode.js b/checkMode.js
new file mode 100644
index 0000000..efd4d90
--- /dev/null
+++ b/checkMode.js
@@ -0,0 +1,44 @@
+window.addEventListener("load", () => {
+  let mode = localStorage.getItem("mode");
+  if (!mode) {
+    localStorage.setItem("mode", "light");
+    mode = "light";
+  }
+  if (mode === "light") {
+      document.getElementById("Navbar").classList.remove("dark-nav");
+      document.getElementById("Navbar").classList.add("bg-white");
+    document.getElementById("toggle-switch").style.backgroundColor = "white";
+    document.getElementById("toggle-switch").style.borderColor = "black";
+    var elementAnchor = document.getElementsByClassName("dark-anchor");
+    for (var i = 0; i < elementAnchor.length; i++) {
+      elementAnchor[i].classList.remove("dark-anchor-tag");
+    }
+    var elementCard = document.getElementsByClassName("card-body");
+    for (var i = 0; i < elementCard.length; i++) {
+      elementCard[i].classList.remove("dark-card");
+    }
+    var companyName = document.getElementsByClassName("company-name");
+    for (var i = 0; i < companyName.length; i++) {
+      companyName[i].classList.remove("dark-name");
+    }
+    document.body.classList.remove("dark-mode");
+  } else {
+      document.getElementById("Navbar").classList.remove("bg-white");
+    document.getElementById("Navbar").classList.add("dark-nav");
+    document.getElementById("toggle-switch").style.backgroundColor = "black";
+    document.getElementById("toggle-switch").style.borderColor = "white";
+    var elementAnchor = document.getElementsByClassName("dark-anchor");
+    for (var i = 0; i < elementAnchor.length; i++) {
+      elementAnchor[i].classList.add("dark-anchor-tag");
+    }
+    var elementCard = document.getElementsByClassName("card-body");
+    for (var i = 0; i < elementCard.length; i++) {
+      elementCard[i].classList.add("dark-card");
+    }
+    var companyName = document.getElementsByClassName("company-name");
+    for (var i = 0; i < companyName.length; i++) {
+      companyName[i].classList.add("dark-name");
+    }
+    document.body.classList.add("dark-mode");
+  }
+});
diff --git a/index.html b/index.html
index da5b2ab..888b91e 100644
--- a/index.html
+++ b/index.html
@@ -1097,18 +1097,20 @@ <h4 class="heading text-center">Contact</h4>
     ></script>
     <script src="https://web.jscdn.repl.co/AOS/aos.js"></script>
     <script src="myScript.js"></script>
+    <script src="./checkMode.js"></script>
   </body>
   <script>
-    let mode = "light";
     function darkModeToggler() {
+      let mode = localStorage.getItem("mode");
+      console.log(mode);
       if (mode === "light") {
-        mode = "dark";
-        document.getElementById("Navbar").classList.toggle("dark-nav");
+        localStorage.setItem("mode", "dark");
+        document.getElementById("Navbar").classList.remove("bg-white");
+        document.getElementById("Navbar").classList.add("dark-nav");
         document.getElementById("Content").style.color = "white";
         document.getElementById("toggle-switch").style.backgroundColor =
           "black";
         document.getElementById("toggle-switch").style.borderColor = "white";
-        document.getElementById("Navbar").classList.remove("bg-white");
         var elementAnchor = document.getElementsByClassName("dark-anchor");
         for (var i = 0; i < elementAnchor.length; i++) {
           elementAnchor[i].classList.toggle("dark-anchor-tag");
@@ -1122,13 +1124,13 @@ <h4 class="heading text-center">Contact</h4>
           elementCard2[i].classList.toggle("dark-card-2");
         }
       } else {
-        mode = "light";
-        document.getElementById("Navbar").classList.toggle("dark-nav");
+        localStorage.setItem("mode", "light");
+        document.getElementById("Navbar").classList.remove("dark-nav");
+        document.getElementById("Navbar").classList.add("bg-white");
         document.getElementById("Content").style.color = "#696969";
         document.getElementById("toggle-switch").style.backgroundColor =
           "white";
         document.getElementById("toggle-switch").style.borderColor = "black";
-        document.getElementById("Navbar").classList.add("bg-white");
         var elementAnchor = document.getElementsByClassName("dark-anchor");
         for (var i = 0; i < elementAnchor.length; i++) {
           elementAnchor[i].classList.toggle("dark-anchor-tag");
diff --git a/internships.html b/internships.html
index 8f6d170..3e633b9 100644
--- a/internships.html
+++ b/internships.html
@@ -1001,11 +1001,12 @@ <h4 class="heading text-center">Contact</h4>
     ></script>
   </body>
   <script src="myScript.js"></script>
+  <script src="./checkMode.js"></script>
   <script>
-    let mode = "light";
     function darkModeToggler() {
+      const mode = localStorage.getItem("mode")
       if (mode === "light") {
-        mode = "dark";
+        localStorage.setItem("mode", "dark");
         document.getElementById("Navbar").classList.toggle("dark-nav");
         document.getElementById("toggle-switch").style.backgroundColor =
           "black";
@@ -1023,8 +1024,9 @@ <h4 class="heading text-center">Contact</h4>
         for (var i = 0; i < companyName.length; i++) {
           companyName[i].classList.toggle("dark-name");
         }
+        document.body.classList.add("dark-mode");
       } else {
-        mode = "light";
+        localStorage.setItem("mode", "light");
         document.getElementById("Navbar").classList.toggle("dark-nav");
         document.getElementById("toggle-switch").style.backgroundColor =
           "white";
@@ -1042,9 +1044,8 @@ <h4 class="heading text-center">Contact</h4>
         for (var i = 0; i < companyName.length; i++) {
           companyName[i].classList.toggle("dark-name");
         }
+        document.body.classList.remove("dark-mode");
       }
-      var element = document.body;
-      element.classList.toggle("dark-mode");
     }
   </script>
   <script>