Add theming support.

- Added a number of common themes to our support matrix:
 - AtomOneDark
 - Dracula
 - VS
 - GitHub
 - GoogleCode
 - XCode
 - ... Admittedly these all were randomly picked, we could probably curate these better...
- Added a new `ThemeDialog` UI that can be accessed via `/theme`. It shows your currentlyt available themes and allows you to change them freely. It does **not**:
 - Save the theme between sessions
 - Allow you to hit escape
 - Show a preview prior to selection.
- These themes are from reacts highlight js library.

Fixes https://b.corp.google.com/issues/412797985

1 files changed, 40 insertions, 0 deletions

diff --git a/packages/cli/src/ui/hooks/useThemeCommand.ts b/packages/cli/src/ui/hooks/useThemeCommand.ts
new file mode 100644
index 00000000..85bd4906
--- /dev/null
+++ b/packages/cli/src/ui/hooks/useThemeCommand.ts
@@ -0,0 +1,40 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { useState, useCallback } from 'react';
+import { themeManager } from '../themes/theme-manager.js';
+
+interface UseThemeCommandReturn {
+  isThemeDialogOpen: boolean;
+  openThemeDialog: () => void;
+  handleThemeSelect: (themeName: string) => void;
+}
+
+export const useThemeCommand = (): UseThemeCommandReturn => {
+  const [isThemeDialogOpen, setIsThemeDialogOpen] = useState(false);
+  const [, setForceRender] = useState(0);
+
+  const openThemeDialog = useCallback(() => {
+    setIsThemeDialogOpen(true);
+  }, []);
+
+  const handleThemeSelect = useCallback((themeName: string) => {
+    try {
+      themeManager.setActiveTheme(themeName);
+      setForceRender((v) => v + 1); // Trigger potential re-render
+    } catch (error) {
+      console.error(`Error setting theme: ${error}`);
+    } finally {
+      setIsThemeDialogOpen(false); // Close the dialog
+    }
+  }, []);
+
+  return {
+    isThemeDialogOpen,
+    openThemeDialog,
+    handleThemeSelect,
+  };
+};