feat(settings): add appearance and custom theme support

Introduce an appearance preference with modern, classic, and custom
modes and a persisted custom theme palette. Add helpers to load,
persist, and apply appearance and custom colors, and wire them into the
app settings lifecycle. Implement a comprehensive light theme and
appearance presets using CSS variables so custom palettes are applied
consistently across the UI, and include appearance in analytics when
settings are saved.

- Persist and apply appearance and custom color palette to :root
- Add muted light theme plus classic/modern presets and custom mapping
- Include appearance and customTheme in settings save and analytics payload

src/lib/components/AppSettingsDialog.svelte

@@ -31,8 +31,10 @@
   } from "../externalTools";
   import type {
     AnalyticsSettings,
+    AppAppearance,
     AppLanguage,
     AppTheme,
+    CustomThemeColors,
     DetectedExternalTool,
     ExternalToolsSettings,
     ToolOpenMode,
@@ -44,6 +46,8 @@
   interface Props {
     analytics: AnalyticsSettings;
     theme: AppTheme;
+    appearance: AppAppearance;
+    customTheme: CustomThemeColors;
     language: AppLanguage;
     autoRefresh: boolean;
     externalTools: ExternalToolsSettings;
@@ -51,13 +55,15 @@
     detectionPending: boolean;
     detectionUnavailable: boolean;
     onRefreshDetectedTools: () => void | Promise<void>;
-    onSave: (settings: AnalyticsSettings, theme: AppTheme, language: AppLanguage, autoRefresh: boolean, externalTools: ExternalToolsSettings) => void;
+    onSave: (settings: AnalyticsSettings, theme: AppTheme, appearance: AppAppearance, customTheme: CustomThemeColors, language: AppLanguage, autoRefresh: boolean, externalTools: ExternalToolsSettings) => void;
     onClose: () => void;
   }
 
   let {
     analytics,
     theme = "system",
+    appearance = "modern",
+    customTheme = { background: "#cfd5dc", surface: "#e2e6ea", accent: "#2eb5d1", text: "#222328" },
     language = "en",
     autoRefresh = true,
     externalTools,
@@ -76,6 +82,8 @@
   let advancedOpen = $state(false);
   let analyticsEnabled = $state(true);
   let selectedTheme = $state<AppTheme>("system");
+  let selectedAppearance = $state<AppAppearance>("modern");
+  let customColors = $state<CustomThemeColors>({ background: "#cfd5dc", surface: "#e2e6ea", accent: "#2eb5d1", text: "#222328" });
   let selectedLanguage = $state<AppLanguage>("en");
   let autoRefreshEnabled = $state(true);
   let tools = $state<ExternalToolsSettings>(defaultExternalToolsSettings());
@@ -84,6 +92,8 @@
   $effect(() => {
     analyticsEnabled = analytics.enabled;
     selectedTheme = theme;
+    selectedAppearance = appearance;
+    customColors = structuredClone(customTheme);
     selectedLanguage = language;
     autoRefreshEnabled = autoRefresh;
     tools = structuredClone(externalTools);
@@ -94,7 +104,46 @@
       ...analytics,
       enabled: analyticsEnabled,
       noticeSeen: true,
-    }, selectedTheme, selectedLanguage, autoRefreshEnabled, $state.snapshot(tools));
+    }, selectedTheme, selectedAppearance, $state.snapshot(customColors), selectedLanguage, autoRefreshEnabled, $state.snapshot(tools));
+  }
+
+  function resetCustomColors() {
+    customColors = selectedTheme === "dark"
+      ? { background: "#222328", surface: "#2b2e34", accent: "#2eb5d1", text: "#f0f1f2" }
+      : { background: "#cfd5dc", surface: "#e2e6ea", accent: "#2eb5d1", text: "#222328" };
+  }
+
+  function cssColorToHex(value: string, fallback: string): string {
+    const color = value.trim();
+    if (/^#[0-9a-f]{6}$/i.test(color)) return color.toLowerCase();
+    if (!color || typeof document === "undefined") return fallback;
+    const probe = document.createElement("span");
+    probe.style.color = color;
+    if (!probe.style.color) return fallback;
+    probe.style.display = "none";
+    document.body.appendChild(probe);
+    const match = getComputedStyle(probe).color.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)/i);
+    probe.remove();
+    if (!match) return fallback;
+    return `#${match.slice(1, 4).map((part) => Number(part).toString(16).padStart(2, "0")).join("")}`;
+  }
+
+  function currentThemeColors(): CustomThemeColors {
+    const styles = getComputedStyle(document.documentElement);
+    const fallback = selectedTheme === "dark"
+      ? { background: "#222328", surface: "#2b2e34", accent: "#2eb5d1", text: "#f0f1f2" }
+      : { background: "#cfd5dc", surface: "#e2e6ea", accent: "#2eb5d1", text: "#222328" };
+    return {
+      background: cssColorToHex(styles.getPropertyValue("--app-bg"), fallback.background),
+      surface: cssColorToHex(styles.getPropertyValue("--color-surface"), fallback.surface),
+      accent: cssColorToHex(styles.getPropertyValue("--color-accent"), fallback.accent),
+      text: cssColorToHex(styles.getPropertyValue("--color-ink"), fallback.text),
+    };
+  }
+
+  function selectAppearance(next: AppAppearance) {
+    if (next === "custom" && selectedAppearance !== "custom") customColors = currentThemeColors();
+    selectedAppearance = next;
   }
 
   function toolLabel(kind: ExternalToolKind): string {
@@ -292,6 +341,40 @@
                 </div>
               </section>
 
+              <section class="general-setting-panel">
+                <header><SlidersHorizontal size={16} /><div><h4>{isGerman ? "Darstellungsstil" : "Design style"}</h4><p>{isGerman ? "Aktuell, klassisch oder selbst gestaltet." : "Current, classic, or designed by you."}</p></div></header>
+                <div class="settings-segmented" role="radiogroup" aria-label={isGerman ? "Darstellungsstil" : "Design style"}>
+                  <label class:active={selectedAppearance === "modern"}><input type="radio" name="appearance" value="modern" checked={selectedAppearance === "modern"} onchange={() => selectAppearance("modern")} /><span>{isGerman ? "Aktuell" : "Modern"}</span></label>
+                  <label class:active={selectedAppearance === "classic"}><input type="radio" name="appearance" value="classic" checked={selectedAppearance === "classic"} onchange={() => selectAppearance("classic")} /><span>{isGerman ? "Klassisch" : "Classic"}</span></label>
+                  <label class:active={selectedAppearance === "custom"}><input type="radio" name="appearance" value="custom" checked={selectedAppearance === "custom"} onchange={() => selectAppearance("custom")} /><span>{isGerman ? "Eigene" : "Custom"}</span></label>
+                </div>
+              </section>
+
+              {#if selectedAppearance === "custom"}
+                <section class="general-setting-panel general-setting-wide custom-theme-panel">
+                  <header>
+                    <Palette size={16} />
+                    <div><h4>{isGerman ? "Theme-Generator" : "Theme generator"}</h4><p>{isGerman ? "Erstelle dein eigenes Farbprofil." : "Create your own color profile."}</p></div>
+                    <button class="theme-reset-button" type="button" onclick={resetCustomColors}><RotateCw size={13} />{isGerman ? "Zurücksetzen" : "Reset"}</button>
+                  </header>
+                  <div
+                    class="theme-preview"
+                    style={`--preview-bg:${customColors.background};--preview-surface:${customColors.surface};--preview-accent:${customColors.accent};--preview-text:${customColors.text};`}
+                    aria-label={isGerman ? "Vorschau des eigenen Themes" : "Custom theme preview"}
+                  >
+                    <span class="theme-preview-sidebar"></span>
+                    <span class="theme-preview-content"><i></i><b></b><em></em></span>
+                  </div>
+                  <div class="theme-color-grid">
+                    <label><span>{isGerman ? "Hintergrund" : "Background"}</span><input type="color" bind:value={customColors.background} aria-label={isGerman ? "Hintergrundfarbe" : "Background color"} /><code>{customColors.background}</code></label>
+                    <label><span>{isGerman ? "Fläche" : "Surface"}</span><input type="color" bind:value={customColors.surface} aria-label={isGerman ? "Flächenfarbe" : "Surface color"} /><code>{customColors.surface}</code></label>
+                    <label><span>{isGerman ? "Akzent" : "Accent"}</span><input type="color" bind:value={customColors.accent} aria-label={isGerman ? "Akzentfarbe" : "Accent color"} /><code>{customColors.accent}</code></label>
+                    <label><span>{isGerman ? "Schrift" : "Text"}</span><input type="color" bind:value={customColors.text} aria-label={isGerman ? "Schriftfarbe" : "Text color"} /><code>{customColors.text}</code></label>
+                  </div>
+                  <p class="theme-generator-note">{isGerman ? "Die Farben werden beim Speichern auf die gesamte Oberfläche angewendet." : "The colors are applied across the interface when you save."}</p>
+                </section>
+              {/if}
+
               <section class="general-setting-panel">
                 <header><Languages size={16} /><div><h4>{isGerman ? "Sprache" : "Language"}</h4><p>{isGerman ? "Sprache der Oberfläche." : "Language used by the interface."}</p></div></header>
                 <div class="settings-segmented settings-language" role="radiogroup" aria-label={isGerman ? "App-Sprache" : "App language"}>
@@ -534,6 +617,22 @@
   .settings-segmented label { display: flex; align-items: center; justify-content: center; min-height: 31px; border: 1px solid transparent; border-radius: 6px; color: var(--color-ink-dim); font-size: 10.5px; font-weight: 750; }
   .settings-segmented label.active { border-color: var(--color-border-input); color: var(--color-ink); background: var(--color-surface-hover); }
   .settings-segmented input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
+  .custom-theme-panel > header { align-items: center; }
+  .custom-theme-panel > header > div { min-width: 0; }
+  .theme-reset-button { display: inline-flex; align-items: center; gap: 5px; min-height: 27px; margin-left: auto; padding: 0 8px; border: 1px solid var(--color-border); color: var(--color-ink-muted); background: var(--color-surface-raised); font-size: 9.5px; font-weight: 750; }
+  .theme-reset-button:hover:not(:disabled) { border-color: var(--color-border-input); color: var(--color-ink); background: var(--color-surface-hover); }
+  .theme-preview { display: grid; grid-template-columns: 28% 1fr; min-height: 78px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--preview-text) 30%, var(--preview-surface)); background: var(--preview-bg); }
+  .theme-preview-sidebar { border-right: 1px solid color-mix(in srgb, var(--preview-text) 24%, var(--preview-surface)); background: color-mix(in srgb, var(--preview-surface) 86%, var(--preview-bg)); }
+  .theme-preview-content { display: grid; grid-template-columns: 1fr auto; align-content: start; gap: 8px; margin: 10px; padding: 10px; border: 1px solid color-mix(in srgb, var(--preview-text) 22%, var(--preview-surface)); color: var(--preview-text); background: var(--preview-surface); }
+  .theme-preview-content i { display: block; width: 54%; height: 7px; background: var(--preview-text); opacity: .82; }
+  .theme-preview-content b { display: block; width: 34px; height: 18px; grid-row: 1 / 3; grid-column: 2; background: var(--preview-accent); }
+  .theme-preview-content em { display: block; width: 76%; height: 5px; background: var(--preview-text); opacity: .32; }
+  .theme-color-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
+  .theme-color-grid label { display: grid; grid-template-columns: minmax(0, 1fr) 32px auto; align-items: center; gap: 8px; min-width: 0; min-height: 38px; padding: 5px 7px; border: 1px solid var(--color-border-subtle); background: var(--color-surface-raised); }
+  .theme-color-grid label > span { color: var(--color-ink-muted); font-size: 10px; font-weight: 750; }
+  .theme-color-grid input[type="color"] { width: 32px; height: 25px; padding: 2px; border: 1px solid var(--color-border-input); background: transparent; cursor: pointer; }
+  .theme-color-grid code { color: var(--color-ink-faint); font: 9px var(--font-mono); text-transform: uppercase; }
+  .theme-generator-note { margin: -5px 0 0 !important; color: var(--color-ink-faint) !important; }
   .settings-switch-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px; }
   .settings-switch-row span { display: grid; gap: 3px; }
   .settings-switch-row strong { color: var(--color-ink); font-size: 11px; }
@@ -569,6 +668,7 @@
     .tool-rescan-button { align-self: flex-start; }
     .general-settings-grid { grid-template-columns: 1fr; }
     .general-setting-panel.general-setting-wide { grid-column: auto; }
+    .theme-color-grid { grid-template-columns: 1fr; }
     .tool-config-panel { padding: 13px; }
     .tool-usage-callout { grid-template-columns: 1fr; gap: 4px; }
   }