diff --git a/packages/ui/src/ThemeEditor.ts b/packages/ui/src/ThemeEditor.ts
new file mode 100644
index 00000000..ef3d705e
--- /dev/null
+++ b/packages/ui/src/ThemeEditor.ts
@@ -0,0 +1,50 @@
+export interface ThemeConfig {
+  foreground: string;
+  background: string;
+  primary: string;
+  secondary: string;
+}
+
+export class ThemeEditor {
+  private theme: ThemeConfig;
+
+  constructor(initialTheme?: Partial<ThemeConfig>) {
+    this.theme = {
+      foreground: "#ffffff",
+      background: "#000000",
+      primary: "#00ff00",
+      secondary: "#888888",
+      ...initialTheme,
+    };
+  }
+
+  setColor(
+    key: keyof ThemeConfig,
+    value: string
+  ): void {
+    this.theme[key] = value;
+  }
+
+  getTheme(): ThemeConfig {
+    return this.theme;
+  }
+
+  preview(): string {
+    return `
+Theme Preview
+-------------
+Foreground: ${this.theme.foreground}
+Background: ${this.theme.background}
+Primary: ${this.theme.primary}
+Secondary: ${this.theme.secondary}
+`;
+  }
+
+  exportTheme(): string {
+    return JSON.stringify(this.theme, null, 2);
+  }
+
+  importTheme(json: string): void {
+    this.theme = JSON.parse(json);
+  }
+}
\ No newline at end of file
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index 170d6738..ab5e014f 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -253,6 +253,8 @@ export type { ChatThreadOptions } from './ChatThread.js';
 export { TokenUsage } from './TokenUsage.js';
 export type { TokenUsageOptions } from './TokenUsage.js';
 
+export { ThemeEditor } from "./ThemeEditor.js";
+export type { ThemeConfig } from "./ThemeEditor.js";
 export { SearchPanel } from "./SearchPanel.js";
 export type { SearchPanelOptions } from "./SearchPanel.js";
 
@@ -264,4 +266,4 @@ export type {
   ValidationRule,
   ValidationSchema,
   ValidationResult,
-} from "./FormValidator.js";
\ No newline at end of file
+} from "./FormValidator.js";