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
parent 5bb2c56bc0
commit ddedc02687
147 changed files with 9853 additions and 2435 deletions
@@ -0,0 +1,95 @@
+import { registerCustomTheme } from '@pierre/diffs';
+
+import type { Theme } from '@/types/theme';
+import type { VSCodeTextMateTheme, VSCodeTokenColorRule } from './vscodeTextMateTheme';
+import { buildTextMateThemeFromAppTheme } from './textMateThemeFromAppTheme';
+
+export type ShikiThemeRegistrationResolvedLike = VSCodeTextMateTheme & {
+  settings: VSCodeTokenColorRule[];
+  fg: string;
+  bg: string;
+};
+
+const isHex8 = (value: string): boolean => /^#[0-9a-fA-F]{8}$/.test(value);
+
+const stripAlpha = (value: string): string => {
+  if (isHex8(value)) {
+    return value.slice(0, 7);
+  }
+  return value;
+};
+
+function withStableStringId<T extends object>(value: T, id: string): T {
+  Object.defineProperty(value, 'toString', {
+    value: () => id,
+    enumerable: false,
+    configurable: true,
+  });
+
+  Object.defineProperty(value, Symbol.toPrimitive, {
+    value: () => id,
+    enumerable: false,
+    configurable: true,
+  });
+
+  return value;
+}
+
+const resolvedThemeCache = new Map<string, ShikiThemeRegistrationResolvedLike>();
+const registeredPierreThemes = new Set<string>();
+
+const toResolvedTheme = (raw: VSCodeTextMateTheme, id: string): ShikiThemeRegistrationResolvedLike => {
+  const bgRaw = raw.colors?.['editor.background'];
+  const fgRaw = raw.colors?.['editor.foreground'];
+
+  const bg = bgRaw ? stripAlpha(bgRaw) : undefined;
+  const fg = fgRaw ? stripAlpha(fgRaw) : undefined;
+
+  if (!bg || !fg) {
+    throw new Error(`Theme "${id}" is missing editor.background/editor.foreground`);
+  }
+
+  const settings = raw.tokenColors ?? [];
+
+  return withStableStringId(
+    {
+      ...raw,
+      name: id,
+      fg,
+      bg,
+      settings,
+    },
+    id,
+  );
+};
+
+const buildTextMateTheme = (theme: Theme): VSCodeTextMateTheme => {
+  return buildTextMateThemeFromAppTheme(theme);
+};
+
+export const getResolvedShikiTheme = (theme: Theme): ShikiThemeRegistrationResolvedLike => {
+  const cached = resolvedThemeCache.get(theme.metadata.id);
+  if (cached) {
+    return cached;
+  }
+
+  const raw = buildTextMateTheme(theme);
+  const resolved = toResolvedTheme(raw, theme.metadata.id);
+  resolvedThemeCache.set(theme.metadata.id, resolved);
+  return resolved;
+};
+
+export const ensurePierreThemeRegistered = (theme: Theme): void => {
+  const id = theme.metadata.id;
+  if (registeredPierreThemes.has(id)) {
+    return;
+  }
+
+  const resolved = getResolvedShikiTheme(theme);
+  registerCustomTheme(id, async () => resolved);
+  registeredPierreThemes.add(id);
+};
+
+export const getStreamdownThemePair = (light: Theme, dark: Theme) => {
+  return [getResolvedShikiTheme(light), getResolvedShikiTheme(dark)] as const;
+};