Adding dark / light mode toggle switch

TheWongLife · May 27, 2024 · 2329a93 · 2329a93
1 parent 22d7b12
commit 2329a93
Show file tree

Hide file tree

Showing 4 changed files with 104 additions and 8 deletions.
diff --git a/about.html b/about.html
@@ -14,13 +14,17 @@
         <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/devicon.min.css">
     </head>
 
-    <body>
+    <body data-bs-theme="dark">
+        <div class="form-check form-switch">
+            <input class="form-check-input" type="checkbox" id="darkModeSwitch" checked>
+            <label class="form-check-label" for="darkModeSwitch">Dark Mode</label>
+        </div>
         <nav class="navbar navbar-dark navbar-expand-lg bg-dark ">
             <div class="container-fluid">
                 <div class="mx-4">
                     <a class="navbar-brand" href="#"> 
                         <img src="Nicholas_Wong_Favicon.png" 
-                            height="60"> 
+                            height="50"> 
                     </a>
                 </div>
                 <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
@@ -109,6 +113,26 @@ <h3 align="center">Senior @ University of Illinois Urbana-Champaign (UIUC) major
         <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
             integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
             crossorigin="anonymous"></script>
+        <script>
+            document.addEventListener('DOMContentLoaded', (event) => {
+                const htmlElement = document.documentElement;
+                const switchElement = document.getElementById('darkModeSwitch');
+
+                const currentTheme = localStorage.getItem('bsTheme') || 'dark';
+                htmlElement.setAttribute('data-bs-theme', currentTheme);
+                switchElement.checked = currentTheme === 'dark';
+
+                switchElement.addEventListener('change', function () {
+                    if (this.checked) {
+                        htmlElement.setAttribute('data-bs-theme', 'dark');
+                        localStorage.setItem('bsTheme', 'dark');
+                    } else {
+                        htmlElement.setAttribute('data-bs-theme', 'light');
+                        localStorage.setItem('bsTheme', 'light');
+                    }
+                });
+            });
+        </script>
     </body>
 
 </html>
diff --git a/contact.html b/contact.html
@@ -14,13 +14,17 @@
         <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/devicon.min.css">
     </head>
 
-    <body>
+    <body data-bs-theme="dark">
+        <div class="form-check form-switch">
+            <input class="form-check-input" type="checkbox" id="darkModeSwitch" checked>
+            <label class="form-check-label" for="darkModeSwitch">Dark Mode</label>
+        </div>
         <nav class="navbar navbar-dark navbar-expand-lg bg-dark ">
             <div class="container-fluid">
                 <div class="mx-4">
                     <a class="navbar-brand" href="#"> 
                         <img src="Nicholas_Wong_Favicon.png" 
-                            height="60"> 
+                            height="50"> 
                     </a>
                 </div>
                 <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
@@ -109,6 +113,26 @@ <h1 class="text-center mt-5">How to contact me</h1>
         <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
             integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
             crossorigin="anonymous"></script>
+        <script>
+            document.addEventListener('DOMContentLoaded', (event) => {
+                const htmlElement = document.documentElement;
+                const switchElement = document.getElementById('darkModeSwitch');
+
+                const currentTheme = localStorage.getItem('bsTheme') || 'dark';
+                htmlElement.setAttribute('data-bs-theme', currentTheme);
+                switchElement.checked = currentTheme === 'dark';
+
+                switchElement.addEventListener('change', function () {
+                    if (this.checked) {
+                        htmlElement.setAttribute('data-bs-theme', 'dark');
+                        localStorage.setItem('bsTheme', 'dark');
+                    } else {
+                        htmlElement.setAttribute('data-bs-theme', 'light');
+                        localStorage.setItem('bsTheme', 'light');
+                    }
+                });
+            });
+        </script>
     </body>
 
 </html>
diff --git a/index.html b/index.html
@@ -14,13 +14,17 @@
         <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/devicon.min.css">
     </head>
 
-    <body>
+    <body data-bs-theme="dark">
+        <div class="form-check form-switch">
+            <input class="form-check-input" type="checkbox" id="darkModeSwitch" checked>
+            <label class="form-check-label" for="darkModeSwitch">Dark Mode</label>
+        </div>
         <nav class="navbar navbar-dark navbar-expand-lg bg-dark ">
             <div class="container-fluid">
                 <div class="mx-4">
                     <a class="navbar-brand" href="#"> 
                         <img src="Nicholas_Wong_Favicon.png" 
-                            height="60"> 
+                            height="50"> 
                     </a>
                 </div>
                 <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
@@ -160,6 +164,26 @@ <h4>Visual Studio Code</h4>
         <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
             integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
             crossorigin="anonymous"></script>
+        <script>
+            document.addEventListener('DOMContentLoaded', (event) => {
+                const htmlElement = document.documentElement;
+                const switchElement = document.getElementById('darkModeSwitch');
+
+                const currentTheme = localStorage.getItem('bsTheme') || 'dark';
+                htmlElement.setAttribute('data-bs-theme', currentTheme);
+                switchElement.checked = currentTheme === 'dark';
+
+                switchElement.addEventListener('change', function () {
+                    if (this.checked) {
+                        htmlElement.setAttribute('data-bs-theme', 'dark');
+                        localStorage.setItem('bsTheme', 'dark');
+                    } else {
+                        htmlElement.setAttribute('data-bs-theme', 'light');
+                        localStorage.setItem('bsTheme', 'light');
+                    }
+                });
+            });
+        </script>
     </body>
 
 </html>
diff --git a/resume.html b/resume.html
@@ -14,13 +14,17 @@
         <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/devicon.min.css">
     </head>
 
-    <body>
+    <body data-bs-theme="dark">
+        <div class="form-check form-switch">
+            <input class="form-check-input" type="checkbox" id="darkModeSwitch" checked>
+            <label class="form-check-label" for="darkModeSwitch">Dark Mode</label>
+        </div>
         <nav class="navbar navbar-dark navbar-expand-lg bg-dark ">
             <div class="container-fluid">
                 <div class="mx-4">
                     <a class="navbar-brand" href="#"> 
                         <img src="Nicholas_Wong_Favicon.png" 
-                            height="60"> 
+                            height="50"> 
                     </a>
                 </div>
                 <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
@@ -60,6 +64,26 @@
         <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
             integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
             crossorigin="anonymous"></script>
+        <script>
+            document.addEventListener('DOMContentLoaded', (event) => {
+                const htmlElement = document.documentElement;
+                const switchElement = document.getElementById('darkModeSwitch');
+
+                const currentTheme = localStorage.getItem('bsTheme') || 'dark';
+                htmlElement.setAttribute('data-bs-theme', currentTheme);
+                switchElement.checked = currentTheme === 'dark';
+
+                switchElement.addEventListener('change', function () {
+                    if (this.checked) {
+                        htmlElement.setAttribute('data-bs-theme', 'dark');
+                        localStorage.setItem('bsTheme', 'dark');
+                    } else {
+                        htmlElement.setAttribute('data-bs-theme', 'light');
+                        localStorage.setItem('bsTheme', 'light');
+                    }
+                });
+            });
+        </script>
     </body>
 
 </html>