feat: theme system with persistent selection and Dark Ocean starter theme

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/ui.js

@@ -1,6 +1,7 @@
 import { S } from './state.js';
 import { esc, formatDur, toast } from './utils.js';
 import { api, coverUrl, ndAuth } from './api.js';
+import { THEMES, applyTheme, getCurrentThemeId } from './themes.js';
 // Circular imports — safe (only used inside function bodies)
 import { playQueue, dlSongLocal, toggleStar, togglePlay, renderQueue, syncNpStar, updateStarBtn, npToggleStar, playCurrent, _syncNpDirect, setPlayIcon } from './player.js';
 import { navigate, loadPlaylists } from './views.js';
@@ -61,9 +62,26 @@ export function openSettings() {
   document.getElementById('s-pass').value    = '';
   document.getElementById('s-lastfm').value       = S.cfg.lastfmKey        || '';
   document.getElementById('s-backend').value      = S.cfg.backendUrl       || '';
+  _renderThemePicker();
   document.getElementById('settings-modal').classList.add('open');
   checkBackend();
 }
+
+function _renderThemePicker() {
+  const el = document.getElementById('theme-picker');
+  if (!el) return;
+  const current = getCurrentThemeId();
+  el.innerHTML = THEMES.map(t => `
+    <div class="theme-swatch${t.id === current ? ' active' : ''}" data-id="${t.id}" onclick="_pickTheme('${t.id}')" style="--sw-bg:${t.bg};--sw-accent:${t.accent}">
+      <div class="theme-swatch-dot"></div>
+      <span>${esc(t.name)}</span>
+    </div>`).join('');
+}
+
+export function _pickTheme(id) {
+  applyTheme(id);
+  _renderThemePicker();
+}
 export function closeSettings() { document.getElementById('settings-modal').classList.remove('open'); }
 export function saveSettings() {
   const pass = document.getElementById('s-pass').value;