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

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-28 10:10:44 +02:00
1 parent 1bb8494fdb
commit c046aea776
@@ -0,0 +1,70 @@
+const THEME_KEY = 'ns_theme';
+const DEFAULT_ID = 'dark-amber';
+
+export const THEMES = [
+  {
+    id: 'dark-amber',
+    name: 'Dark Amber',
+    accent: '#e8a020',
+    bg: '#07070f',
+    vars: {
+      '--bg':         '#07070f',
+      '--bg2':        '#0d0d1a',
+      '--bg3':        '#12121f',
+      '--surface':    '#1a1a2e',
+      '--surface2':   '#22223a',
+      '--border':     'rgba(255,255,255,0.07)',
+      '--border2':    'rgba(255,255,255,0.12)',
+      '--accent':     '#e8a020',
+      '--accent2':    '#f0b840',
+      '--accent-dark':'#c07010',
+      '--accent-dim': 'rgba(232,160,32,0.15)',
+      '--accent-glow':'rgba(232,160,32,0.3)',
+      '--text':       '#f0eefc',
+      '--text2':      '#8888aa',
+      '--text3':      '#555577',
+      '--danger':     '#e05555',
+    },
+  },
+  {
+    id: 'dark-ocean',
+    name: 'Dark Ocean',
+    accent: '#4f8ef7',
+    bg: '#070d14',
+    vars: {
+      '--bg':         '#070d14',
+      '--bg2':        '#0c1520',
+      '--bg3':        '#111c28',
+      '--surface':    '#182435',
+      '--surface2':   '#1f2f42',
+      '--border':     'rgba(255,255,255,0.07)',
+      '--border2':    'rgba(255,255,255,0.13)',
+      '--accent':     '#4f8ef7',
+      '--accent2':    '#70aaff',
+      '--accent-dark':'#2a6cd6',
+      '--accent-dim': 'rgba(79,142,247,0.15)',
+      '--accent-glow':'rgba(79,142,247,0.3)',
+      '--text':       '#edf2ff',
+      '--text2':      '#7088aa',
+      '--text3':      '#445566',
+      '--danger':     '#e05555',
+    },
+  },
+];
+
+export function applyTheme(id) {
+  const theme = THEMES.find(t => t.id === id) || THEMES.find(t => t.id === DEFAULT_ID);
+  const root = document.documentElement;
+  Object.entries(theme.vars).forEach(([k, v]) => root.style.setProperty(k, v));
+  localStorage.setItem(THEME_KEY, theme.id);
+}
+
+export function loadSavedTheme() {
+  const saved = localStorage.getItem(THEME_KEY) || DEFAULT_ID;
+  applyTheme(saved);
+  return saved;
+}
+
+export function getCurrentThemeId() {
+  return localStorage.getItem(THEME_KEY) || DEFAULT_ID;
+}