feat: introduced a token-based theming system across the UI

* feat: added themes system

* feat: smart sidebar auto-hide for files/diff tabs + lower files sidebar threshold

* feat: added Checkbox component and update theming

- Add reusable Checkbox component for toggles across UI
- Replace several inputs with Checkbox in settings and commands panels
- Add DiffIcon and apply surface/border theming to key UI areas

* feat: Add convert-vscode-theme.cjs to convert VS Code themes to OpenChamber format

* refactor: remove unused permission logic from ChatInput

- Remove unused permission rules parsing logic from ChatInput
- Memoize renderTheme in DiffWorkerProvider to avoid unnecessary recalculations
- Remove forceOpaque helper in vscode theme adapter

* fix: guard VSCode theme loading in MarkdownRenderer

* feat: add custom user themes loading and reload

- Load user themes from ~/.config/openchamber/themes at runtime
- Expose /api/config/themes to fetch custom themes
- Allow theme reloading from Settings → Theme → Reload themes in the UI

packages/desktop/index.html

@@ -26,6 +26,17 @@
         document.documentElement.style.setProperty('color-scheme', isDark ? 'dark' : 'light');
         // Store for use in inline styles
         window.__INITIAL_THEME_DARK__ = isDark;
+
+        // Splash colors persisted by the app theme system
+        var splashBgLight = localStorage.getItem('splashBgLight');
+        var splashFgLight = localStorage.getItem('splashFgLight');
+        var splashBgDark = localStorage.getItem('splashBgDark');
+        var splashFgDark = localStorage.getItem('splashFgDark');
+
+        if (splashBgLight) document.documentElement.style.setProperty('--splash-background-light', splashBgLight);
+        if (splashFgLight) document.documentElement.style.setProperty('--splash-stroke-light', splashFgLight);
+        if (splashBgDark) document.documentElement.style.setProperty('--splash-background-dark', splashBgDark);
+        if (splashFgDark) document.documentElement.style.setProperty('--splash-stroke-dark', splashFgDark);
       })();
     </script>
     <style>
@@ -54,18 +65,44 @@
         font-family: 'IBM Plex Mono', monospace;
         background-color: transparent;
       }
-      /* Theme-aware colors for loading screen */
-      html.dark {
-        --splash-stroke: white;
+      :root {
+        --splash-background-dark: #151313;
+        --splash-stroke-dark: white;
+        --splash-background-light: #F6F4EF;
+        --splash-stroke-light: black;
+
+        --splash-background: var(--splash-background-dark);
+        --splash-stroke: var(--splash-stroke-dark);
+
+        /* Fallback fills (overridden below when supported) */
         --splash-face-fill: rgba(255, 255, 255, 0.15);
         --splash-cell-fill: rgba(255, 255, 255, 0.35);
-        --splash-logo-fill: white;
+        --splash-logo-fill: var(--splash-stroke);
       }
+
       html.light {
-        --splash-stroke: black;
+        --splash-background: var(--splash-background-light);
+        --splash-stroke: var(--splash-stroke-light);
         --splash-face-fill: rgba(0, 0, 0, 0.15);
         --splash-cell-fill: rgba(0, 0, 0, 0.4);
-        --splash-logo-fill: black;
+        --splash-logo-fill: var(--splash-stroke);
+      }
+
+      html.dark {
+        --splash-background: var(--splash-background-dark);
+        --splash-stroke: var(--splash-stroke-dark);
+        --splash-logo-fill: var(--splash-stroke);
+      }
+
+      body {
+        background-color: var(--splash-background);
+      }
+
+      @supports (color: color-mix(in srgb, white 50%, transparent)) {
+        :root {
+          --splash-face-fill: color-mix(in srgb, var(--splash-stroke) 15%, transparent);
+          --splash-cell-fill: color-mix(in srgb, var(--splash-stroke) 35%, transparent);
+        }
       }
       .loading {
         display: flex;