diff --git a/index.html b/index.html
index a5e2472..9fda82a 100644
--- a/index.html
+++ b/index.html
@@ -52,7 +52,7 @@
     <p>
       In fact, try resizing this page. Everything flows super nicely as you'll see.
     </p>
-    <button id='switch'>Switch theme</button>
+    <button type="button" id='switch'>Switch theme</button>
 
     <h2>Element demos</h2>
     <p>
diff --git a/script.js b/script.js
index 4f64f80..e7c36cc 100644
--- a/script.js
+++ b/script.js
@@ -1,4 +1,36 @@
-document.getElementById('switch').addEventListener('click', function() {
+(function () {
+  const switchBtn = document.getElementById('switch');
   const stylesheet = document.getElementById('stylesheet');
-  stylesheet.href = stylesheet.href.replace(/dark|light/, function(replaced) { return replaced === 'dark' ? 'light' : 'dark' });
-});
\ No newline at end of file
+  const mql = matchMedia('(prefers-color-scheme: dark)');
+  const themes = {
+    dark: '../dist/dark.css',
+    darkStandalone: '../dist/dark.standalone.css',
+    light: '../dist/light.css',
+    lightStandalone: '../dist/light.standalone.css'
+  };
+
+  switchBtn.addEventListener('click', function() {
+    switch (stylesheet.getAttribute('href')) {
+      case themes.dark:
+        stylesheet.href = mql.matches ? themes.lightStandalone : themes.darkStandalone;
+        break;
+      case themes.darkStandalone:
+        stylesheet.href = themes.lightStandalone;
+        break;
+      case themes.light || themes.lightStandalone:
+        stylesheet.href = mql.matches ? themes.lightStandalone : themes.darkStandalone;
+        break;
+      case themes.lightStandalone:
+        stylesheet.href = themes.darkStandalone;
+        break;
+    }
+  });
+
+  mql.addListener(function (mql) {
+    if (mql.matches) {
+      stylesheet.href = themes.dark;
+    } else {
+      stylesheet.href = themes.light;
+    }
+  })
+})();