Implement system theme auto-detection via prefers-color-scheme

static/js/theme.js

@@ -2,6 +2,16 @@
   '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';
+      }
+    } catch (e) { /* ignore */ }
+    return 'light'; // default fallback
+  }
+
   function setHtmlAndBodyTheme(name) {
     try {
       if (name) {
@@ -26,8 +36,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 +121,35 @@
       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 updateAutoTheme = function() {
+        try {
+          var saved = localStorage.getItem(STORAGE_KEY);
+          if (saved === 'auto') {
+            var systemTheme = detectSystemTheme();
+            setHtmlAndBodyTheme(systemTheme);
+          }
+        } catch (e) { /* ignore */ }
+      };
+
+      // Use addEventListener if available, otherwise use addListener
+      if (darkModeQuery.addEventListener) {
+        darkModeQuery.addEventListener('change', updateAutoTheme);
+      } else if (darkModeQuery.addListener) {
+        darkModeQuery.addListener(updateAutoTheme);
+      }
+    }
+  } catch (e) { /* ignore */ }
 })();

templates/_header.html

@@ -33,6 +33,7 @@
               <li class="submenu">
                 <a href="#">Themes</a>
                 <ul class="submenu-content">
+                  <li><a href="#" data-theme-selector data-theme="auto">Auto (System)</a></li>
                   <li><a href="#" data-theme-selector data-theme="retroiptv">RetroIPTV</a></li>
                   <li><a href="#" data-theme-selector data-theme="light">Light</a></li>
                   <li><a href="#" data-theme-selector data-theme="dark">Dark</a></li>
@@ -123,6 +124,7 @@
             </button>
 
             <ul id="mobileThemesListNested" class="mobile-submenu-list" role="menu" aria-hidden="true">
+              <li role="none"><a role="menuitem" href="#" data-theme-selector data-theme="auto">Auto (System)</a></li>
               <li role="none"><a role="menuitem" href="#" data-theme-selector data-theme="retroiptv">RetroIPTV</a></li>
               <li role="none"><a role="menuitem" href="#" data-theme-selector data-theme="light">Light</a></li>
               <li role="none"><a role="menuitem" href="#" data-theme-selector data-theme="dark">Dark</a></li>

templates/base.html

@@ -12,7 +12,25 @@
     (function () {
       try {
         var t = localStorage.getItem('theme');
-        if (t) document.documentElement.setAttribute('data-theme', t);
+        if (t) {
+          // Handle 'auto' theme
+          if (t === 'auto') {
+            // Detect system preference
+            if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+              t = 'dark';
+            } else {
+              t = 'light';
+            }
+          }
+          document.documentElement.setAttribute('data-theme', t);
+        } else {
+          // No saved preference - auto-detect
+          if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+            document.documentElement.setAttribute('data-theme', 'dark');
+          } else {
+            document.documentElement.setAttribute('data-theme', 'light');
+          }
+        }
       } catch (e) { /* ignore */ }
 
       // temporary safe stub — will be replaced by /static/js/theme.js when it loads