Add an ansi theme. (#152)

Add the gradient used by the ascii art logo to theme.

packages/cli/src/ui/colors.ts

@@ -41,4 +41,7 @@ export const Colors: ColorsTheme = {
   get Gray() {
     return themeManager.getActiveTheme().colors.Gray;
   },
+  get GradientColors() {
+    return themeManager.getActiveTheme().colors.GradientColors;
+  },
 };

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

@@ -7,14 +7,9 @@
 import React from 'react';
 import { Box, Text } from 'ink';
 import Gradient from 'ink-gradient';
+import { Colors } from '../colors.js';
 
-const gradientColors = ['#4796E4', '#847ACE', '#C3677F'];
+const asciiArtLogo = `
-
-export const Header: React.FC = () => (
-  <>
-    <Box marginBottom={1} alignItems="flex-start">
-      <Gradient colors={gradientColors}>
-        <Text>{`
  ██████╗ ███████╗███╗   ███╗██╗███╗   ██╗██╗
 ██╔════╝ ██╔════╝████╗ ████║██║████╗  ██║██║
 ██║  ███╗█████╗  ██╔████╔██║██║██╔██╗ ██║██║
@@ -28,8 +23,18 @@ export const Header: React.FC = () => (
 ██║     ██║   ██║██║  ██║██╔══╝             
 ╚██████╗╚██████╔╝██████╔╝███████╗           
  ╚═════╝ ╚═════╝ ╚═════╝ ╚══════╝           
-`}</Text>
+`;
-      </Gradient>
+
+export const Header: React.FC = () => (
+  <>
+    <Box marginBottom={1} alignItems="flex-start">
+      {Colors.GradientColors ? (
+        <Gradient colors={Colors.GradientColors}>
+          <Text>{asciiArtLogo}</Text>
+        </Gradient>
+      ) : (
+        <Text>{asciiArtLogo}</Text>
+      )}
     </Box>
   </>
 );

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

@@ -0,0 +1,138 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { ansiTheme, Theme } from './theme.js';
+
+export const ANSI: Theme = new Theme(
+  'ANSI colors only',
+  {
+    hljs: {
+      display: 'block',
+      overflowX: 'auto',
+      padding: '0.5em',
+      background: 'black', // Mapped from #1E1E1E
+      color: 'white', // Mapped from #DCDCDC
+    },
+    'hljs-keyword': {
+      color: 'blue', // Mapped from #569CD6
+    },
+    'hljs-literal': {
+      color: 'blue', // Mapped from #569CD6
+    },
+    'hljs-symbol': {
+      color: 'blue', // Mapped from #569CD6
+    },
+    'hljs-name': {
+      color: 'blue', // Mapped from #569CD6
+    },
+    'hljs-link': {
+      color: 'blue', // Mapped from #569CD6
+      // textDecoration is ignored by Theme class
+    },
+    'hljs-built_in': {
+      color: 'cyan', // Mapped from #4EC9B0
+    },
+    'hljs-type': {
+      color: 'cyan', // Mapped from #4EC9B0
+    },
+    'hljs-number': {
+      color: 'green', // Mapped from #B8D7A3
+    },
+    'hljs-class': {
+      color: 'green', // Mapped from #B8D7A3
+    },
+    'hljs-string': {
+      color: 'yellow', // Mapped from #D69D85
+    },
+    'hljs-meta-string': {
+      color: 'yellow', // Mapped from #D69D85
+    },
+    'hljs-regexp': {
+      color: 'red', // Mapped from #9A5334
+    },
+    'hljs-template-tag': {
+      color: 'red', // Mapped from #9A5334
+    },
+    'hljs-subst': {
+      color: 'white', // Mapped from #DCDCDC
+    },
+    'hljs-function': {
+      color: 'white', // Mapped from #DCDCDC
+    },
+    'hljs-title': {
+      color: 'white', // Mapped from #DCDCDC
+    },
+    'hljs-params': {
+      color: 'white', // Mapped from #DCDCDC
+    },
+    'hljs-formula': {
+      color: 'white', // Mapped from #DCDCDC
+    },
+    'hljs-comment': {
+      color: 'green', // Mapped from #57A64A
+      // fontStyle is ignored by Theme class
+    },
+    'hljs-quote': {
+      color: 'green', // Mapped from #57A64A
+      // fontStyle is ignored by Theme class
+    },
+    'hljs-doctag': {
+      color: 'green', // Mapped from #608B4E
+    },
+    'hljs-meta': {
+      color: 'gray', // Mapped from #9B9B9B
+    },
+    'hljs-meta-keyword': {
+      color: 'gray', // Mapped from #9B9B9B
+    },
+    'hljs-tag': {
+      color: 'gray', // Mapped from #9B9B9B
+    },
+    'hljs-variable': {
+      color: 'magenta', // Mapped from #BD63C5
+    },
+    'hljs-template-variable': {
+      color: 'magenta', // Mapped from #BD63C5
+    },
+    'hljs-attr': {
+      color: 'bluebright', // Mapped from #9CDCFE
+    },
+    'hljs-attribute': {
+      color: 'bluebright', // Mapped from #9CDCFE
+    },
+    'hljs-builtin-name': {
+      color: 'bluebright', // Mapped from #9CDCFE
+    },
+    'hljs-section': {
+      color: 'yellow', // Mapped from gold
+    },
+    'hljs-emphasis': {
+      // fontStyle is ignored by Theme class
+    },
+    'hljs-strong': {
+      // fontWeight is ignored by Theme class
+    },
+    'hljs-bullet': {
+      color: 'yellow', // Mapped from #D7BA7D
+    },
+    'hljs-selector-tag': {
+      color: 'yellow', // Mapped from #D7BA7D
+    },
+    'hljs-selector-id': {
+      color: 'yellow', // Mapped from #D7BA7D
+    },
+    'hljs-selector-class': {
+      color: 'yellow', // Mapped from #D7BA7D
+    },
+    'hljs-selector-attr': {
+      color: 'yellow', // Mapped from #D7BA7D
+    },
+    'hljs-selector-pseudo': {
+      color: 'yellow', // Mapped from #D7BA7D
+    },
+  },
+  ansiTheme,
+);

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

@@ -12,6 +12,7 @@ import { VS } from './vs.js';
 import { VS2015 } from './vs2015.js';
 import { XCode } from './xcode.js';
 import { Theme } from './theme.js';
+import { ANSI } from './ansi.js';
 
 export interface ThemeDisplay {
   name: string;
@@ -32,6 +33,7 @@ class ThemeManager {
       GitHub,
       GoogleCode,
       XCode,
+      ANSI,
     ];
     this.activeTheme = ThemeManager.DEFAULT_THEME;
   }

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

@@ -17,6 +17,7 @@ export interface ColorsTheme {
   AccentRed: string;
   SubtleComment: string;
   Gray: string;
+  GradientColors?: string[];
 }
 
 export const lightTheme: ColorsTheme = {
@@ -31,6 +32,7 @@ export const lightTheme: ColorsTheme = {
   AccentRed: '#EF4444',
   SubtleComment: '#9CA3AF',
   Gray: 'gray',
+  GradientColors: ['#4796E4', '#847ACE', '#C3677F'],
 };
 
 export const darkTheme: ColorsTheme = {
@@ -45,6 +47,21 @@ export const darkTheme: ColorsTheme = {
   AccentRed: '#F38BA8',
   SubtleComment: '#6C7086',
   Gray: 'gray',
+  GradientColors: ['#4796E4', '#847ACE', '#C3677F'],
+};
+
+export const ansiTheme: ColorsTheme = {
+  Background: 'black',
+  Foreground: 'white',
+  LightBlue: 'blue',
+  AccentBlue: 'bluebright',
+  AccentPurple: 'magentabright',
+  AccentCyan: 'cyanbright',
+  AccentGreen: 'greenbright',
+  AccentYellow: 'yellowbright',
+  AccentRed: 'red',
+  SubtleComment: 'gray',
+  Gray: 'gray',
 };
 
 export class Theme {