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/commands/AgentSelector.tsx

@@ -120,7 +120,7 @@ export const AgentSelector: React.FC<AgentSelectorProps> = ({
                 <DropdownMenu>
                     <DropdownMenuTrigger asChild>
                         <div className={cn(
-                            'flex items-center gap-2 px-2 rounded-lg bg-accent/20 border border-border/20 cursor-pointer hover:bg-accent/30 h-6 w-fit',
+                            'flex items-center gap-2 px-2 rounded-lg bg-interactive-selection/20 border border-border/20 cursor-pointer hover:bg-interactive-hover/30 h-6 w-fit',
                             className
                         )}>
                             <RiRobot2Line className="h-3 w-3 flex-shrink-0 text-muted-foreground" />

packages/ui/src/components/sections/commands/CommandsPage.tsx

@@ -2,10 +2,10 @@ import React from 'react';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Textarea } from '@/components/ui/textarea';
+import { Checkbox } from '@/components/ui/checkbox';
 import { toast } from '@/components/ui';
 import { useCommandsStore, type CommandConfig, type CommandScope } from '@/stores/useCommandsStore';
-import { RiCheckLine, RiInformationLine, RiSaveLine, RiTerminalBoxLine, RiUser3Line, RiFolderLine } from '@remixicon/react';
-import { cn } from '@/lib/utils';
+import { RiInformationLine, RiSaveLine, RiTerminalBoxLine, RiUser3Line, RiFolderLine } from '@remixicon/react';
 import { ModelSelector } from '../agents/ModelSelector';
 import { AgentSelector } from './AgentSelector';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
@@ -309,22 +309,10 @@ export const CommandsPage: React.FC = () => {
 
           <div className="space-y-2">
             <label className="typography-ui-label font-medium text-foreground flex items-center gap-2 cursor-pointer">
-              <div className="relative">
-                <input
-                  type="checkbox"
-                  checked={subtask}
-                  onChange={(e) => setSubtask(e.target.checked)}
-                  className="sr-only"
-                />
-                <div className={cn(
-                  "w-5 h-5 rounded border-2 flex items-center justify-center",
-                  subtask
-                    ? "bg-primary border-primary"
-                    : "bg-background border-border hover:border-primary/50"
-                )}>
-                  {subtask && <RiCheckLine className="w-3 h-3 text-primary-foreground" />}
-                </div>
-              </div>
+              <Checkbox
+                checked={subtask}
+                onChange={(checked) => setSubtask(checked)}
+              />
               Force Subagent Invocation
             </label>
             <div className="flex items-center gap-2">

packages/ui/src/components/sections/commands/CommandsSidebar.tsx

@@ -302,7 +302,7 @@ export const CommandsSidebar: React.FC<CommandsSidebarProps> = ({ onItemSelect }
             <Button
               variant="ghost"
               onClick={() => setRenameDialogCommand(null)}
-              className="text-foreground hover:bg-muted hover:text-foreground"
+                className="text-foreground hover:bg-interactive-hover hover:text-foreground"
             >
               Cancel
             </Button>
@@ -339,7 +339,7 @@ const CommandListItem: React.FC<CommandListItemProps> = ({
     <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">