feat: *reactive* dark mode!

Make dark mode reactive and automatically updates when the user changes their *system* color scheme!

References:

1. https://web.dev/prefers-color-scheme/#reacting-on-dark-mode-changes
2. https://twitter.com/ChromeDevTools/status/1197175265643745282
3. https://www.freecodecamp.org/news/how-to-detect-a-users-preferred-color-scheme-in-javascript-ec8ee514f1ef/

assets/js/dark-mode.js

@@ -13,27 +13,51 @@ if (theme === "dark") {
     goLight();
 } else if (userPrefers === "dark") {
     goDarkMeta();
-    window.localStorage.setItem('theme', 'dark');
+    setDark();
     goDark();
 } else if (userPrefers === "light") {
     goLightMeta();
-    window.localStorage.setItem('theme', 'light');
+    setLight();
     goLight();
 }
 
 function modeSwitcher() {
     const currentMode = document.documentElement.getAttribute('data-theme');
     if (currentMode === "dark") {
         goLightMeta();
-        window.localStorage.setItem('theme', 'light');
+        setLight();
         goLight();
     } else {
         goDarkMeta();
-        window.localStorage.setItem('theme', 'dark');
+        setDark();
         goDark();
     }
 }
 
+// Reactive Dark Mode
+// https://web.dev/prefers-color-scheme/#reacting-on-dark-mode-changes
+// https://twitter.com/ChromeDevTools/status/1197175265643745282
+
+const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+darkModeMediaQuery.addListener((e) => {
+    const darkModeOn = e.matches;
+    if (darkModeOn) {
+        goDarkMeta();
+        setDark();
+        goDark();
+    }
+});
+
+const lightModeMediaQuery = window.matchMedia('(prefers-color-scheme: light)');
+lightModeMediaQuery.addListener((e) => {
+    const lightModeOn = e.matches;
+    if (lightModeOn) {
+        goLightMeta();
+        setLight();
+        goLight();
+    }
+});
+
 // Sync Across Tabs
 // https://codepen.io/tevko/pen/GgWYpg
 
@@ -59,6 +83,14 @@ function goLightMeta() {
     document.querySelector('meta[name="theme-color"]').setAttribute('content', '{{ $themeColor }}');
 }
 
+function setDark() {
+    window.localStorage.setItem('theme', 'dark');
+}
+
+function setLight() {
+    window.localStorage.setItem('theme', 'light');
+}
+
 function goDark() {
     document.getElementById("theme-toggle").innerHTML = "🌙";