Make ui/colors refelect the current theme.

packages/cli/src/ui/colors.ts

@@ -4,15 +4,41 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-export const Colors = {
+import { themeManager } from './themes/theme-manager.js';
-  Foreground: 'white',
+import { ColorsTheme } from './themes/theme.js';
-  LightBlue: '#CDD6F4',
+
-  AccentBlue: '#89B4FA',
+export const Colors: ColorsTheme = {
-  AccentPurple: '#CBA6F7',
+  get Foreground() {
-  AccentCyan: '#89DCEB',
+    return themeManager.getActiveTheme().colors.Foreground;
-  AccentGreen: '#A6E3A1',
+  },
-  AccentYellow: '#F9E2AF',
+  get Background() {
-  AccentRed: '#F38BA8',
+    return themeManager.getActiveTheme().colors.Background;
-  SubtleComment: '#6C7086',
+  },
-  Gray: 'gray',
+  get LightBlue() {
+    return themeManager.getActiveTheme().colors.LightBlue;
+  },
+  get AccentBlue() {
+    return themeManager.getActiveTheme().colors.AccentBlue;
+  },
+  get AccentPurple() {
+    return themeManager.getActiveTheme().colors.AccentPurple;
+  },
+  get AccentCyan() {
+    return themeManager.getActiveTheme().colors.AccentCyan;
+  },
+  get AccentGreen() {
+    return themeManager.getActiveTheme().colors.AccentGreen;
+  },
+  get AccentYellow() {
+    return themeManager.getActiveTheme().colors.AccentYellow;
+  },
+  get AccentRed() {
+    return themeManager.getActiveTheme().colors.AccentRed;
+  },
+  get SubtleComment() {
+    return themeManager.getActiveTheme().colors.SubtleComment;
+  },
+  get Gray() {
+    return themeManager.getActiveTheme().colors.Gray;
+  },
 };

packages/cli/src/ui/components/Footer.tsx

@@ -30,7 +30,10 @@ export const Footer: React.FC<FooterProps> = ({
       <Text color={Colors.SubtleComment}>
         {queryLength === 0 ? '? for shortcuts' : ''}
         {debugMode && (
-          <Text color="red"> {debugMessage || 'Running in debug mode.'}</Text>
+          <Text color={Colors.AccentRed}>
+            {' '}
+            {debugMessage || 'Running in debug mode.'}
+          </Text>
         )}
       </Text>
     </Box>
@@ -45,7 +48,7 @@ export const Footer: React.FC<FooterProps> = ({
       {process.env.SANDBOX ? (
         <Text color="green"> {process.env.SANDBOX} </Text>
       ) : (
-        <Text color="red"> WARNING: OUTSIDE SANDBOX </Text>
+        <Text color={Colors.AccentRed}> WARNING: OUTSIDE SANDBOX </Text>
       )}
     </Box>
 

packages/cli/src/ui/themes/atom-one-dark.ts

@@ -4,9 +4,11 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { Theme } from './theme.js';
+import { darkTheme, Theme } from './theme.js';
 
-export const AtomOneDark: Theme = new Theme('Atom One Dark', {
+export const AtomOneDark: Theme = new Theme(
+  'Atom One Dark',
+  {
     hljs: {
       display: 'block',
       overflowX: 'auto',
@@ -119,4 +121,6 @@ export const AtomOneDark: Theme = new Theme('Atom One Dark', {
     'hljs-strong': {
       fontWeight: 'bold',
     },
-});
+  },
+  darkTheme,
+);

packages/cli/src/ui/themes/dracula.ts

@@ -4,9 +4,11 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { Theme } from './theme.js';
+import { darkTheme, Theme } from './theme.js';
 
-export const Dracula: Theme = new Theme('Dracula', {
+export const Dracula: Theme = new Theme(
+  'Dracula',
+  {
     hljs: {
       display: 'block',
       overflowX: 'auto',
@@ -96,4 +98,6 @@ export const Dracula: Theme = new Theme('Dracula', {
     'hljs-emphasis': {
       fontStyle: 'italic',
     },
-});
+  },
+  darkTheme,
+);

packages/cli/src/ui/themes/github.ts

@@ -4,9 +4,11 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { Theme } from './theme.js';
+import { lightTheme, Theme } from './theme.js';
 
-export const GitHub: Theme = new Theme('GitHub', {
+export const GitHub: Theme = new Theme(
+  'GitHub',
+  {
     hljs: {
       display: 'block',
       overflowX: 'auto',
@@ -121,4 +123,6 @@ export const GitHub: Theme = new Theme('GitHub', {
     'hljs-strong': {
       fontWeight: 'bold',
     },
-});
+  },
+  lightTheme,
+);

packages/cli/src/ui/themes/googlecode.ts

@@ -4,9 +4,11 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { Theme } from './theme.js';
+import { lightTheme, Theme } from './theme.js';
 
-export const GoogleCode: Theme = new Theme('Google Code', {
+export const GoogleCode: Theme = new Theme(
+  'Google Code',
+  {
     hljs: {
       display: 'block',
       overflowX: 'auto',
@@ -118,4 +120,6 @@ export const GoogleCode: Theme = new Theme('Google Code', {
     'hljs-emphasis': {
       fontStyle: 'italic',
     },
-});
+  },
+  lightTheme,
+);

packages/cli/src/ui/themes/theme-manager.ts

@@ -27,7 +27,7 @@ class ThemeManager {
     this.availableThemes = [
       AtomOneDark,
       Dracula,
-      VS,
+      VS, // Light mode.
       VS2015,
       GitHub,
       GoogleCode,

packages/cli/src/ui/themes/theme.ts

@@ -5,6 +5,47 @@
  */
 
 import type { CSSProperties } from 'react';
+export interface ColorsTheme {
+  Background: string;
+  Foreground: string;
+  LightBlue: string;
+  AccentBlue: string;
+  AccentPurple: string;
+  AccentCyan: string;
+  AccentGreen: string;
+  AccentYellow: string;
+  AccentRed: string;
+  SubtleComment: string;
+  Gray: string;
+}
+
+export const lightTheme: ColorsTheme = {
+  Background: '#FAFAFA',
+  Foreground: '#3C3C43',
+  LightBlue: '#ADD8E6',
+  AccentBlue: '#3B82F6',
+  AccentPurple: '#8B5CF6',
+  AccentCyan: '#06B6D4',
+  AccentGreen: '#22C55E',
+  AccentYellow: '#EAB308',
+  AccentRed: '#EF4444',
+  SubtleComment: '#9CA3AF',
+  Gray: 'gray',
+};
+
+export const darkTheme: ColorsTheme = {
+  Background: '#1E1E2E',
+  Foreground: '#CDD6F4',
+  LightBlue: '#ADD8E6',
+  AccentBlue: '#89B4FA',
+  AccentPurple: '#CBA6F7',
+  AccentCyan: '#89DCEB',
+  AccentGreen: '#A6E3A1',
+  AccentYellow: '#F9E2AF',
+  AccentRed: '#F38BA8',
+  SubtleComment: '#6C7086',
+  Gray: 'gray',
+};
 
 export class Theme {
   /**
@@ -18,6 +59,7 @@ export class Theme {
    */
   readonly defaultColor: string;
 
+  readonly colors: ColorsTheme;
   /**
    * Stores the mapping from highlight.js class names (e.g., 'hljs-keyword')
    * to Ink-compatible color strings (hex or name).
@@ -196,9 +238,14 @@ export class Theme {
    * @param name The name of the theme.
    * @param rawMappings The raw CSSProperties mappings from a react-syntax-highlighter theme object.
    */
-  constructor(name: string, rawMappings: Record<string, CSSProperties>) {
+  constructor(
+    name: string,
+    rawMappings: Record<string, CSSProperties>,
+    colors: ColorsTheme,
+  ) {
     this.name = name;
     this._colorMap = Object.freeze(this._buildColorMap(rawMappings)); // Build and freeze the map
+    this.colors = colors;
 
     // Determine the default foreground color
     const rawDefaultColor = rawMappings['hljs']?.color;

packages/cli/src/ui/themes/vs.ts

@@ -4,9 +4,11 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { Theme } from './theme.js';
+import { lightTheme, Theme } from './theme.js';
 
-export const VS: Theme = new Theme('VS', {
+export const VS: Theme = new Theme(
+  'VS',
+  {
     hljs: {
       display: 'block',
       overflowX: 'auto',
@@ -98,4 +100,6 @@ export const VS: Theme = new Theme('VS', {
     'hljs-strong': {
       fontWeight: 'bold',
     },
-});
+  },
+  lightTheme,
+);

packages/cli/src/ui/themes/vs2015.ts

@@ -4,9 +4,11 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { Theme } from './theme.js';
+import { darkTheme, Theme } from './theme.js';
 
-export const VS2015: Theme = new Theme('VS2015', {
+export const VS2015: Theme = new Theme(
+  'VS2015',
+  {
     hljs: {
       display: 'block',
       overflowX: 'auto',
@@ -141,4 +143,6 @@ export const VS2015: Theme = new Theme('VS2015', {
       display: 'inline-block',
       width: '100%',
     },
-});
+  },
+  darkTheme,
+);

packages/cli/src/ui/themes/xcode.ts

@@ -4,9 +4,11 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { Theme } from './theme.js';
+import { lightTheme, Theme } from './theme.js';
 
-export const XCode: Theme = new Theme('XCode', {
+export const XCode: Theme = new Theme(
+  'XCode',
+  {
     hljs: {
       display: 'block',
       overflowX: 'auto',
@@ -126,4 +128,6 @@ export const XCode: Theme = new Theme('XCode', {
     'hljs-emphasis': {
       fontStyle: 'italic',
     },
-});
+  },
+  lightTheme,
+);