feat(cli): respect the NO_COLOR env variable (#772)

2 files changed, 96 insertions, 0 deletions

diff --git a/packages/cli/src/ui/themes/no-color.ts b/packages/cli/src/ui/themes/no-color.ts
new file mode 100644
index 00000000..f549f5de
--- /dev/null
+++ b/packages/cli/src/ui/themes/no-color.ts
@@ -0,0 +1,91 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { Theme, ColorsTheme } from './theme.js';
+
+const noColorColorsTheme: ColorsTheme = {
+  type: 'ansi',
+  Background: '',
+  Foreground: '',
+  LightBlue: '',
+  AccentBlue: '',
+  AccentPurple: '',
+  AccentCyan: '',
+  AccentGreen: '',
+  AccentYellow: '',
+  AccentRed: '',
+  SubtleComment: '',
+  Gray: '',
+};
+
+export const NoColorTheme: Theme = new Theme(
+  'No Color',
+  'dark',
+  {
+    hljs: {
+      display: 'block',
+      overflowX: 'auto',
+      padding: '0.5em',
+    },
+    'hljs-keyword': {},
+    'hljs-literal': {},
+    'hljs-symbol': {},
+    'hljs-name': {},
+    'hljs-link': {
+      textDecoration: 'underline',
+    },
+    'hljs-built_in': {},
+    'hljs-type': {},
+    'hljs-number': {},
+    'hljs-class': {},
+    'hljs-string': {},
+    'hljs-meta-string': {},
+    'hljs-regexp': {},
+    'hljs-template-tag': {},
+    'hljs-subst': {},
+    'hljs-function': {},
+    'hljs-title': {},
+    'hljs-params': {},
+    'hljs-formula': {},
+    'hljs-comment': {
+      fontStyle: 'italic',
+    },
+    'hljs-quote': {
+      fontStyle: 'italic',
+    },
+    'hljs-doctag': {},
+    'hljs-meta': {},
+    'hljs-meta-keyword': {},
+    'hljs-tag': {},
+    'hljs-variable': {},
+    'hljs-template-variable': {},
+    'hljs-attr': {},
+    'hljs-attribute': {},
+    'hljs-builtin-name': {},
+    'hljs-section': {},
+    'hljs-emphasis': {
+      fontStyle: 'italic',
+    },
+    'hljs-strong': {
+      fontWeight: 'bold',
+    },
+    'hljs-bullet': {},
+    'hljs-selector-tag': {},
+    'hljs-selector-id': {},
+    'hljs-selector-class': {},
+    'hljs-selector-attr': {},
+    'hljs-selector-pseudo': {},
+    'hljs-addition': {
+      display: 'inline-block',
+      width: '100%',
+    },
+    'hljs-deletion': {
+      display: 'inline-block',
+      width: '100%',
+    },
+  },
+  noColorColorsTheme,
+);
diff --git a/packages/cli/src/ui/themes/theme-manager.ts b/packages/cli/src/ui/themes/theme-manager.ts
index 30f1a62c..10aa53f0 100644
--- a/packages/cli/src/ui/themes/theme-manager.ts
+++ b/packages/cli/src/ui/themes/theme-manager.ts
@@ -17,6 +17,8 @@ import { XCode } from './xcode.js';
 import { Theme, ThemeType } from './theme.js';
 import { ANSI } from './ansi.js';
 import { ANSILight } from './ansi-light.js';
+import { NoColorTheme } from './no-color.js';
+import process from 'node:process';
 
 export interface ThemeDisplay {
   name: string;
@@ -110,6 +112,9 @@ class ThemeManager {
    * Returns the currently active theme object.
    */
   getActiveTheme(): Theme {
+    if (process.env.NO_COLOR) {
+      return NoColorTheme;
+    }
     return this.activeTheme;
   }
 }