feat(theme): Theme-Dropdown (Dark/Light/Rainbow Chaos) inkl. persistenter Auswahl

web/src/App.tsx

@@ -15,6 +15,7 @@ export default function App() {
   const [error, setError] = useState<string | null>(null);
   const [volume, setVolume] = useState<number>(1);
   const [favs, setFavs] = useState<Record<string, boolean>>({});
+  const [theme, setTheme] = useState<string>(() => localStorage.getItem('theme') || 'dark');
 
   useEffect(() => {
     (async () => {
@@ -60,6 +61,12 @@ export default function App() {
     try { setCookie('favs', JSON.stringify(favs)); } catch {}
   }, [favs]);
 
+  // Theme anwenden/persistieren
+  useEffect(() => {
+    document.body.setAttribute('data-theme', theme);
+    localStorage.setItem('theme', theme);
+  }, [theme]);
+
   useEffect(() => {
     if (selected) localStorage.setItem('selectedChannel', selected);
   }, [selected]);
@@ -127,6 +134,13 @@ export default function App() {
             aria-label="Lautstärke"
           />
         </div>
+        <div className="control theme">
+          <select value={theme} onChange={(e) => setTheme(e.target.value)} aria-label="Theme">
+            <option value="dark">Dark</option>
+            <option value="light">Light</option>
+            <option value="rainbow">Rainbow Chaos</option>
+          </select>
+        </div>
       </section>
 
       {folders.length > 0 && (