adding dark mode theme toggler

radhe098 · Oct 2, 2020 · d30826f · d30826f
1 parent 9c0a03a
commit d30826f
Show file tree

Hide file tree

Showing 9 changed files with 720 additions and 521 deletions.
diff --git a/about.html b/about.html
@@ -35,6 +35,10 @@
     />
     <link rel="stylesheet" href="resources/style/style.css" />
     <link rel="stylesheet" href="resources/style/about-page.css" />
+    <!-- Dark Mode -->
+    <link rel='stylesheet' type='text/css' href='resources/style/themeToggle.css'>
+    <script src='resources/scripts/themeToggle.js' defer></script>
+    <!-- /Dark Mode -->
   </head>
 
   <body>
@@ -73,6 +77,13 @@
           </li>
         </ul>
       </div>
+      <div class='theme-toggle-container'>
+        <span class='theme-toggle-text'>Light Mode</span>
+              <label class='theme-toggle'>
+                  <input id='theme-toggle-switch' type='checkbox'>
+                  <span class='slider round'></span>
+              </label>
+          </div>
       <a class="nav-link ml-md-auto" href="beyondztm.html"
         >Beyond Zero to Mastery <i class="fas fa-arrow-right"></i></a
       >

diff --git a/beyondztm.html b/beyondztm.html
@@ -15,6 +15,10 @@
     <link href="https://fonts.googleapis.com/css?family=Lora|Montserrat&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
     <link rel="stylesheet" href="resources/style/style.css" />
+    <!-- Dark Mode -->
+    <link rel='stylesheet' type='text/css' href='resources/style/themeToggle.css'>
+    <script src='resources/scripts/themeToggle.js' defer></script>
+    <!-- /Dark Mode -->
 </head>
 
 <body>
@@ -42,6 +46,13 @@
                   </li>
             </ul>
         </div>
+        <div class='theme-toggle-container'>
+			<span class='theme-toggle-text'>Light Mode</span>
+            <label class='theme-toggle'>
+                <input id='theme-toggle-switch' type='checkbox'>
+                <span class='slider round'></span>
+            </label>
+        </div>
         <a class="nav-link ml-md-auto" href="beyondztm.html">Beyond Zero to Mastery</a>
     </nav>
 

diff --git a/contributersProfile.html b/contributersProfile.html
@@ -17,6 +17,10 @@
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" />
   <link rel="stylesheet" href="resources/style/style.css" />
   <link rel="stylesheet" href="resources/style/about-page.css" />
+  <!-- Dark Mode -->
+  <link rel='stylesheet' type='text/css' href='resources/style/themeToggle.css'>
+  <script src='resources/scripts/themeToggle.js' defer></script>
+  <!-- /Dark Mode -->
 </head>
 
 <body>
@@ -46,6 +50,13 @@
         </li>
       </ul>
     </div>
+    <div class='theme-toggle-container'>
+			<span class='theme-toggle-text'>Light Mode</span>
+      <label class='theme-toggle'>
+          <input id='theme-toggle-switch' type='checkbox'>
+          <span class='slider round'></span>
+      </label>
+    </div>
     <a class="nav-link ml-md-auto" href="beyondztm.html">Beyond Zero to Mastery <i class="fas fa-arrow-right"></i></a>
   </nav>
   <div class="animated bounce">

diff --git a/index.html b/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" theme='dar'>
 
 <head>
     <meta charset="UTF-8">
@@ -20,6 +20,10 @@
         href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
         integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
+    <!-- Dark Mode -->
+    <link rel='stylesheet' type='text/css' href='resources/style/themeToggle.css'>
+    <script src='resources/scripts/themeToggle.js' defer></script>
+    <!-- /Dark Mode -->
     <script src="https://code.jquery.com/jquery-3.5.1.min.js"
         integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
 </head>
@@ -51,6 +55,13 @@
                 </li>
             </ul>
         </div>
+        <div class='theme-toggle-container'>
+			<span class='theme-toggle-text'>Light Mode</span>
+            <label class='theme-toggle'>
+                <input id='theme-toggle-switch' type='checkbox'>
+                <span class='slider round'></span>
+            </label>
+        </div>
         <a id="headerText" class="nav-link ml-md-auto" href="beyondztm.html">Beyond Zero to Mastery <i class="fas fa-arrow-right"></i></a>
     </nav>
     <a class="gotopbtn" href="#"><i class="fas fa-chevron-circle-up"></i></a>

diff --git a/instructor.html b/instructor.html
@@ -35,6 +35,10 @@
     />
     <link rel="stylesheet" href="resources/style/style.css" />
     <link rel="stylesheet" href="resources/style/about-page.css" />
+    <!-- Dark Mode -->
+    <link rel='stylesheet' type='text/css' href='resources/style/themeToggle.css'>
+    <script src='resources/scripts/themeToggle.js' defer></script>
+    <!-- /Dark Mode -->
   </head>
 
   <body>
@@ -72,6 +76,13 @@
           </li>
         </ul>
       </div>
+      <div class='theme-toggle-container'>
+        <span class='theme-toggle-text'>Light Mode</span>
+              <label class='theme-toggle'>
+                  <input id='theme-toggle-switch' type='checkbox'>
+                  <span class='slider round'></span>
+              </label>
+          </div>
       <a class="nav-link ml-md-auto" href="beyondztm.html"
         >Beyond Zero to Mastery <i class="fas fa-arrow-right"></i></a
       >

diff --git a/register.html b/register.html
@@ -34,6 +34,10 @@
     />
     <link rel="stylesheet" href="resources/style/style.css" />
     <link rel="stylesheet" href="resources/style/register-page.css" />
+    <!-- Dark Mode -->
+    <link rel='stylesheet' type='text/css' href='resources/style/themeToggle.css'>
+    <script src='resources/scripts/themeToggle.js' defer></script>
+    <!-- /Dark Mode -->
   </head>
 
   <body>
@@ -63,6 +67,13 @@
               </li>
           </ul>
       </div>
+      <div class='theme-toggle-container'>
+        <span class='theme-toggle-text'>Light Mode</span>
+              <label class='theme-toggle'>
+                  <input id='theme-toggle-switch' type='checkbox'>
+                  <span class='slider round'></span>
+              </label>
+          </div>
       <a class="nav-link ml-md-auto" href="beyondztm.html">Beyond Zero to Mastery <i class="fas fa-arrow-right"></i></a>
   </nav>
 

diff --git a/resources/scripts/themeToggle.js b/resources/scripts/themeToggle.js
@@ -0,0 +1,35 @@
+// Dark Theme Global JS (by Yusuf)
+
+const html = document.querySelector('html');
+// const images = document.querySelectorAll('img');
+// const pictures = document.querySelectorAll('pictures');
+// const videos = document.querySelectorAll('video');
+
+const themeToggle = document.querySelector('.theme-toggle');
+const themeToggleText = document.querySelector('.theme-toggle-text');
+
+let darkMode = false;
+
+// function inverter(elements) {
+// 	if (darkMode) {
+// 		elements.forEach(element => element.classList.add('invert'));
+// 	} else {
+// 		elements.forEach(element => element.classList.remove('invert'));
+// 	}
+// };
+
+function toggleTheme() {
+	darkMode = !darkMode;
+
+	if (darkMode) {
+		html.setAttribute('theme', 'dark');
+		themeToggleText.textContent = 'Dark Mode';
+		// themeToggleText.style.color = 'white';
+	} else {
+		html.setAttribute('theme', 'light');
+		themeToggleText.textContent = 'Light Mode';
+		// themeToggleText.style.color = 'black';
+	};
+};
+
+themeToggle.addEventListener('change', toggleTheme);