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/index.css

@@ -15,9 +15,9 @@ textarea[data-chat-input="true"] {
   box-shadow: none;
 }
 
+textarea[data-chat-input="true"]:hover,
 textarea[data-chat-input="true"]:focus,
-textarea[data-chat-input="true"]:focus-visible,
-textarea[data-chat-input="true"]:hover {
+textarea[data-chat-input="true"]:focus-visible {
   outline: none;
   border: none;
   box-shadow: none;
@@ -331,6 +331,7 @@ html:not(.dark) .chat-scroll {
 .overlay-scrollbar-target {
   scrollbar-width: none !important;
   -ms-overflow-style: none !important;
+  scrollbar-gutter: auto !important;
 }
 
 .overlay-scrollbar-target::-webkit-scrollbar {
@@ -444,6 +445,9 @@ html:not(.dark) .chat-scroll {
   :root:not(.mobile-pointer):not(.vscode-runtime) .header-tab-label {
     display: none;
   }
+  :root:not(.mobile-pointer):not(.vscode-runtime) .header-tab-badge {
+    margin-left: -0.125rem;
+  }
 }
 
 /* ============================================
@@ -570,6 +574,64 @@ html:not(.dark) .chat-scroll {
   font-size: var(--text-code);
 }
 
+/* Override Streamdown's hardcoded bg-muted for inline code - use theme colors instead */
+.streamdown-content code[data-streamdown="inline-code"] {
+  background-color: var(--markdown-inline-code-bg, var(--surface-muted)) !important;
+  color: var(--markdown-inline-code, var(--foreground)) !important;
+}
+
+/* Markdown headings - use theme colors */
+.streamdown-content h1 {
+  color: var(--markdown-heading1, var(--primary));
+}
+
+.streamdown-content h2 {
+  color: var(--markdown-heading2, var(--primary));
+}
+
+.streamdown-content h3 {
+  color: var(--markdown-heading3, var(--primary));
+}
+
+.streamdown-content h4,
+.streamdown-content h5,
+.streamdown-content h6 {
+  color: var(--markdown-heading4, var(--foreground));
+}
+
+/* Markdown links - use theme colors */
+.streamdown-content a {
+  color: var(--markdown-link, var(--primary));
+}
+
+.streamdown-content a:hover {
+  color: var(--markdown-link-hover, var(--primary));
+}
+
+/* Markdown blockquote - use theme colors */
+.streamdown-content blockquote {
+  color: var(--markdown-blockquote, var(--muted-foreground));
+  border-left-color: var(--markdown-blockquote-border, var(--border));
+}
+
+/* Markdown horizontal rule - use theme colors */
+.streamdown-content hr {
+  border-color: var(--markdown-hr, var(--border));
+}
+
+/* Markdown bold/italic/strikethrough - use theme colors */
+.streamdown-content strong {
+  color: var(--markdown-bold, var(--foreground));
+}
+
+.streamdown-content em {
+  color: var(--markdown-italic, var(--foreground));
+}
+
+.streamdown-content del {
+  color: var(--markdown-strikethrough, var(--muted-foreground));
+}
+
 /* Streamdown code blocks: ensure light/dark Shiki vars work even when Tailwind doesn't scan Streamdown's internal class names. */
 .streamdown-content [data-streamdown="code-block-body"] {
   font-size: var(--text-code);