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

[Copilot]

Adds automatic dark/light theme detection based on OS/browser preference using CSS prefers-color-scheme media query.

Changes

• Auto-detection on first visit: New users get system-matched theme automatically
• "Auto (System)" mode: Continuous tracking of system preference via MediaQuery listener
• Flash prevention: Inline detection in base.html applies theme before paint
• Backward compatible: Existing saved preferences preserved

Implementation

Added detectSystemTheme() using window.matchMedia('(prefers-color-scheme: dark)'):

function detectSystemTheme() {
  try {
    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
      return 'dark';
    }
  } catch (e) { /* ignore */ }
  return 'light';
}

Theme resolution logic:

1. Saved preference = 'auto' → resolve to system theme
2. Saved preference = specific theme → use that theme
3. No saved preference → auto-detect system theme once

MediaQuery change listener updates theme dynamically only when 'auto' explicitly selected.

UI Updates

Added "Auto (System)" to theme selector menus (desktop + mobile).

Light mode (auto-detected)

Dark mode (manual)

Auto mode

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• iptv.lan
  • Triggering command: /usr/bin/python python app.py (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Implement dark/light theme auto-detect in UI</issue_title>
<issue_description>Enhance the UI by auto-detecting the user's preferred dark/light theme. Implementation details:

• Use CSS 'prefers-color-scheme' media query or JS detection
• Apply existing theme classes to switch appearance
• Optionally store manual preference for override
  This improves accessibility and modernizes the interface.</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes Implement dark/light theme auto-detect in UI #75

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.