Theme Mode v2

Added feature support for theme by cookies and theme by browser.
Husky-Navigation-Services · Dec 21, 2021 · c468a81 · c468a81
1 parent d83332f
commit c468a81
Show file tree

Hide file tree

Showing 8 changed files with 60 additions and 93 deletions.
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
diff --git a/.vscode/launch.json b/.vscode/launch.json
diff --git a/.vscode/settings.json b/.vscode/settings.json
diff --git a/.vscode/tasks.json b/.vscode/tasks.json
diff --git a/Front-End/index.css b/Front-End/index.css
@@ -325,10 +325,6 @@ option {
   height: 160px;
 }
 
-#currentMode {
-  display: none;
-}
-
 #aboutSection {
   margin-left: 40px;
   color: whitesmoke;
@@ -643,7 +639,6 @@ option {
   #weatherDiv,
   #locationIconDiv,
   .githubIconDiv,
-  #currentMode,
   #slider,
   #themeCheckbox,
   #switch,

diff --git a/Front-End/index.html b/Front-End/index.html
@@ -240,9 +240,8 @@ <h6 id="aboutHeader" class="header"> ABOUT US </h6>
             </div>
             -->
             <!-- Color Theme Switcher -->
-            <p id="currentMode">Light</p>
             <label id="switch">
-                <input aria-label="Checkbox" id="themeCheckbox" type="checkbox">
+                <input aria-label="checkbox" id="themeCheckbox" type="checkbox">
                 <span id="slider"></span>
             </label>
         </div>

diff --git a/Front-End/index.js b/Front-End/index.js
@@ -257,41 +257,70 @@ function toggleWeatherPopup() {
     }
 }
 
-// Toggles the overall color theme.
+// Sets theme by cookie if exists or by OS theme if no cookie exists.
+window.onload=function() {
+    var cookie_pos = document.cookie.indexOf('theme='); // locates cookie
+    if (cookie_pos != -1) { // if exists cookie
+        var cookieTheme = substr(cookie_pos + 10, document.cookie.indexOf(';', cookie_pos)); // extracts cookie
+        if (cookieTheme == "dark") {
+            darkMode();
+        } else {
+            lightMode();
+        }
+    } else {
+        if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+            darkMode();
+        }
+    }
+}
+
+// Toggles the overall site theme.
 function toggleTheme() {
     if (this.checked) { // Represents dark mode.
-        horizontalBar.style.backgroundColor = "#202225";
-        leftSideBar.style.backgroundColor = "#202225";
-        titleElements.style.backgroundColor = "#202225";
-        weatherArrow.style.fill = "#202225";
-        weatherPopupBody.style.backgroundColor = "#202225";
-        wordmark.src = "uwWordmarks/UnivWaWordmark.png";
-        title.style.color = "whitesmoke";
-        logo.src = "logos/HuskyNavLogoDarker.png";
-        logo.style.borderWidth = "0px";
-        logo.style.width = "70px";
-        logo.style.height = "70px";
-        logo.style.marginLeft = "0px";
-        logo.style.marginTop = "10px"; 
-        expandIcon.style.background = "#202225"; 
-        devResources.style.background = "#202225";
+        darkMode();
     } else { // Represents light mode.
-        horizontalBar.style.backgroundColor = "#4b2e83";
-        leftSideBar.style.backgroundColor = "#4b2e83";
-        titleElements.style.backgroundColor = "whitesmoke";
-        weatherArrow.style.fill = "#4b2e83";
-        weatherPopupBody.style.backgroundColor = "#4b2e83"
-        wordmark.src = "uwWordmarks/UnivWaWordmarkPurple.png";
-        title.style.color = "#4b2e83";
-        logo.src = "logos/HuskyNavLogoWhite.png";
-        logo.style.borderWidth = "5px";
-        logo.style.width = "60px";
-        logo.style.height = "60px";
-        expandIcon.style.background = "#4b2e83"; 
-        devResources.style.background = "#4b2e83";
+        lightMode();
     }
 }
 
+// Sets site UI to dark mode.
+function darkMode() {
+    horizontalBar.style.backgroundColor = "#202225";
+    leftSideBar.style.backgroundColor = "#202225";
+    titleElements.style.backgroundColor = "#202225";
+    weatherArrow.style.fill = "#202225";
+    weatherPopupBody.style.backgroundColor = "#202225";
+    wordmark.src = "uwWordmarks/UnivWaWordmark.png";
+    title.style.color = "whitesmoke";
+    logo.src = "logos/HuskyNavLogoDarker.png";
+    logo.style.borderWidth = "0px";
+    logo.style.width = "70px";
+    logo.style.height = "70px";
+    logo.style.marginLeft = "0px";
+    logo.style.marginTop = "10px"; 
+    expandIcon.style.background = "#202225"; 
+    devResources.style.background = "#202225";
+    document.cookie = 'theme=dark;';
+}
+
+// Sets site UI to light mode.
+function lightMode() {
+    horizontalBar.style.backgroundColor = "#4b2e83";
+    leftSideBar.style.backgroundColor = "#4b2e83";
+    titleElements.style.backgroundColor = "whitesmoke";
+    weatherArrow.style.fill = "#4b2e83";
+    weatherPopupBody.style.backgroundColor = "#4b2e83"
+    wordmark.src = "uwWordmarks/UnivWaWordmarkPurple.png";
+    title.style.color = "#4b2e83";
+    logo.src = "logos/HuskyNavLogoWhite.png";
+    logo.style.borderWidth = "5px";
+    logo.style.width = "60px";
+    logo.style.height = "60px";
+    expandIcon.style.background = "#4b2e83"; 
+    devResources.style.background = "#4b2e83";
+    document.cookie = 'theme=light;';
+}
+
 // Handles new input in a search bar. Scrolls to the matching location element in the
 // search bar's corresponding list of location elements using the prefix.
 function handleNewInput() {

diff --git a/Front-End/secondaryStylesheets/toggleSwitch.css b/Front-End/secondaryStylesheets/toggleSwitch.css
@@ -21,13 +21,12 @@ https://www.w3schools.com/howto/howto_css_switch.asp
 
   /* Hide default HTML checkbox */
   #switch input {
-
     opacity: 0;
     width: 0;
     height: 0;
   }
 
-  /* The slider */
+  /* Theme Slider */
   #slider {
     position: absolute;
     cursor: pointer;