1 files changed, 29 insertions, 53 deletions

diff --git a/assets/js/themes.js b/assets/js/themes.js
index 7e86e9ac..eedf63a4 100644
--- a/assets/js/themes.js
+++ b/assets/js/themes.js
@@ -2,58 +2,39 @@
 var toggle_theme = document.getElementById('toggle_theme');
 toggle_theme.href = 'javascript:void(0)';
 
-toggle_theme.addEventListener('click', function () {
-    var dark_mode = document.body.classList.contains('light-theme');
-
-    set_mode(dark_mode);
-    helpers.storage.set('dark_mode', dark_mode ? 'dark' : 'light');
+const STORAGE_KEY_THEME = 'dark_mode';
+const THEME_DARK = 'dark';
+const THEME_LIGHT = 'light';
+const THEME_SYSTEM = '';
 
+// TODO: theme state controlled by system
+toggle_theme.addEventListener('click', function () {
+    const isDarkTheme = helpers.storage.get(STORAGE_KEY_THEME) === THEME_DARK;
+    setTheme(isDarkTheme ? THEME_LIGHT : THEME_DARK);
     helpers.xhr('GET', '/toggle_theme?redirect=false', {}, {});
 });
 
-// Handles theme change event caused by other tab
-addEventListener('storage', function (e) {
-    if (e.key === 'dark_mode') {
-        update_mode(e.newValue);
-    }
-});
 
-addEventListener('DOMContentLoaded', function () {
-    const dark_mode = document.getElementById('dark_mode_pref').textContent;
-    // Update storage if dark mode preference changed on preferences page
-    helpers.storage.set('dark_mode', dark_mode);
-    update_mode(dark_mode);
+// Ask system about dark theme
+var systemDarkTheme = matchMedia('(prefers-color-scheme: dark)');
+systemDarkTheme.addListener(function () {
+    // Ignore system events if theme set manually
+    if (!helpers.storage.get(STORAGE_KEY_THEME))
+        setTheme(THEME_SYSTEM);
 });
 
 
-var darkScheme = matchMedia('(prefers-color-scheme: dark)');
-var lightScheme = 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 (helpers.storage.get('dark_mode')) return;
-
-    if (!e.matches) return;
-
-    if (e.media.includes('dark')) {
-        set_mode(true);
-    } else if (e.media.includes('light')) {
-        set_mode(false);
-    }
-}
+/** @param {THEME_DARK|THEME_LIGHT|THEME_SYSTEM} theme */
+function setTheme(theme) {
+    if (theme !== THEME_SYSTEM)
+        helpers.storage.set(STORAGE_KEY_THEME, theme);
 
-function set_mode (bool) {
-    if (bool) {
-        // dark
+    if (theme === THEME_DARK || (theme === THEME_SYSTEM && systemDarkTheme.matches)) {
         toggle_theme.children[0].setAttribute('class', 'icon ion-ios-sunny');
         document.body.classList.remove('no-theme');
         document.body.classList.remove('light-theme');
         document.body.classList.add('dark-theme');
     } else {
-        // light
         toggle_theme.children[0].setAttribute('class', 'icon ion-ios-moon');
         document.body.classList.remove('no-theme');
         document.body.classList.remove('dark-theme');
@@ -61,18 +42,13 @@ function set_mode (bool) {
     }
 }
 
-function update_mode (mode) {
-    if (mode === 'true' /* for backwards compatibility */ || mode === 'dark') {
-        // If preference for dark mode indicated
-        set_mode(true);
-    }
-    else if (mode === 'false' /* for backwards compatibility */ || mode === 'light') {
-        // If preference for light mode indicated
-        set_mode(false);
-    }
-    else if (document.getElementById('dark_mode_pref').textContent === '' && matchMedia('(prefers-color-scheme: dark)').matches) {
-        // If no preference indicated here and no preference indicated on the preferences page (backend), but the browser tells us that the operating system has a dark theme
-        set_mode(true);
-    }
-    // else do nothing, falling back to the mode defined by the `dark_mode` preference on the preferences page (backend)
-}
+// Handles theme change event caused by other tab
+addEventListener('storage', function (e) {
+    if (e.key === STORAGE_KEY_THEME) setTheme(e.newValue);
+});
+
+// Set theme from preferences on page load
+addEventListener('DOMContentLoaded', function () {
+    const prefTheme = document.getElementById('dark_mode_pref').textContent;
+    setTheme(prefTheme);
+});