From 4c2a5045a0d209cfda5723a4dc84fe59670b558e Mon Sep 17 00:00:00 2001
From: Taylor Mullen <ntaylormullen@google.com>
Date: Tue, 22 Apr 2025 18:57:47 -0700
Subject: 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
---
 packages/cli/src/ui/components/ThemeDialog.tsx | 49 ++++++++++++++++++++++++++
 1 file changed, 49 insertions(+)
 create mode 100644 packages/cli/src/ui/components/ThemeDialog.tsx

(limited to 'packages/cli/src/ui/components/ThemeDialog.tsx')

diff --git a/packages/cli/src/ui/components/ThemeDialog.tsx b/packages/cli/src/ui/components/ThemeDialog.tsx
new file mode 100644
index 00000000..b3e4f063
--- /dev/null
+++ b/packages/cli/src/ui/components/ThemeDialog.tsx
@@ -0,0 +1,49 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { Box, Text } from 'ink';
+import { Colors } from '../colors.js';
+import { themeManager } from '../themes/theme-manager.js';
+import { RadioButtonSelect } from './shared/RadioButtonSelect.js';
+
+interface ThemeDialogProps {
+  /** Callback function when a theme is selected */
+  onSelect: (themeName: string) => void;
+}
+
+export function ThemeDialog({ onSelect }: ThemeDialogProps): React.JSX.Element {
+  const themeItems = themeManager.getAvailableThemes().map((theme) => ({
+    label: theme.active ? `${theme.name} (Active)` : theme.name,
+    value: theme.name,
+  }));
+  const initialIndex = themeItems.findIndex(
+    (item) => item.value === themeManager.getActiveTheme().name,
+  );
+  return (
+    <Box
+      borderStyle="round"
+      borderColor={Colors.AccentCyan}
+      flexDirection="column"
+      padding={1}
+      width="50%"
+    >
+      <Box marginBottom={1}>
+        <Text bold>Select Theme</Text>
+      </Box>
+      <RadioButtonSelect
+        items={themeItems}
+        initialIndex={initialIndex}
+        onSelect={onSelect}
+      />
+      <Box marginTop={1}>
+        <Text color={Colors.SubtleComment}>
+          (Use ↑/↓ arrows and Enter to select)
+        </Text>
+      </Box>
+    </Box>
+  );
+}
-- 
cgit v1.2.3