From 9a1f5db45c5b1cb819239e16c315077494eef04f Mon Sep 17 00:00:00 2001
From: welpo <welpo@users.noreply.github.com>
Date: Thu, 16 Feb 2023 21:23:48 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20listen=20for=20changes=20on?=
 =?UTF-8?q?=20OS=20theme=20to=20switch=20accordingly=20As=20long=20as=20th?=
 =?UTF-8?q?e=20visitor=20has=20not=20changed=20the=20default=20theme,=20th?=
 =?UTF-8?q?e=20site=20will=20change=20between=20dark=20and=20light=20theme?=
 =?UTF-8?q?s=20matching=20the=20OS=20setting.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 static/js/main.js | 38 +++++++++++++++++++++-----------------
 1 file changed, 21 insertions(+), 17 deletions(-)

diff --git a/static/js/main.js b/static/js/main.js
index ab00e97..3a1af20 100644
--- a/static/js/main.js
+++ b/static/js/main.js
@@ -1,27 +1,31 @@
 const themeSwitcher = document.querySelector('.theme-switcher input');
-const currentTheme = localStorage.getItem('theme');
+let currentTheme = localStorage.getItem('theme');
+let userHasManuallyChangedTheme = currentTheme !== null;
+
+function setTheme(theme) {
+  document.documentElement.setAttribute('data-theme', theme);
+  themeSwitcher.checked = theme === 'dark';
+  localStorage.setItem('theme', theme);
+  currentTheme = theme;
+}
 
-// detect the user's preferred color scheme and activate it
 if (currentTheme) {
-    document.documentElement.setAttribute( 'data-theme', currentTheme);
-    themeSwitcher.checked = currentTheme === 'dark';
+  setTheme(currentTheme);
 } else {
-    const isSystemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-    document.documentElement.setAttribute( 'data-theme', isSystemDark? 'dark' : 'light');
-    themeSwitcher.checked = isSystemDark;
+  const isSystemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+  setTheme(isSystemDark ? 'dark' : 'light');
 }
 
-// switch between themes
 function switchTheme(e) {
-    if (e.target.checked) {
-        document.documentElement.setAttribute('data-theme', 'dark');
-        localStorage.setItem('theme', 'dark');
-    }
-    else {
-        document.documentElement.setAttribute('data-theme', 'light');
-        localStorage.setItem('theme', 'light');
-    }
+  const newTheme = e.target.checked ? 'dark' : 'light';
+  setTheme(newTheme);
+  userHasManuallyChangedTheme = true;
 }
 
-// event listener on checkbox change
 themeSwitcher.addEventListener('change', switchTheme, false);
+
+window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
+  if (!userHasManuallyChangedTheme) {
+    setTheme(e.matches ? 'dark' : 'light');
+  }
+});