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/sections/skills/SkillsPage.tsx

@@ -509,7 +509,7 @@ export const SkillsPage: React.FC = () => {
               {filesToShow.map((file) => (
                 <div
                   key={file.path}
-                  className="flex items-center justify-between px-3 py-2 rounded-lg border bg-muted/30 hover:bg-muted/50 cursor-pointer transition-colors"
+                  className="flex items-center justify-between px-3 py-2 rounded-lg border bg-muted/30 hover:bg-interactive-hover cursor-pointer transition-colors"
                   onClick={() => handleEditFile(file.path)}
                 >
                   <div className="flex items-center gap-2 min-w-0">
@@ -608,7 +608,7 @@ export const SkillsPage: React.FC = () => {
                 setIsFileDialogOpen(false);
                 setEditingFilePath(null);
               }}
-              className="text-foreground hover:bg-muted hover:text-foreground"
+              className="text-foreground hover:bg-interactive-hover hover:text-foreground"
             >
               Cancel
             </Button>

packages/ui/src/components/sections/skills/SkillsSidebar.tsx

@@ -294,7 +294,7 @@ export const SkillsSidebar: React.FC<SkillsSidebarProps> = ({ onItemSelect }) =>
             <Button
               variant="ghost"
               onClick={() => setRenameDialogSkill(null)}
-              className="text-foreground hover:bg-muted hover:text-foreground"
+              className="text-foreground hover:bg-interactive-hover hover:text-foreground"
             >
               Cancel
             </Button>
@@ -329,7 +329,7 @@ const SkillListItem: React.FC<SkillListItemProps> = ({
     <div
       className={cn(
         'group relative flex items-center rounded-md px-1.5 py-1 transition-all duration-200',
-        isSelected ? 'dark:bg-accent/80 bg-primary/12' : 'hover:dark:bg-accent/40 hover:bg-primary/6'
+        isSelected ? 'bg-interactive-selection' : 'hover:bg-interactive-hover'
       )}
     >
       <div className="flex min-w-0 flex-1 items-center">

packages/ui/src/components/sections/skills/catalog/InstallFromRepoDialog.tsx

@@ -13,6 +13,7 @@ import { Button } from '@/components/ui/button';
 import { ButtonLarge } from '@/components/ui/button-large';
 import { Input } from '@/components/ui/input';
 import { ScrollableOverlay } from '@/components/ui/ScrollableOverlay';
+import { Checkbox } from '@/components/ui/checkbox';
 import {
   Select,
   SelectContent,
@@ -362,16 +363,16 @@ export const InstallFromRepoDialog: React.FC<InstallFromRepoDialogProps> = ({ op
                         key={item.skillDir}
                         className={
                           'flex items-start gap-3 rounded-lg border bg-muted/10 px-3 py-2 cursor-pointer transition-colors ' +
-                          (disabled ? 'opacity-60 cursor-not-allowed' : 'hover:bg-muted/20')
+                          (disabled ? 'opacity-60 cursor-not-allowed' : 'hover:bg-interactive-hover/20')
                         }
                       >
-                        <input
-                          type="checkbox"
-                          className="mt-1 h-4 w-4"
-                          checked={checked}
-                          disabled={disabled}
-                          onChange={(e) => setSelected((prev) => ({ ...prev, [item.skillDir]: e.target.checked }))}
-                        />
+                        <div className="mt-1">
+                          <Checkbox
+                            checked={checked}
+                            disabled={disabled}
+                            onChange={(newChecked) => setSelected((prev) => ({ ...prev, [item.skillDir]: newChecked }))}
+                          />
+                        </div>
                         <div className="min-w-0 flex-1">
                           <div className="flex items-center gap-2">
                             <div className="typography-ui-label truncate">{item.skillName}</div>