From c11cd31f39056d47cdd354e6796dcc2bc4c7b921 Mon Sep 17 00:00:00 2001
From: popoway <31576265+popoway@users.noreply.github.com>
Date: Mon, 2 Dec 2019 16:01:34 -0500
Subject: [PATCH] Detect if user has prefers-dark-mode setting on

Attempt to fulfill issue #2
---
 dark-mode-switch.js | 14 ++++++++++++--
 index.html          |  2 +-
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/dark-mode-switch.js b/dark-mode-switch.js
index aa34359..73796ce 100644
--- 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
index b7c6c3e..a9973c3 100644
--- 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>