Merge branch 'dev': Polarized and Suri themes

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Doku/theming.md

@@ -82,6 +82,8 @@ Jede Theme-Datei gliedert sich in sechs exakt definierte Bereiche:
 | `light` | [`theme-light.css`](../frontend/src/themes/theme-light.css) | Daylight Clean White / Minimalistisch | Modern dezent (`4px` Cards, `4px` Buttons) |
 | `high-contrast` | [`theme-high-contrast.css`](../frontend/src/themes/theme-high-contrast.css) | Reines Schwarz/Weiß mit AAA-Kontrast | Streng eckig (`0px`, kräftige Rahmen) |
 | `soft` | [`theme-soft.css`](../frontend/src/themes/theme-soft.css) | Warmes Soft Slate mit Indigo-Akzent | Weich gerundet (`12px` Cards, `8px` Buttons) |
+| `polarized` | [`theme-polarized.css`](../frontend/src/themes/theme-polarized.css) | Tiefdunkles Obsidian mit elektrischem Ultraviolett | Streng eckig (`0px` Cards, `2px` Buttons) |
+| `suri` | [`theme-suri.css`](../frontend/src/themes/theme-suri.css) | Warmes Mitternachts-Pflaume mit samtiger Orchidee | Weich gerundet (`10px` Cards, `6px` Buttons) |
 | *Template* | [`theme-template.css`](../frontend/src/themes/theme-template.css) | Vollständig dokumentierte Kopiervorlage | Frei anpassbar |
 
 ---

frontend/src/index.css

@@ -13,6 +13,8 @@
 @import './themes/theme-light.css';
 @import './themes/theme-high-contrast.css';
 @import './themes/theme-soft.css';
+@import './themes/theme-polarized.css';
+@import './themes/theme-suri.css';
 
 @tailwind base;
 @tailwind components;

frontend/src/lib/__tests__/theme.test.ts

@@ -52,4 +52,16 @@ describe('custom themes', () => {
     expect(opt.previewAccent).toBe('#15803d');
     expect(opt.isRounded).toBe(true);
   });
+
+  it('supports polarized and suri built-in purple dark themes', () => {
+    setActiveTheme('polarized');
+    expect(getActiveTheme()).toBe('polarized');
+    expect(document.documentElement.getAttribute('data-theme')).toBe('polarized');
+    expect(document.documentElement.classList.contains('dark')).toBe(true);
+
+    setActiveTheme('suri');
+    expect(getActiveTheme()).toBe('suri');
+    expect(document.documentElement.getAttribute('data-theme')).toBe('suri');
+    expect(document.documentElement.classList.contains('dark')).toBe(true);
+  });
 });

frontend/src/lib/theme.ts

@@ -68,6 +68,28 @@ export const AVAILABLE_THEMES: ThemeOption[] = [
     previewText: '#f8fafc',
     isRounded: true,
   },
+  {
+    id: 'polarized',
+    name: 'Polarized (Ultraviolet)',
+    subtitle: 'Tiefdunkles Obsidian mit elektrischem Violett (0px)',
+    file: 'src/themes/theme-polarized.css',
+    previewBg: '#0d0b14',
+    previewPanel: '#151221',
+    previewAccent: '#a855f7',
+    previewText: '#f5f3ff',
+    isRounded: false,
+  },
+  {
+    id: 'suri',
+    name: 'Suri (Velvet Dusk)',
+    subtitle: 'Warmes Mitternachts-Pflaume mit samtiger Orchidee (10px)',
+    file: 'src/themes/theme-suri.css',
+    previewBg: '#130f1a',
+    previewPanel: '#1e1728',
+    previewAccent: '#b86bf8',
+    previewText: '#fbf7ff',
+    isRounded: true,
+  },
 ];
 
 export const isCustomThemeId = (id: ThemeId) => id.startsWith(CUSTOM_THEME_PREFIX);

frontend/src/themes/theme-polarized.css

@@ -0,0 +1,55 @@
+/* ==========================================================================
+   MINDSIFT THEME: POLARIZED (Ultraviolet / Obsidian)
+   Tiefdunkles Obsidian mit elektrischem Violett-Akzent & scharfen Kanten.
+   ========================================================================== */
+
+:root[data-theme="polarized"] {
+  /* --- 1. AKZENTFARBE (Elektrisches Ultraviolett) --- */
+  --accent-primary: #a855f7;
+  --accent-hover: #c084fc;
+  --accent-dim: rgba(168, 85, 247, 0.15);
+  --accent-border: rgba(192, 132, 252, 0.45);
+  --text-on-accent: #ffffff;
+
+  /* --- 2. OBERFLÄCHEN & HINTERGRÜNDE --- */
+  --bg-app: #0d0b14;
+  --bg-panel: #151221;
+  --bg-panel-elevated: #1d182e;
+  --bg-panel-hover: #26203c;
+  --bg-input: #0f0d18;
+  --bg-overlay: rgba(6, 4, 10, 0.78);
+  --bg-code: #08060d;
+
+  /* --- 3. TEXT & KONTRASTE --- */
+  --text-main: #f5f3ff;
+  --text-muted: #a79fc2;
+  --text-faint: #6d6585;
+
+  /* --- 4. RAHMEN, LINIEN & SCHATTEN --- */
+  --border-color: rgba(168, 85, 247, 0.14);
+  --border-subtle: rgba(168, 85, 247, 0.07);
+  --border-strong: rgba(192, 132, 252, 0.30);
+  --shadow-panel: 0 10px 30px rgba(5, 3, 10, 0.55);
+  --scrollbar-thumb: rgba(168, 85, 247, 0.22);
+  --scrollbar-thumb-hover: rgba(192, 132, 252, 0.40);
+
+  /* --- 5. STATUS- & SIGNALFARBEN --- */
+  --color-success: #10b981;
+  --bg-success: rgba(16, 185, 129, 0.14);
+  --border-success: rgba(16, 185, 129, 0.38);
+
+  --color-danger: #f43f5e;
+  --bg-danger: rgba(244, 63, 94, 0.14);
+  --border-danger: rgba(244, 63, 94, 0.38);
+
+  --color-warning: #f59e0b;
+  --bg-warning: rgba(245, 158, 11, 0.14);
+  --border-warning: rgba(245, 158, 11, 0.38);
+
+  /* --- 6. RUNDUNGEN (Geometrie: Klar & eckig) --- */
+  --radius-card: 0px;
+  --radius-btn: 2px;
+  --radius-input: 2px;
+  --radius-checkbox: 0px;
+  --radius-pill: 9999px;
+}

frontend/src/themes/theme-suri.css

@@ -0,0 +1,55 @@
+/* ==========================================================================
+   MINDSIFT THEME: SURI (Velvet Dusk / Orchid)
+   Warmes Mitternachts-Pflaume mit samtigem Orchidee-Akzent & weichen Ecken.
+   ========================================================================== */
+
+:root[data-theme="suri"] {
+  /* --- 1. AKZENTFARBE (Samtige Orchidee & Magenta-Violett) --- */
+  --accent-primary: #b86bf8;
+  --accent-hover: #cf94fd;
+  --accent-dim: rgba(184, 107, 248, 0.16);
+  --accent-border: rgba(207, 148, 253, 0.42);
+  --text-on-accent: #ffffff;
+
+  /* --- 2. OBERFLÄCHEN & HINTERGRÜNDE --- */
+  --bg-app: #130f1a;
+  --bg-panel: #1e1728;
+  --bg-panel-elevated: #282036;
+  --bg-panel-hover: #332944;
+  --bg-input: #15101d;
+  --bg-overlay: rgba(11, 8, 16, 0.76);
+  --bg-code: #0d0a13;
+
+  /* --- 3. TEXT & KONTRASTE --- */
+  --text-main: #fbf7ff;
+  --text-muted: #b5a8cb;
+  --text-faint: #776b8d;
+
+  /* --- 4. RAHMEN, LINIEN & SCHATTEN --- */
+  --border-color: rgba(207, 148, 253, 0.14);
+  --border-subtle: rgba(207, 148, 253, 0.07);
+  --border-strong: rgba(207, 148, 253, 0.28);
+  --shadow-panel: 0 12px 32px rgba(8, 5, 12, 0.50);
+  --scrollbar-thumb: rgba(184, 107, 248, 0.20);
+  --scrollbar-thumb-hover: rgba(207, 148, 253, 0.36);
+
+  /* --- 5. STATUS- & SIGNALFARBEN --- */
+  --color-success: #34d399;
+  --bg-success: rgba(52, 211, 153, 0.14);
+  --border-success: rgba(52, 211, 153, 0.38);
+
+  --color-danger: #fb7185;
+  --bg-danger: rgba(251, 113, 133, 0.14);
+  --border-danger: rgba(251, 113, 133, 0.38);
+
+  --color-warning: #fbbf24;
+  --bg-warning: rgba(251, 191, 36, 0.14);
+  --border-warning: rgba(251, 191, 36, 0.38);
+
+  /* --- 6. RUNDUNGEN (Weich gerundete Ecken) --- */
+  --radius-card: 10px;
+  --radius-btn: 6px;
+  --radius-input: 6px;
+  --radius-checkbox: 4px;
+  --radius-pill: 9999px;
+}