From a3045a3953c5446887ae2057383023bf35c26253 Mon Sep 17 00:00:00 2001
From: Kyle Copperfield <kmcopper@danwin1210.me>
Date: Mon, 2 Mar 2020 15:33:47 +0000
Subject: [PATCH] Use a MediaQueryListener to toggle on demand. Tested on OSX.
 (#925)

Closes #867.
---
 assets/js/themes.js | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/assets/js/themes.js b/assets/js/themes.js
index 90a05c36..c600073d 100644
--- a/assets/js/themes.js
+++ b/assets/js/themes.js
@@ -28,6 +28,27 @@ window.addEventListener('load', function () {
     update_mode(window.localStorage.dark_mode);
 });
 
+
+var darkScheme = window.matchMedia('(prefers-color-scheme: dark)');
+var lightScheme = window.matchMedia('(prefers-color-scheme: light)');
+
+darkScheme.addListener(scheme_switch);
+lightScheme.addListener(scheme_switch);
+
+function scheme_switch (e) {
+  // ignore this method if we have a preference set
+  if (localStorage.getItem('dark_mode')) {
+    return;
+  }
+  if (e.matches) {
+    if (e.media.includes("dark")) {
+      set_mode(true);
+    } else if (e.media.includes("light")) {
+      set_mode(false);
+    }
+  }
+}
+
 function set_mode (bool) {
     document.getElementById('dark_theme').media = !bool ? 'none' : '';
     document.getElementById('light_theme').media = bool ? 'none' : '';