Implement Dark Mode

Fixed anchor positioning on Preferences page
mikojimnz · Oct 31, 2021 · dfcd204 · dfcd204 · mikojimnz · Oct 31, 2021
1 parent 107b5a3
commit dfcd204
Show file tree

Hide file tree

Showing 7 changed files with 108 additions and 21 deletions.
diff --git a/app/preferences.html b/app/preferences.html
@@ -19,7 +19,7 @@
     <header>
       <div class="banner-top">
         <nav class="row navbar navbar-toggleable-lg navbar-inverse bg-inverse bg-faded">
-          <div class="col col-2"><button onclick="window.history.go(-1); return false;" class="btn btn-link btn-sm back"><i class="fas fa-chevron-left fa-2x"></i></button></div>
+          <div class="col col-2"><button onclick="location.href='home.html'" return false;" class="btn btn-link btn-sm back"><i class="fas fa-chevron-left fa-2x"></i></button></div>
           <div class="col col-8 text-center">
             <a class="btn" href="home.html"><h6 class="text-uppercase banner-logo-text" role="button">UCF Downtown</h6></a>
           </div>
@@ -67,7 +67,8 @@
           <h1 class="heading-underline">Preferences</h1>
 
           <div class="pt-5 pb-5">
-            <h2 class="heading-underline" id="campus">Change Campus</h2>
+            <a class="anchor" id="campus"></a>
+            <h2 class="heading-underline">Change Campus</h2>
             <div class="dropdown">
               <button class="btn btn-default dropdown-toggle" type="button" id="dropdownCampus" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                 Select Campus
@@ -80,15 +81,17 @@ <h2 class="heading-underline" id="campus">Change Campus</h2>
               </div>
             </div>
           </div>
-
-          <div class="pb-5">
-            <h2 class="heading-underline" id="location">Location Preferences</h2>
+          <hr>
+          <div class="pt-5 pb-5">
+            <a class="anchor" id="location"></a>
+            <h2 class="heading-underline">Location Preferences</h2>
             <p>Allow location services.</p>
             <button type="button" class="btn btn-success btn-toggle">Enabled</button>
           </div>
-
-          <div class="pb-5">
-            <h2 class="heading-underline" id="notification">Notification Preferences</h2>
+          <hr>
+          <div class="pt-5 pb-5">
+            <a class="anchor" id="notification"></a>
+            <h2 class="heading-underline">Notification Preferences</h2>
             <h4 class="pt-4">Emergency Notifications</h4>
             <p>Emergency alerts and notifications.</p>
             <button type="button" class="btn btn-success btn-toggle">Enabled</button>
@@ -99,9 +102,10 @@ <h4 class="pt-4">Transit Notifications</h4>
             <p>Parking, travel time.</p>
             <button type="button" class="btn btn-success btn-toggle">Enabled</button>
           </div>
-
-          <div class="pb-5">
-            <h2 class="heading-underline" id="language">Language Preferences</h2>
+          <hr>
+          <div class="pt-5 pb-5">
+            <a class="anchor" id="language"></a>
+            <h2 class="heading-underline">Language Preferences</h2>
             <div class="dropdown">
               <button class="btn btn-default dropdown-toggle" type="button" id="dropdownLanguage" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                 Change Language
@@ -114,9 +118,10 @@ <h2 class="heading-underline" id="language">Language Preferences</h2>
               </div>
             </div>
           </div>
-
-          <div class="pb-5">
-            <h2 class="heading-underline" id="accessibility">Accessibility</h2>
+          <hr>
+          <div class="pt-5 pb-5">
+            <a class="anchor" id="accessibility"></a>
+            <h2 class="heading-underline">Accessibility</h2>
 
             <h4 class="pt-4">Text Size</h4>
             <div class="btn-group" role="group" aria-label="Basic example">
@@ -129,7 +134,7 @@ <h4 class="pt-4">High Contrast Colors</h4>
             <button type="button" class="btn btn-default btn-toggle">Disabled</button>
 
             <h4 class="pt-4">Dark Mode</h4>
-            <button type="button" class="btn btn-default btn-toggle">Disabled</button>
+            <button type="button" class="btn btn-default btn-toggle" id="dark-mode-toggle">Disabled</button>
           </div>
 
         </div>

diff --git a/css/styles.css b/css/styles.css
diff --git a/css/styles.css.map b/css/styles.css.map
diff --git a/css/styles.scss b/css/styles.scss
@@ -3,6 +3,13 @@
 
 /* Classes */
 
+a.anchor {
+    display: block;
+    position: relative;
+    top: -250px;
+    visibility: hidden;
+}
+
 .back {
     color: #ffffff;
 }
@@ -125,4 +132,26 @@ footer {
 
 .nav-link > .fas:hover {
     color: $brightGold50;
+}
+
+/* Dark Mode Stylings */
+
+.darkmode, .fas.darkmode {
+    color: white;
+}
+
+.alert-warning.darkmode {
+    background-color: #f9e7c950!important;
+}
+
+.alert-info.darkmode {
+    background-color: #dcf3f850!important;
+}
+
+.btn.darkmode {
+    background-color: black;
+}
+
+body.darkmode {
+    background-color: black;
 }
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "dig4104c",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "UCF Mobile App Prototype",
   "main": "index.html",
   "scripts": {

diff --git a/scripts/app.js b/scripts/app.js
@@ -1,4 +1,4 @@
-/* Set font size based on preferences*/
+/* Get font size based on preferences */
 function setFontSize() {
     let accessibleText = "a, button:not('.text-size-toggle'), h1, h2, h3, h4, h5, h6, p";
 
@@ -42,6 +42,25 @@ function setFontSize() {
     }
 };
 
+/* Get dark mode based on preferences */
+function setDarkMode() {
+    let accessibleElements = "a, body, button, h1, h2, h3, h4, h5, h6, .alert, .fas";
+
+    if(Cookies.get('darkMode') == "true") {
+        $("#dark-mode-toggle").addClass("btn-success");
+        $("#dark-mode-toggle").removeClass("btn-default");
+        $("#dark-mode-toggle").text("Enabled");
+
+        $(accessibleElements).addClass("darkmode");
+    } else {
+        $("#dark-mode-toggle").addClass("btn-default");
+        $("#dark-mode-toggle").removeClass("btn-success");
+        $("#dark-mode-toggle").text("Disabled");
+
+        $(accessibleElements).removeClass("darkmode");
+    }
+}
+
 /* Toggle clickable buttons */
 $(".btn-toggle").on("click", function(){
     if ($(this).hasClass("btn-success")) {
@@ -55,7 +74,7 @@ $(".btn-toggle").on("click", function(){
     }
   });
 
-/* Toggle font size buttons */
+/* Set font size preferences */
 $("#text-size-sm").on("click", function() {
     Cookies.set('fontSize', 'sm');
     setFontSize()
@@ -69,4 +88,16 @@ $("#text-size-lg").on("click", function() {
     setFontSize()
 });
 
+/* Set dark mode preferences */
+$("#dark-mode-toggle").on("click", function() {
+    if($(this).hasClass("btn-success")) {
+        Cookies.set('darkMode', 'true');
+        setDarkMode();
+    } else {
+        Cookies.set('darkMode', 'false');
+        setDarkMode();
+    }
+});
+
 setFontSize()
+setDarkMode();