make dark as default theme

When user visit at the first time, it will use dark theme.
ardianta · Jul 24, 2021 · 9fad4b9 · 9fad4b9
1 parent d16fc36
commit 9fad4b9
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 18 deletions.
diff --git a/dark-mode-switch.js b/dark-mode-switch.js
@@ -4,7 +4,7 @@
  * Licensed under MIT (https://github.com/coliff/dark-mode-switch/blob/main/LICENSE)
  */
 
-var darkSwitch = document.getElementById("darkSwitch");
+const darkSwitch = document.getElementById("darkSwitch");
 window.addEventListener("load", function () {
   if (darkSwitch) {
     initTheme();
@@ -26,13 +26,9 @@ window.addEventListener("load", function () {
  * @return {void}
  */
 function initTheme() {
-  var darkThemeSelected =
+  const currentTheme = localStorage.getItem("darkSwitch") || document.body.getAttribute('data-theme');
-    localStorage.getItem("darkSwitch") !== null &&
+  darkSwitch.checked = currentTheme === 'dark';
-    localStorage.getItem("darkSwitch") === "dark";
+  document.body.setAttribute('data-theme', currentTheme);
-  darkSwitch.checked = darkThemeSelected;
-  darkThemeSelected
-    ? document.body.setAttribute("data-theme", "dark")
-    : document.body.removeAttribute("data-theme");
 }
 
 /**
@@ -42,11 +38,6 @@ function initTheme() {
  * @return {void}
  */
 function resetTheme() {
-  if (darkSwitch.checked) {
+  document.body.setAttribute("data-theme", darkSwitch.checked ? "dark" : "light");
-    document.body.setAttribute("data-theme", "dark");
+  localStorage.setItem("darkSwitch", darkSwitch.checked ? "dark" : "light");
-    localStorage.setItem("darkSwitch", "dark");
-  } else {
-    document.body.removeAttribute("data-theme");
-    localStorage.removeItem("darkSwitch");
-  }
 }
diff --git a/index.html b/index.html
@@ -10,7 +10,7 @@
 
   <link rel="icon"
     href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2280%22>🌓</text></svg>">
-  
+
   <meta property="og:site_name" content="GitHub">
   <meta property="og:image"
     content="https://repository-images.githubusercontent.com/194995309/38db8f80-9db7-11e9-998f-43f2a26d9e0b">
@@ -31,7 +31,7 @@
 
 </head>
 
-<body class="bg-white text-center d-flex h-100">
+<body class="bg-white text-center d-flex h-100" data-theme="dark">
 
   <div class="container d-flex p-3 mx-auto w-100 flex-column">
     <header class="mb-auto">
@@ -45,7 +45,7 @@
             <input type="checkbox" class="form-check-input" id="darkSwitch">
             <label class="custom-control-label" for="darkSwitch">Dark Mode</label>
           </div>
-          <script src="dark-mode-switch.min.js"></script>
+          <script src="dark-mode-switch.js"></script>
 
         </div>
       </nav>