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');
+  }
+});