From 24412dcf8fa8c1cdf44a620309ee8b5c05017f21 Mon Sep 17 00:00:00 2001
From: Dawid Potocki <dpot@disroot.org>
Date: Sat, 31 Aug 2019 22:30:53 +0000
Subject: [PATCH] Reduce flickering with dark/light theme (#1241)

---
 _includes/scripts.html  |  2 +-
 _layouts/minimal.html   |  1 +
 assets/js/applytheme.js |  6 ++++++
 assets/js/main.js       | 39 ++++++++++++++++++++-------------------
 4 files changed, 28 insertions(+), 20 deletions(-)
 create mode 100644 assets/js/applytheme.js
diff --git a/_includes/scripts.html b/_includes/scripts.html
index d55f2c76..b5ed2d18 100644
--- a/_includes/scripts.html
+++ b/_includes/scripts.html
@@ -2,7 +2,7 @@
 <script src="/assets/js/popper.min.js?v=4"></script>
 <script src="/assets/js/bootstrap.min.js?v=4"></script>
 <script src="/assets/js/sortable.min.js?v=4"></script>
-<script src="/assets/js/main.js?v=2"></script>
+<script src="/assets/js/main.js?v=3"></script>
 
 <!--
   Matomo is the leading open-source analytics platform:
diff --git a/_layouts/minimal.html b/_layouts/minimal.html
index 1061dc36..470aa55f 100644
--- a/_layouts/minimal.html
+++ b/_layouts/minimal.html
@@ -2,6 +2,7 @@
 <html lang="en">
 {% include head.html %}
 <body data-spy="scroll" data-target="#navbar">
+  <script src="/assets/js/applytheme.js?v=1"></script>
   <header>
   {% include nav.html %}
   <div id="top" class="py-4"></div>
diff --git a/assets/js/applytheme.js b/assets/js/applytheme.js
new file mode 100644
index 00000000..1392dd66
--- /dev/null
+++ b/assets/js/applytheme.js
@@ -0,0 +1,6 @@
+if (localStorage.getItem("colorScheme") === "dark") {
+  document.querySelector("#dark-css").removeAttribute("media"); // Set dark theme
+}
+else if (localStorage.getItem("colorScheme") === "light") {
+  document.querySelector("#dark-css").setAttribute("media", "invalid"); // Set light theme
+}
diff --git a/assets/js/main.js b/assets/js/main.js
index 9e04c387..67738c1a 100644
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -29,29 +29,31 @@ function navSectionsClose(event) {
 
 
 // Dark/Light color scheme switch button
-document.querySelector("#nav-switch-theme").style.display = "inline"
-
-if (localStorage.getItem("colorScheme") === "dark") {
-  document.querySelector("#dark-css").removeAttribute("media"); // Set dark theme
-}
-else if (localStorage.getItem("colorScheme") === "light") {
-  document.querySelector("#dark-css").setAttribute("media", "invalid"); // Set light theme
-}
+document.querySelector("#nav-switch-theme").style.display = "inline";
 
 function changeColorScheme() {
-
   // Use whatever users want
   if (localStorage.getItem("colorScheme") === "dark") {
     // Change to light theme
-    // by setting invalid media it will just not apply CSS for anyone
-    document.querySelector("#dark-css").setAttribute("media", "invalid");
-    localStorage.setItem("colorScheme", "light");
+    if (window.matchMedia("(prefers-color-scheme: dark)").matches === false) {
+      document.querySelector("#dark-css").setAttribute("media", "(prefers-color-scheme: dark)");
+      localStorage.removeItem("colorScheme");
+    } else {
+      // by setting invalid media it will just not apply CSS for anyone
+      document.querySelector("#dark-css").setAttribute("media", "invalid");
+      localStorage.setItem("colorScheme", "light");
+    }
   }
+  // Change to dark theme
   else if (localStorage.getItem("colorScheme") === "light") {
-    // Change to dark theme
-    // media was set to prefers-color-scheme: dark
-    document.querySelector("#dark-css").removeAttribute("media");
-    localStorage.setItem("colorScheme", "dark");;
+    if (window.matchMedia("(prefers-color-scheme: dark)").matches === true) {
+      document.querySelector("#dark-css").setAttribute("media", "(prefers-color-scheme: dark)");
+      localStorage.removeItem("colorScheme");
+    } else {
+      // media was set to prefers-color-scheme: dark
+      document.querySelector("#dark-css").removeAttribute("media");
+      localStorage.setItem("colorScheme", "dark");
+    }
   }
 
   // Just use whatever browsers want
@@ -59,11 +61,10 @@ function changeColorScheme() {
     // Change to light Theme
     document.querySelector("#dark-css").setAttribute("media", "invalid");
     localStorage.setItem("colorScheme", "light");
-  }
-  else {
+  } else {
     // Change to dark theme
     document.querySelector("#dark-css").removeAttribute("media");
-    localStorage.setItem("colorScheme", "dark");;
+    localStorage.setItem("colorScheme", "dark");
   }
 }
 
