feat (ui): Light/Dark Theme added

webui/html/index.html

@@ -30,6 +30,7 @@
       <div class="flex">
         <button class="btn ghost" onclick="pingApi()">Ping</button>
         <button class="btn" onclick="refreshActive()">Ververs</button>
+        <button class="btn ghost" id="themeToggleBtn" title="Schakel light/dark mode">Theme</button>
       </div>
     </div>
   </div>
@@ -581,8 +582,67 @@
     }
   }
 
+  // ---- Theme (light/dark) ----
+  const THEME_KEY = 'mvp_theme_v1';
+
+  function getSystemTheme() {
+    return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
+      ? 'dark'
+      : 'light';
+  }
+
+  function getStoredTheme() {
+    const t = localStorage.getItem(THEME_KEY);
+    return (t === 'dark' || t === 'light') ? t : '';
+  }
+
+  function getInitialTheme() {
+    return getStoredTheme() || getSystemTheme();
+  }
+
+  function updateThemeToggleUi(theme) {
+    const btn = document.getElementById('themeToggleBtn');
+    if (!btn) return;
+    const next = theme === 'dark' ? 'light' : 'dark';
+    btn.textContent = `Theme: ${theme === 'dark' ? 'Dark' : 'Light'}`;
+    btn.title = `Schakel naar ${next === 'dark' ? 'dark' : 'light'} mode`;
+  }
+
+  function applyTheme(theme, persist = false) {
+    const t = (theme === 'light') ? 'light' : 'dark';
+    document.documentElement.setAttribute('data-theme', t);
+    updateThemeToggleUi(t);
+
+    if (persist) localStorage.setItem(THEME_KEY, t);
+
+    if (typeof window.filesSetEditorTheme === 'function') {
+      window.filesSetEditorTheme(t);
+    }
+  }
+
+  function toggleTheme() {
+    const current = document.documentElement.getAttribute('data-theme') || getInitialTheme();
+    const next = current === 'dark' ? 'light' : 'dark';
+    applyTheme(next, true);
+  }
+
 // ---- Init ----
   (async function init(){
+    applyTheme(getInitialTheme(), false);
+
+    const themeBtn = document.getElementById('themeToggleBtn');
+    if (themeBtn) themeBtn.onclick = toggleTheme;
+
+    if (window.matchMedia) {
+      const mq = window.matchMedia('(prefers-color-scheme: dark)');
+      const onSystemThemeChange = (ev) => {
+        if (getStoredTheme()) return;
+        applyTheme(ev.matches ? 'dark' : 'light', false);
+      };
+      if (mq.addEventListener) mq.addEventListener('change', onSystemThemeChange);
+      else if (mq.addListener) mq.addListener(onSystemThemeChange);
+    }
+
     applySidebarState();
     const t = document.getElementById('sidebarToggle');
     if (t) t.onclick = toggleSidebar;