feat: add prefers-color-scheme

DenverCoder1 · May 7, 2021 · 3b85c5d · 3b85c5d
1 parent 8c0faa1
commit 3b85c5d
Showing 1 changed file with 24 additions and 11 deletions.
diff --git a/src/demo/js/toggle-dark.js b/src/demo/js/toggle-dark.js
@@ -1,19 +1,32 @@
+const icon = document.querySelector(".darkmode i");
+if (window.matchMedia("(prefers-color-scheme: dark)").matches == true) {
+  darkmode();
+} else {
+  lightmode();
+}
+
 function toggleTheme() {
-  const icon = document.querySelector(".darkmode i");
-  /* dark mode on */
   if (document.body.getAttribute("data-theme") !== "dark") {
-    icon.className = "gg-sun";
-    setCookie("darkmode", "on", 9999);
-    document.body.setAttribute("data-theme", "dark");
-  }
-  /* dark mode off */
-  else {
-    icon.className = "gg-moon";
-    setCookie("darkmode", "off", 9999);
-    document.body.removeAttribute("data-theme");
+    /* dark mode on */
+    darkmode();
+  } else {
+    /* dark mode off */
+    lightmode();
   }
 }
 
+function darkmode() {
+  icon.className = "gg-sun";
+  setCookie("darkmode", "on", 9999);
+  document.body.setAttribute("data-theme", "dark");
+}
+
+function lightmode() {
+  icon.className = "gg-moon";
+  setCookie("darkmode", "off", 9999);
+  document.body.removeAttribute("data-theme");
+}
+
 function setCookie(cname, cvalue, exdays) {
   var d = new Date();
   d.setTime(d.getTime() + exdays * 24 * 60 * 60 * 1000);