From c468a81258d3070cbaff70f63e86b2b64a8cbaa8 Mon Sep 17 00:00:00 2001
From: Daniel Berezansky <23129330+dberezansky@users.noreply.github.com>
Date: Mon, 20 Dec 2021 19:16:02 -0800
Subject: [PATCH] Theme Mode v2

Added feature support for theme by cookies and theme by browser.
---
 .vscode/extensions.json                       |  6 --
 .vscode/launch.json                           | 13 ---
 .vscode/settings.json                         |  9 --
 .vscode/tasks.json                            | 27 ------
 Front-End/index.css                           |  5 --
 Front-End/index.html                          |  3 +-
 Front-End/index.js                            | 87 ++++++++++++-------
 .../secondaryStylesheets/toggleSwitch.css     |  3 +-
 8 files changed, 60 insertions(+), 93 deletions(-)
 delete mode 100644 .vscode/extensions.json
 delete mode 100644 .vscode/launch.json
 delete mode 100644 .vscode/settings.json
 delete mode 100644 .vscode/tasks.json

diff --git a/.vscode/extensions.json b/.vscode/extensions.json
deleted file mode 100644
index f0557ab..0000000
--- a/.vscode/extensions.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-  "recommendations": [
-    "ms-azuretools.vscode-azurefunctions",
-    "vscjava.vscode-java-debug"
-  ]
-}
diff --git a/.vscode/launch.json b/.vscode/launch.json
deleted file mode 100644
index c071177..0000000
--- a/.vscode/launch.json
+++ /dev/null
@@ -1,13 +0,0 @@
-{
-    "version": "0.2.0",
-    "configurations": [
-        {
-            "name": "Attach to Java Functions",
-            "type": "java",
-            "request": "attach",
-            "hostName": "127.0.0.1",
-            "port": 5005,
-            "preLaunchTask": "func: host start"
-        }
-    ]
-}
\ No newline at end of file
diff --git a/.vscode/settings.json b/.vscode/settings.json
deleted file mode 100644
index 190bf24..0000000
--- a/.vscode/settings.json
+++ /dev/null
@@ -1,9 +0,0 @@
-{
-    "azureFunctions.deploySubpath": "Server/target/azure-functions/huskynavigationserver2",
-    "azureFunctions.projectLanguage": "Java",
-    "azureFunctions.projectRuntime": "~3",
-    "debug.internalConsoleOptions": "neverOpen",
-    "azureFunctions.preDeployTask": "package",
-    "java.configuration.updateBuildConfiguration": "interactive",
-    "github.host": "\"github.dberezansky\""
-}
\ No newline at end of file
diff --git a/.vscode/tasks.json b/.vscode/tasks.json
deleted file mode 100644
index 727c9c6..0000000
--- a/.vscode/tasks.json
+++ /dev/null
@@ -1,27 +0,0 @@
-{
-	"version": "2.0.0",
-	"tasks": [
-		{
-			"type": "func",
-			"command": "host start",
-			"problemMatcher": "$func-java-watch",
-			"isBackground": true,
-			"options": {
-				"cwd": "${workspaceFolder}/Server/target/azure-functions/huskynavigationserver2"
-			},
-			"dependsOn": "package"
-		},
-		{
-			"label": "package",
-			"command": "mvn clean package",
-			"type": "shell",
-			"group": {
-				"kind": "build",
-				"isDefault": true
-			},
-			"options": {
-				"cwd": "${workspaceFolder}/Server"
-			}
-		}
-	]
-}
\ No newline at end of file
diff --git a/Front-End/index.css b/Front-End/index.css
index 75a21bc..45c93fb 100644
--- 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
index f8dd21c..f4788c9 100644
--- 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
index daea883..90d0408 100644
--- 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
index 14477af..23c865d 100644
--- 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;