From 67f7dae4e30b558618caee9d3b7f43b57debcf1e Mon Sep 17 00:00:00 2001
From: Miguel Solorio <miguelsolorio@google.com>
Date: Thu, 11 Sep 2025 14:22:16 -0700
Subject: [PATCH] Update default text styles (#8291)

---
 packages/cli/src/ui/auth/AuthDialog.tsx                 | 4 +++-
 packages/cli/src/ui/components/EditorSettingsDialog.tsx | 4 +++-
 packages/cli/src/ui/components/StatsDisplay.tsx         | 4 +++-
 packages/cli/src/ui/components/ThemeDialog.tsx          | 4 +++-
 packages/cli/src/ui/components/messages/ToolMessage.tsx | 4 +++-
 packages/cli/src/ui/utils/CodeColorizer.tsx             | 5 +++--
 packages/cli/src/ui/utils/MarkdownDisplay.tsx           | 6 +++---
 7 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/packages/cli/src/ui/auth/AuthDialog.tsx b/packages/cli/src/ui/auth/AuthDialog.tsx
index 7af7cb9b1c..3342fb6d21 100644
--- a/packages/cli/src/ui/auth/AuthDialog.tsx
+++ b/packages/cli/src/ui/auth/AuthDialog.tsx
@@ -154,7 +154,9 @@ Logging in with Google... Please restart Gemini CLI to continue.
       padding={1}
       width="100%"
     >
-      <Text bold>Get started</Text>
+      <Text bold color={theme.text.primary}>
+        Get started
+      </Text>
       <Box marginTop={1}>
         <Text color={theme.text.primary}>
           How would you like to authenticate for this project?
diff --git a/packages/cli/src/ui/components/EditorSettingsDialog.tsx b/packages/cli/src/ui/components/EditorSettingsDialog.tsx
index e5bccdfc74..9ed601e72f 100644
--- a/packages/cli/src/ui/components/EditorSettingsDialog.tsx
+++ b/packages/cli/src/ui/components/EditorSettingsDialog.tsx
@@ -154,7 +154,9 @@ export function EditorSettingsDialog({
       </Box>
 
       <Box flexDirection="column" width="55%" paddingLeft={2}>
-        <Text bold>Editor Preference</Text>
+        <Text bold color={theme.text.primary}>
+          Editor Preference
+        </Text>
         <Box flexDirection="column" gap={1} marginTop={1}>
           <Text color={theme.text.secondary}>
             These editors are currently supported. Please note that some editors
diff --git a/packages/cli/src/ui/components/StatsDisplay.tsx b/packages/cli/src/ui/components/StatsDisplay.tsx
index f40d055ad3..8c7bacd7ab 100644
--- a/packages/cli/src/ui/components/StatsDisplay.tsx
+++ b/packages/cli/src/ui/components/StatsDisplay.tsx
@@ -187,7 +187,9 @@ export const StatsDisplay: React.FC<StatsDisplayProps> = ({
     if (title) {
       return theme.ui.gradient && theme.ui.gradient.length > 0 ? (
         <Gradient colors={theme.ui.gradient}>
-          <Text bold>{title}</Text>
+          <Text bold color={theme.text.primary}>
+            {title}
+          </Text>
         </Gradient>
       ) : (
         <Text bold color={theme.text.accent}>
diff --git a/packages/cli/src/ui/components/ThemeDialog.tsx b/packages/cli/src/ui/components/ThemeDialog.tsx
index c4bc64c302..497ba1c654 100644
--- a/packages/cli/src/ui/components/ThemeDialog.tsx
+++ b/packages/cli/src/ui/components/ThemeDialog.tsx
@@ -215,7 +215,9 @@ export function ThemeDialog({
 
           {/* Right Column: Preview */}
           <Box flexDirection="column" width="55%" paddingLeft={2}>
-            <Text bold>Preview</Text>
+            <Text bold color={theme.text.primary}>
+              Preview
+            </Text>
             {/* Get the Theme object for the highlighted theme, fall back to default if not found */}
             {(() => {
               const previewTheme =
diff --git a/packages/cli/src/ui/components/messages/ToolMessage.tsx b/packages/cli/src/ui/components/messages/ToolMessage.tsx
index 99822ece15..f77a14870f 100644
--- a/packages/cli/src/ui/components/messages/ToolMessage.tsx
+++ b/packages/cli/src/ui/components/messages/ToolMessage.tsx
@@ -112,7 +112,9 @@ export const ToolMessage: React.FC<ToolMessageProps> = ({
             ) : typeof resultDisplay === 'string' && !renderOutputAsMarkdown ? (
               <MaxSizedBox maxHeight={availableHeight} maxWidth={childWidth}>
                 <Box>
-                  <Text wrap="wrap">{resultDisplay}</Text>
+                  <Text wrap="wrap" color={theme.text.primary}>
+                    {resultDisplay}
+                  </Text>
                 </Box>
               </MaxSizedBox>
             ) : typeof resultDisplay === 'object' &&
diff --git a/packages/cli/src/ui/utils/CodeColorizer.tsx b/packages/cli/src/ui/utils/CodeColorizer.tsx
index e06e199a5e..644248fd05 100644
--- a/packages/cli/src/ui/utils/CodeColorizer.tsx
+++ b/packages/cli/src/ui/utils/CodeColorizer.tsx
@@ -31,8 +31,9 @@ function renderHastNode(
   inheritedColor: string | undefined,
 ): React.ReactNode {
   if (node.type === 'text') {
-    // Use the color passed down from parent element, if any
-    return <Text color={inheritedColor}>{node.value}</Text>;
+    // Use the color passed down from parent element, or the theme's default.
+    const color = inheritedColor || theme.defaultColor;
+    return <Text color={color}>{node.value}</Text>;
   }
 
   // Handle Element Nodes: Determine color and pass it down, don't wrap
diff --git a/packages/cli/src/ui/utils/MarkdownDisplay.tsx b/packages/cli/src/ui/utils/MarkdownDisplay.tsx
index 42ea164805..2baea99884 100644
--- a/packages/cli/src/ui/utils/MarkdownDisplay.tsx
+++ b/packages/cli/src/ui/utils/MarkdownDisplay.tsx
@@ -188,7 +188,7 @@ const MarkdownDisplayInternal: React.FC<MarkdownDisplayProps> = ({
           break;
         case 3:
           headerNode = (
-            <Text bold>
+            <Text bold color={theme.text.primary}>
               <RenderInline text={headerText} />
             </Text>
           );
@@ -386,10 +386,10 @@ const RenderListItemInternal: React.FC<RenderListItemProps> = ({
       flexDirection="row"
     >
       <Box width={prefixWidth}>
-        <Text>{prefix}</Text>
+        <Text color={theme.text.primary}>{prefix}</Text>
       </Box>
       <Box flexGrow={LIST_ITEM_TEXT_FLEX_GROW}>
-        <Text wrap="wrap">
+        <Text wrap="wrap" color={theme.text.primary}>
           <RenderInline text={itemText} />
         </Text>
       </Box>