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/ui/src/components/chat/ChatEmptyState.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { OpenChamberLogo } from '@/components/ui/OpenChamberLogo';
 import { TextLoop } from '@/components/ui/TextLoop';
-import { useOptionalThemeSystem } from '@/contexts/useThemeSystem';
+import { useThemeSystem } from '@/contexts/useThemeSystem';
 
 const phrases = [
     "Fix the failing tests",
@@ -24,17 +24,10 @@ const phrases = [
 ];
 
 const ChatEmptyState: React.FC = () => {
-    const themeContext = useOptionalThemeSystem();
+    const { currentTheme } = useThemeSystem();
 
-    let isDark = true;
-    if (themeContext) {
-        isDark = themeContext.currentTheme.metadata.variant !== 'light';
-    } else if (typeof window !== 'undefined') {
-        isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-    }
-
-    // Same colors as face fill in OpenChamberLogo, but higher opacity for text readability
-    const textColor = isDark ? 'rgba(255,255,255,0.4)' : 'rgba(0,0,0,0.4)';
+    // Use theme's muted foreground for secondary text
+    const textColor = currentTheme?.colors?.surface?.mutedForeground || 'var(--muted-foreground)';
 
     return (
         <div className="flex flex-col items-center justify-center min-h-full w-full gap-6">