* 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
1.1 KiB
1.1 KiB
title
| title |
|---|
| Adding Themes |
Adding Themes
Custom Themes (User)
Drop a JSON file into ~/.config/openchamber/themes/. No rebuild needed.
- Create theme file (e.g.,
my-theme.json) - In app: Settings → Theme → Reload themes
- Select from dropdown
See docs/CUSTOM_THEMES.md for full format reference.
Built-in Themes (Development)
1. Create JSON Files
Add to packages/ui/src/lib/theme/themes/:
<id>-light.json<id>-dark.json
Use existing themes (e.g., flexoki-dark.json) as reference for the full structure.
2. Register in presets.ts
import mytheme_light_Raw from './mytheme-light.json';
import mytheme_dark_Raw from './mytheme-dark.json';
export const presetThemes: Theme[] = [
// ... existing themes
mytheme_light_Raw as Theme,
mytheme_dark_Raw as Theme,
];
3. Validate
bun run type-check && bun run lint && bun run build
Key Files
- Theme types:
packages/ui/src/types/theme.ts - Presets:
packages/ui/src/lib/theme/themes/presets.ts - Example:
packages/ui/src/lib/theme/themes/flexoki-dark.json - Custom themes doc:
docs/CUSTOM_THEMES.md