fix: 🐛 fixed issue with dark mode when refreshing the page

WasiqB · Feb 21, 2025 · 4f8091a · 4f8091a
1 parent c689ace
commit 4f8091a
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 27 deletions.
diff --git a/templates/assets/js/darkmode.js b/templates/assets/js/darkmode.js
@@ -1,11 +1,11 @@
 var darkMode = "darkmode";
 
 function applyDarkMode() {
-  document.getElementById("features-table").classList.toggle("table-striped");
   applyFontStyle();
   document
     .querySelector("html")
     .setAttribute("data-bs-theme", isDarkModeOn() ? "dark" : "light");
+  document.getElementById("features-table").classList.toggle("table-striped");
 }
 
 function saveState() {
@@ -29,5 +29,8 @@ window.onload = function () {
   if (window.localStorage["darkmode"] === "on") {
     applyDarkMode();
     document.getElementById("darkCheck").checked = true;
+    document
+      .querySelector("html")
+      .setAttribute("data-bs-theme", isDarkModeOn() ? "dark" : "light");
   }
 };
diff --git a/templates/feature-overview.index.tmpl b/templates/feature-overview.index.tmpl
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
+    <script src="../assets/js/darkmode.js"></script>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     <!-- Meta, title, CSS, favicons, etc. -->
     <meta charset="utf-8">
@@ -40,10 +41,6 @@
 
             <link href="../assets/css/font-awesome.min.css" rel="stylesheet">
     <% } %>
-    <!-- Darkmode -->
-    <script>
-        <%= darkmodeScript %>
-    </script>
 
     <!-- Custom Theme Style -->
     <style type="text/css">
@@ -52,13 +49,6 @@
     </style>
 </head>
 <body>
-    <script type="text/javascript">
-        window.onload = function() {
-            if(window.localStorage['darkmode'] === 'on') {
-                applyFontStyle();
-            }
-        }
-    </script>
     <nav class="navbar">
         <div class="container-fluid">
 
@@ -156,11 +146,11 @@
 
     <% if (!pageFooter) { %>
         <div class="created-by">
-            <p>Created by wswebcreation. Find me on:</p>
-            <a href="http://www.wswebcreation.nl/" target="_blank"><i class="fa fa-rss-square fa-2x"></i></a>
-            <a href="https://github.com/wswebcreation/" target="_blank"><i class="fa fa-github-square fa-2x"></i></a>
-            <a href="http://nl.linkedin.com/in/wimselles" target="_blank"><i class="fa fa-linkedin-square fa-2x"></i></a>
-            <a href="http://stackoverflow.com/users/5911978/wswebcreation" target="_blank"><i class="fa fa-stack-overflow fa-2x"></i></a>
+            <p>Maintained by Wasiq Bhamla. Find me on:</p>
+            <a href="https://www.youtube.com/@WasiqBhamla" target="_blank"><i class="fa fa-rss-square fa-2x"></i></a>
+            <a href="https://github.com/WasiqB/" target="_blank"><i class="fa fa-github-square fa-2x"></i></a>
+            <a href="https://www.linkedin.com/in/wasiqbhamla/" target="_blank"><i class="fa fa-linkedin-square fa-2x"></i></a>
+            <a href="https://stackoverflow.com/users/5320558/wasiq-bhamla" target="_blank"><i class="fa fa-stack-overflow fa-2x"></i></a>
         </div>
     <% } else { %>
         <%= pageFooter %>

diff --git a/templates/features-overview.index.tmpl b/templates/features-overview.index.tmpl
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
     <head>
+        <script src="assets/js/darkmode.js"></script>
         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
         <!-- Meta, title, CSS, favicons, etc. -->
         <meta charset="utf-8">
@@ -89,11 +90,11 @@
         </div>
          <% if (!pageFooter) { %>
             <div class="created-by">
-                <p>Created by wswebcreation. Find me on:</p>
-                <a href="http://www.wswebcreation.nl/" target="_blank"><i class="fa fa-rss-square fa-2x"></i></a>
-                <a href="https://github.com/wswebcreation/" target="_blank"><i class="fa fa-github-square fa-2x"></i></a>
-                <a href="http://nl.linkedin.com/in/wimselles" target="_blank"><i class="fa fa-linkedin-square fa-2x"></i></a>
-                <a href="http://stackoverflow.com/users/5911978/wswebcreation" target="_blank"><i class="fa fa-stack-overflow fa-2x"></i></a>
+                <p>Maintained by Wasiq Bhamla. Find me on:</p>
+                <a href="https://www.youtube.com/@WasiqBhamla" target="_blank"><i class="fa fa-rss-square fa-2x"></i></a>
+                <a href="https://github.com/WasiqB/" target="_blank"><i class="fa fa-github-square fa-2x"></i></a>
+                <a href="https://www.linkedin.com/in/wasiqbhamla/" target="_blank"><i class="fa fa-linkedin-square fa-2x"></i></a>
+                <a href="https://stackoverflow.com/users/5320558/wasiq-bhamla" target="_blank"><i class="fa fa-stack-overflow fa-2x"></i></a>
             </div>
          <% } else { %>
                 <%= pageFooter %>
@@ -122,11 +123,6 @@
             <script src="assets/js/responsive.bootstrap5.js"></script>
         <% } %>
 
-        <!-- Darkmode -->
-        <script>
-            <%= darkmodeScript %>
-        </script>
-
         <!-- Custom -->
         <script>
             $(document).ready(function () {