Detect if user has prefers-dark-mode setting on

Attempt to fulfill issue coliff#2
popoway · Dec 2, 2019 · c11cd31 · c11cd31 · rugk · Jan 18, 2021
1 parent 24a432f
commit c11cd31
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 3 deletions.
diff --git a/dark-mode-switch.js b/dark-mode-switch.js
@@ -21,12 +21,22 @@ window.addEventListener('load', () => {
  * @return {void}
  */
 function initTheme() {
+  const systemPrefersDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches;
   const darkThemeSelected =
     localStorage.getItem('darkSwitch') !== null &&
     localStorage.getItem('darkSwitch') === 'dark';
-  darkSwitch.checked = darkThemeSelected;
-  darkThemeSelected ? document.body.setAttribute('data-theme', 'dark') :
+  if (darkThemeSelected) {
+    darkSwitch.checked = true;
+    document.body.setAttribute('data-theme', 'dark');
+  }
+  else if (systemPrefersDarkMode) {
+    darkSwitch.checked = true;
+    document.body.setAttribute('data-theme', 'dark');
+  }
+  else {
+    darkSwitch.checked = false;
     document.body.removeAttribute('data-theme');
+  }
 }
 
 

diff --git a/index.html b/index.html
@@ -34,7 +34,7 @@ <h3 class="float-left">Dark Mode Switch</h3>
             <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>