Files
openchamber/.opencode/skills/theme-system/references/adding-themes.md
T
Bohdan Triapitsyn ddedc02687 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
2026-02-01 18:29:34 +02:00

1.1 KiB

title
title
Adding Themes

Adding Themes

Custom Themes (User)

Drop a JSON file into ~/.config/openchamber/themes/. No rebuild needed.

  1. Create theme file (e.g., my-theme.json)
  2. In app: Settings → Theme → Reload themes
  3. 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