From e03738a62099ecd38a2cd4651df021f5ffc54352 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sun, 15 Feb 2026 01:44:31 +0000 Subject: [PATCH 1/4] Initial plan From d8dc90a3c92d2a31cf5e3d45a2c1ad2f356d4de1 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sun, 15 Feb 2026 01:46:48 +0000 Subject: [PATCH 2/4] Implement dark/light theme auto-detection feature - Add detectSystemTheme() function to detect prefers-color-scheme - Auto-detect system theme on first visit (no saved preference) - Add "Auto (System)" option to theme menu - Support dynamic theme switching when system preference changes - Maintain backward compatibility with existing theme preferences Co-authored-by: thehack904 <35552907+thehack904@users.noreply.github.com> --- static/js/theme.js | 54 ++++++++++++++++++++++++++++++++++++++++-- templates/_header.html | 2 ++ templates/base.html | 20 +++++++++++++++- 3 files changed, 73 insertions(+), 3 deletions(-) diff --git a/static/js/theme.js b/static/js/theme.js index f837aeb..ef61bae 100644 --- a/static/js/theme.js +++ b/static/js/theme.js @@ -2,6 +2,18 @@ 'use strict'; var STORAGE_KEY = 'theme'; + // Detect system color scheme preference + function detectSystemTheme() { + try { + if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) { + return 'dark'; + } else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches) { + return 'light'; + } + } catch (e) { /* ignore */ } + return 'light'; // default fallback + } + function setHtmlAndBodyTheme(name) { try { if (name) { @@ -26,8 +38,15 @@ function applyTheme(name) { if (!name) return; - setHtmlAndBodyTheme(name); - try { localStorage.setItem(STORAGE_KEY, name); } catch (e) {} + + // Handle 'auto' theme - detect system preference + var actualTheme = name; + if (name === 'auto') { + actualTheme = detectSystemTheme(); + } + + setHtmlAndBodyTheme(actualTheme); + try { localStorage.setItem(STORAGE_KEY, name); } catch (e) {} // Store user choice (including 'auto') // If TV Guide (Classic) selected, ensure auto-scroll is turned off and disabled. // We set localStorage autoScrollEnabled to 'false' and call any available auto-scroll API. @@ -104,7 +123,38 @@ try { saved = localStorage.getItem(STORAGE_KEY); } catch (e) {} if (saved) { setTheme(saved); + } else { + // No saved preference - auto-detect system preference + var systemTheme = detectSystemTheme(); + setHtmlAndBodyTheme(systemTheme); } } catch (e) { /* ignore */ } }); + + // Listen for system theme changes and update if 'auto' is selected + try { + if (window.matchMedia) { + var darkModeQuery = window.matchMedia('(prefers-color-scheme: dark)'); + var lightModeQuery = window.matchMedia('(prefers-color-scheme: light)'); + + var updateAutoTheme = function() { + try { + var saved = localStorage.getItem(STORAGE_KEY); + if (saved === 'auto' || !saved) { + var systemTheme = detectSystemTheme(); + setHtmlAndBodyTheme(systemTheme); + } + } catch (e) { /* ignore */ } + }; + + // Use addEventListener if available, otherwise use addListener + if (darkModeQuery.addEventListener) { + darkModeQuery.addEventListener('change', updateAutoTheme); + lightModeQuery.addEventListener('change', updateAutoTheme); + } else if (darkModeQuery.addListener) { + darkModeQuery.addListener(updateAutoTheme); + lightModeQuery.addListener(updateAutoTheme); + } + } + } catch (e) { /* ignore */ } })(); diff --git a/templates/_header.html b/templates/_header.html index 57e7253..9ecd347 100644 --- a/templates/_header.html +++ b/templates/_header.html @@ -33,6 +33,7 @@
  • Themes