Solved flickering bug for dark mode and added script to head

coliff · Aug 26, 2020 · 5fd8d89 · 5fd8d89
1 parent 00e0ed3
commit 5fd8d89
Show file tree

Hide file tree

Showing 4 changed files with 76 additions and 26 deletions.
diff --git a/dark-mode-switch.js b/dark-mode-switch.js
@@ -1,5 +1,21 @@
-const darkSwitch = document.getElementById('darkSwitch');
+// Global darkSwitch
+var darkSwitch = null;
+
+/**
+ * Execute at the beginning of the document
+ * If this is placed in <head> there will be no flickering
+ */
+(function () {
+  const darkThemeSelected =
+    localStorage.getItem('darkSwitch') !== null &&
+    localStorage.getItem('darkSwitch') === 'dark';
+
+  darkThemeSelected ? applyBackgroundTheme("dark") : applyBackgroundTheme("light");
+})();
+
+// Initialize js theme controls after document load
 window.addEventListener('load', () => {
+  darkSwitch = document.getElementById('darkSwitch');
   if (darkSwitch) {
     initTheme();
     darkSwitch.addEventListener('change', () => {
@@ -25,23 +41,74 @@ function initTheme() {
     localStorage.getItem('darkSwitch') !== null &&
     localStorage.getItem('darkSwitch') === 'dark';
   darkSwitch.checked = darkThemeSelected;
-  darkThemeSelected ? document.body.setAttribute('data-theme', 'dark') :
-    document.body.removeAttribute('data-theme');
 }
 
 
 /**
  * Summary: resetTheme checks if the switch is 'on' or 'off' and if it is toggled
- * on it will set the HTML attribute 'data-theme' to dark so the dark-theme CSS is
+ * on it will set a style with the appropriate background
  * applied.
  * @return {void}
  */
 function resetTheme() {
   if (darkSwitch.checked) {
-    document.body.setAttribute('data-theme', 'dark');
+    applyBackgroundTheme('dark');
     localStorage.setItem('darkSwitch', 'dark');
   } else {
-    document.body.removeAttribute('data-theme');
+    applyBackgroundTheme('light');
     localStorage.removeItem('darkSwitch');
   }
 }
+
+/**
+ * Apply the stylesheet with the appropriate theme
+ * @param {*} color 
+ */
+function applyBackgroundTheme(color) {
+  // CSS for dark mode
+  var cssDark = `body {
+    background-color: #111 !important;
+    color: #eee;
+  }
+  
+  .bg-light {
+    background-color: #333 !important;
+  }
+  
+  .bg-white {
+    background-color: #000 !important;
+  }
+  
+  .bg-black {
+    background-color: #eee !important;
+  }`;
+
+  // CSS for light mode
+  var cssLight = `body {
+    background-color: #f2f2f2 !important;
+    color: #212529;
+  }
+  
+  .bg-light {
+    background-color: #f8f9fa !important;
+  }
+  
+  .bg-white {
+    background-color: #fff !important;
+  }
+  
+  .bg-black {
+    background-color: #eee !important;
+  }`;
+
+  head = document.head || document.getElementsByTagName('head')[0];
+  style = document.createElement('style');
+  head.appendChild(style);
+
+  style.type = 'text/css';
+  if (style.styleSheet) {
+    style.styleSheet.cssText = color === 'dark' ? cssDark : cssLight;
+  } else {
+    style.appendChild(document.createTextNode(color === 'dark' ? cssDark : cssLight));
+  }
+}
diff --git a/dark-mode-switch.min.js b/dark-mode-switch.min.js
diff --git a/dark-mode.css b/dark-mode.css
diff --git a/index.html b/index.html
@@ -17,7 +17,8 @@
   <link rel="author" href="https://christianoliff.com/">
 
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
-  <link rel="stylesheet" href="dark-mode.css">
+
+  <script src="dark-mode-switch.min.js"></script>
 
 </head>
 
@@ -35,8 +36,6 @@ <h3 class="float-left">Dark Mode Switch</h3>
             <input type="checkbox" class="custom-control-input" id="darkSwitch">
             <label class="custom-control-label" for="darkSwitch">Dark Mode</label>
           </div>
-          <script src="dark-mode-switch.min.js"></script>
-
 
         </div>
       </nav>