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,119 +4,123 @@
  * 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(
-  hljs: {
+  'Atom One Dark',
-    display: 'block',
+  {
-    overflowX: 'auto',
+    hljs: {
-    padding: '0.5em',
+      display: 'block',
-    color: '#abb2bf',
+      overflowX: 'auto',
-    background: '#282c34',
+      padding: '0.5em',
+      color: '#abb2bf',
+      background: '#282c34',
+    },
+    'hljs-comment': {
+      color: '#5c6370',
+      fontStyle: 'italic',
+    },
+    'hljs-quote': {
+      color: '#5c6370',
+      fontStyle: 'italic',
+    },
+    'hljs-doctag': {
+      color: '#c678dd',
+    },
+    'hljs-keyword': {
+      color: '#c678dd',
+    },
+    'hljs-formula': {
+      color: '#c678dd',
+    },
+    'hljs-section': {
+      color: '#e06c75',
+    },
+    'hljs-name': {
+      color: '#e06c75',
+    },
+    'hljs-selector-tag': {
+      color: '#e06c75',
+    },
+    'hljs-deletion': {
+      color: '#e06c75',
+    },
+    'hljs-subst': {
+      color: '#e06c75',
+    },
+    'hljs-literal': {
+      color: '#56b6c2',
+    },
+    'hljs-string': {
+      color: '#98c379',
+    },
+    'hljs-regexp': {
+      color: '#98c379',
+    },
+    'hljs-addition': {
+      color: '#98c379',
+    },
+    'hljs-attribute': {
+      color: '#98c379',
+    },
+    'hljs-meta-string': {
+      color: '#98c379',
+    },
+    'hljs-built_in': {
+      color: '#e6c07b',
+    },
+    'hljs-class .hljs-title': {
+      color: '#e6c07b',
+    },
+    'hljs-attr': {
+      color: '#d19a66',
+    },
+    'hljs-variable': {
+      color: '#d19a66',
+    },
+    'hljs-template-variable': {
+      color: '#d19a66',
+    },
+    'hljs-type': {
+      color: '#d19a66',
+    },
+    'hljs-selector-class': {
+      color: '#d19a66',
+    },
+    'hljs-selector-attr': {
+      color: '#d19a66',
+    },
+    'hljs-selector-pseudo': {
+      color: '#d19a66',
+    },
+    'hljs-number': {
+      color: '#d19a66',
+    },
+    'hljs-symbol': {
+      color: '#61aeee',
+    },
+    'hljs-bullet': {
+      color: '#61aeee',
+    },
+    'hljs-link': {
+      color: '#61aeee',
+      textDecoration: 'underline',
+    },
+    'hljs-meta': {
+      color: '#61aeee',
+    },
+    'hljs-selector-id': {
+      color: '#61aeee',
+    },
+    'hljs-title': {
+      color: '#61aeee',
+    },
+    'hljs-emphasis': {
+      fontStyle: 'italic',
+    },
+    'hljs-strong': {
+      fontWeight: 'bold',
+    },
   },
-  'hljs-comment': {
+  darkTheme,
-    color: '#5c6370',
+);
-    fontStyle: 'italic',
-  },
-  'hljs-quote': {
-    color: '#5c6370',
-    fontStyle: 'italic',
-  },
-  'hljs-doctag': {
-    color: '#c678dd',
-  },
-  'hljs-keyword': {
-    color: '#c678dd',
-  },
-  'hljs-formula': {
-    color: '#c678dd',
-  },
-  'hljs-section': {
-    color: '#e06c75',
-  },
-  'hljs-name': {
-    color: '#e06c75',
-  },
-  'hljs-selector-tag': {
-    color: '#e06c75',
-  },
-  'hljs-deletion': {
-    color: '#e06c75',
-  },
-  'hljs-subst': {
-    color: '#e06c75',
-  },
-  'hljs-literal': {
-    color: '#56b6c2',
-  },
-  'hljs-string': {
-    color: '#98c379',
-  },
-  'hljs-regexp': {
-    color: '#98c379',
-  },
-  'hljs-addition': {
-    color: '#98c379',
-  },
-  'hljs-attribute': {
-    color: '#98c379',
-  },
-  'hljs-meta-string': {
-    color: '#98c379',
-  },
-  'hljs-built_in': {
-    color: '#e6c07b',
-  },
-  'hljs-class .hljs-title': {
-    color: '#e6c07b',
-  },
-  'hljs-attr': {
-    color: '#d19a66',
-  },
-  'hljs-variable': {
-    color: '#d19a66',
-  },
-  'hljs-template-variable': {
-    color: '#d19a66',
-  },
-  'hljs-type': {
-    color: '#d19a66',
-  },
-  'hljs-selector-class': {
-    color: '#d19a66',
-  },
-  'hljs-selector-attr': {
-    color: '#d19a66',
-  },
-  'hljs-selector-pseudo': {
-    color: '#d19a66',
-  },
-  'hljs-number': {
-    color: '#d19a66',
-  },
-  'hljs-symbol': {
-    color: '#61aeee',
-  },
-  'hljs-bullet': {
-    color: '#61aeee',
-  },
-  'hljs-link': {
-    color: '#61aeee',
-    textDecoration: 'underline',
-  },
-  'hljs-meta': {
-    color: '#61aeee',
-  },
-  'hljs-selector-id': {
-    color: '#61aeee',
-  },
-  'hljs-title': {
-    color: '#61aeee',
-  },
-  'hljs-emphasis': {
-    fontStyle: 'italic',
-  },
-  'hljs-strong': {
-    fontWeight: 'bold',
-  },
-});

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

@@ -4,96 +4,100 @@
  * 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(
-  hljs: {
+  'Dracula',
-    display: 'block',
+  {
-    overflowX: 'auto',
+    hljs: {
-    padding: '0.5em',
+      display: 'block',
-    background: '#282a36',
+      overflowX: 'auto',
-    color: '#f8f8f2',
+      padding: '0.5em',
+      background: '#282a36',
+      color: '#f8f8f2',
+    },
+    'hljs-keyword': {
+      color: '#8be9fd',
+      fontWeight: 'bold',
+    },
+    'hljs-selector-tag': {
+      color: '#8be9fd',
+      fontWeight: 'bold',
+    },
+    'hljs-literal': {
+      color: '#8be9fd',
+      fontWeight: 'bold',
+    },
+    'hljs-section': {
+      color: '#8be9fd',
+      fontWeight: 'bold',
+    },
+    'hljs-link': {
+      color: '#8be9fd',
+    },
+    'hljs-function .hljs-keyword': {
+      color: '#ff79c6',
+    },
+    'hljs-subst': {
+      color: '#f8f8f2',
+    },
+    'hljs-string': {
+      color: '#f1fa8c',
+    },
+    'hljs-title': {
+      color: '#f1fa8c',
+      fontWeight: 'bold',
+    },
+    'hljs-name': {
+      color: '#f1fa8c',
+      fontWeight: 'bold',
+    },
+    'hljs-type': {
+      color: '#f1fa8c',
+      fontWeight: 'bold',
+    },
+    'hljs-attribute': {
+      color: '#f1fa8c',
+    },
+    'hljs-symbol': {
+      color: '#f1fa8c',
+    },
+    'hljs-bullet': {
+      color: '#f1fa8c',
+    },
+    'hljs-addition': {
+      color: '#f1fa8c',
+    },
+    'hljs-variable': {
+      color: '#f1fa8c',
+    },
+    'hljs-template-tag': {
+      color: '#f1fa8c',
+    },
+    'hljs-template-variable': {
+      color: '#f1fa8c',
+    },
+    'hljs-comment': {
+      color: '#6272a4',
+    },
+    'hljs-quote': {
+      color: '#6272a4',
+    },
+    'hljs-deletion': {
+      color: '#6272a4',
+    },
+    'hljs-meta': {
+      color: '#6272a4',
+    },
+    'hljs-doctag': {
+      fontWeight: 'bold',
+    },
+    'hljs-strong': {
+      fontWeight: 'bold',
+    },
+    'hljs-emphasis': {
+      fontStyle: 'italic',
+    },
   },
-  'hljs-keyword': {
+  darkTheme,
-    color: '#8be9fd',
+);
-    fontWeight: 'bold',
-  },
-  'hljs-selector-tag': {
-    color: '#8be9fd',
-    fontWeight: 'bold',
-  },
-  'hljs-literal': {
-    color: '#8be9fd',
-    fontWeight: 'bold',
-  },
-  'hljs-section': {
-    color: '#8be9fd',
-    fontWeight: 'bold',
-  },
-  'hljs-link': {
-    color: '#8be9fd',
-  },
-  'hljs-function .hljs-keyword': {
-    color: '#ff79c6',
-  },
-  'hljs-subst': {
-    color: '#f8f8f2',
-  },
-  'hljs-string': {
-    color: '#f1fa8c',
-  },
-  'hljs-title': {
-    color: '#f1fa8c',
-    fontWeight: 'bold',
-  },
-  'hljs-name': {
-    color: '#f1fa8c',
-    fontWeight: 'bold',
-  },
-  'hljs-type': {
-    color: '#f1fa8c',
-    fontWeight: 'bold',
-  },
-  'hljs-attribute': {
-    color: '#f1fa8c',
-  },
-  'hljs-symbol': {
-    color: '#f1fa8c',
-  },
-  'hljs-bullet': {
-    color: '#f1fa8c',
-  },
-  'hljs-addition': {
-    color: '#f1fa8c',
-  },
-  'hljs-variable': {
-    color: '#f1fa8c',
-  },
-  'hljs-template-tag': {
-    color: '#f1fa8c',
-  },
-  'hljs-template-variable': {
-    color: '#f1fa8c',
-  },
-  'hljs-comment': {
-    color: '#6272a4',
-  },
-  'hljs-quote': {
-    color: '#6272a4',
-  },
-  'hljs-deletion': {
-    color: '#6272a4',
-  },
-  'hljs-meta': {
-    color: '#6272a4',
-  },
-  'hljs-doctag': {
-    fontWeight: 'bold',
-  },
-  'hljs-strong': {
-    fontWeight: 'bold',
-  },
-  'hljs-emphasis': {
-    fontStyle: 'italic',
-  },
-});

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

@@ -4,121 +4,125 @@
  * 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(
-  hljs: {
+  'GitHub',
-    display: 'block',
+  {
-    overflowX: 'auto',
+    hljs: {
-    padding: '0.5em',
+      display: 'block',
-    color: '#333',
+      overflowX: 'auto',
-    background: '#f8f8f8',
+      padding: '0.5em',
+      color: '#333',
+      background: '#f8f8f8',
+    },
+    'hljs-comment': {
+      color: '#998',
+      fontStyle: 'italic',
+    },
+    'hljs-quote': {
+      color: '#998',
+      fontStyle: 'italic',
+    },
+    'hljs-keyword': {
+      color: '#333',
+      fontWeight: 'bold',
+    },
+    'hljs-selector-tag': {
+      color: '#333',
+      fontWeight: 'bold',
+    },
+    'hljs-subst': {
+      color: '#333',
+      fontWeight: 'normal',
+    },
+    'hljs-number': {
+      color: '#008080',
+    },
+    'hljs-literal': {
+      color: '#008080',
+    },
+    'hljs-variable': {
+      color: '#008080',
+    },
+    'hljs-template-variable': {
+      color: '#008080',
+    },
+    'hljs-tag .hljs-attr': {
+      color: '#008080',
+    },
+    'hljs-string': {
+      color: '#d14',
+    },
+    'hljs-doctag': {
+      color: '#d14',
+    },
+    'hljs-title': {
+      color: '#900',
+      fontWeight: 'bold',
+    },
+    'hljs-section': {
+      color: '#900',
+      fontWeight: 'bold',
+    },
+    'hljs-selector-id': {
+      color: '#900',
+      fontWeight: 'bold',
+    },
+    'hljs-type': {
+      color: '#458',
+      fontWeight: 'bold',
+    },
+    'hljs-class .hljs-title': {
+      color: '#458',
+      fontWeight: 'bold',
+    },
+    'hljs-tag': {
+      color: '#000080',
+      fontWeight: 'normal',
+    },
+    'hljs-name': {
+      color: '#000080',
+      fontWeight: 'normal',
+    },
+    'hljs-attribute': {
+      color: '#000080',
+      fontWeight: 'normal',
+    },
+    'hljs-regexp': {
+      color: '#009926',
+    },
+    'hljs-link': {
+      color: '#009926',
+    },
+    'hljs-symbol': {
+      color: '#990073',
+    },
+    'hljs-bullet': {
+      color: '#990073',
+    },
+    'hljs-built_in': {
+      color: '#0086b3',
+    },
+    'hljs-builtin-name': {
+      color: '#0086b3',
+    },
+    'hljs-meta': {
+      color: '#999',
+      fontWeight: 'bold',
+    },
+    'hljs-deletion': {
+      background: '#fdd',
+    },
+    'hljs-addition': {
+      background: '#dfd',
+    },
+    'hljs-emphasis': {
+      fontStyle: 'italic',
+    },
+    'hljs-strong': {
+      fontWeight: 'bold',
+    },
   },
-  'hljs-comment': {
+  lightTheme,
-    color: '#998',
+);
-    fontStyle: 'italic',
-  },
-  'hljs-quote': {
-    color: '#998',
-    fontStyle: 'italic',
-  },
-  'hljs-keyword': {
-    color: '#333',
-    fontWeight: 'bold',
-  },
-  'hljs-selector-tag': {
-    color: '#333',
-    fontWeight: 'bold',
-  },
-  'hljs-subst': {
-    color: '#333',
-    fontWeight: 'normal',
-  },
-  'hljs-number': {
-    color: '#008080',
-  },
-  'hljs-literal': {
-    color: '#008080',
-  },
-  'hljs-variable': {
-    color: '#008080',
-  },
-  'hljs-template-variable': {
-    color: '#008080',
-  },
-  'hljs-tag .hljs-attr': {
-    color: '#008080',
-  },
-  'hljs-string': {
-    color: '#d14',
-  },
-  'hljs-doctag': {
-    color: '#d14',
-  },
-  'hljs-title': {
-    color: '#900',
-    fontWeight: 'bold',
-  },
-  'hljs-section': {
-    color: '#900',
-    fontWeight: 'bold',
-  },
-  'hljs-selector-id': {
-    color: '#900',
-    fontWeight: 'bold',
-  },
-  'hljs-type': {
-    color: '#458',
-    fontWeight: 'bold',
-  },
-  'hljs-class .hljs-title': {
-    color: '#458',
-    fontWeight: 'bold',
-  },
-  'hljs-tag': {
-    color: '#000080',
-    fontWeight: 'normal',
-  },
-  'hljs-name': {
-    color: '#000080',
-    fontWeight: 'normal',
-  },
-  'hljs-attribute': {
-    color: '#000080',
-    fontWeight: 'normal',
-  },
-  'hljs-regexp': {
-    color: '#009926',
-  },
-  'hljs-link': {
-    color: '#009926',
-  },
-  'hljs-symbol': {
-    color: '#990073',
-  },
-  'hljs-bullet': {
-    color: '#990073',
-  },
-  'hljs-built_in': {
-    color: '#0086b3',
-  },
-  'hljs-builtin-name': {
-    color: '#0086b3',
-  },
-  'hljs-meta': {
-    color: '#999',
-    fontWeight: 'bold',
-  },
-  'hljs-deletion': {
-    background: '#fdd',
-  },
-  'hljs-addition': {
-    background: '#dfd',
-  },
-  'hljs-emphasis': {
-    fontStyle: 'italic',
-  },
-  'hljs-strong': {
-    fontWeight: 'bold',
-  },
-});

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

@@ -4,118 +4,122 @@
  * 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(
-  hljs: {
+  'Google Code',
-    display: 'block',
+  {
-    overflowX: 'auto',
+    hljs: {
-    padding: '0.5em',
+      display: 'block',
-    background: 'white',
+      overflowX: 'auto',
-    color: 'black',
+      padding: '0.5em',
+      background: 'white',
+      color: 'black',
+    },
+    'hljs-comment': {
+      color: '#800',
+    },
+    'hljs-quote': {
+      color: '#800',
+    },
+    'hljs-keyword': {
+      color: '#008',
+    },
+    'hljs-selector-tag': {
+      color: '#008',
+    },
+    'hljs-section': {
+      color: '#008',
+    },
+    'hljs-title': {
+      color: '#606',
+    },
+    'hljs-name': {
+      color: '#008',
+    },
+    'hljs-variable': {
+      color: '#660',
+    },
+    'hljs-template-variable': {
+      color: '#660',
+    },
+    'hljs-string': {
+      color: '#080',
+    },
+    'hljs-selector-attr': {
+      color: '#080',
+    },
+    'hljs-selector-pseudo': {
+      color: '#080',
+    },
+    'hljs-regexp': {
+      color: '#080',
+    },
+    'hljs-literal': {
+      color: '#066',
+    },
+    'hljs-symbol': {
+      color: '#066',
+    },
+    'hljs-bullet': {
+      color: '#066',
+    },
+    'hljs-meta': {
+      color: '#066',
+    },
+    'hljs-number': {
+      color: '#066',
+    },
+    'hljs-link': {
+      color: '#066',
+    },
+    'hljs-doctag': {
+      color: '#606',
+      fontWeight: 'bold',
+    },
+    'hljs-type': {
+      color: '#606',
+    },
+    'hljs-attr': {
+      color: '#606',
+    },
+    'hljs-built_in': {
+      color: '#606',
+    },
+    'hljs-builtin-name': {
+      color: '#606',
+    },
+    'hljs-params': {
+      color: '#606',
+    },
+    'hljs-attribute': {
+      color: '#000',
+    },
+    'hljs-subst': {
+      color: '#000',
+    },
+    'hljs-formula': {
+      backgroundColor: '#eee',
+      fontStyle: 'italic',
+    },
+    'hljs-selector-id': {
+      color: '#9B703F',
+    },
+    'hljs-selector-class': {
+      color: '#9B703F',
+    },
+    'hljs-addition': {
+      backgroundColor: '#baeeba',
+    },
+    'hljs-deletion': {
+      backgroundColor: '#ffc8bd',
+    },
+    'hljs-strong': {
+      fontWeight: 'bold',
+    },
+    'hljs-emphasis': {
+      fontStyle: 'italic',
+    },
   },
-  'hljs-comment': {
+  lightTheme,
-    color: '#800',
+);
-  },
-  'hljs-quote': {
-    color: '#800',
-  },
-  'hljs-keyword': {
-    color: '#008',
-  },
-  'hljs-selector-tag': {
-    color: '#008',
-  },
-  'hljs-section': {
-    color: '#008',
-  },
-  'hljs-title': {
-    color: '#606',
-  },
-  'hljs-name': {
-    color: '#008',
-  },
-  'hljs-variable': {
-    color: '#660',
-  },
-  'hljs-template-variable': {
-    color: '#660',
-  },
-  'hljs-string': {
-    color: '#080',
-  },
-  'hljs-selector-attr': {
-    color: '#080',
-  },
-  'hljs-selector-pseudo': {
-    color: '#080',
-  },
-  'hljs-regexp': {
-    color: '#080',
-  },
-  'hljs-literal': {
-    color: '#066',
-  },
-  'hljs-symbol': {
-    color: '#066',
-  },
-  'hljs-bullet': {
-    color: '#066',
-  },
-  'hljs-meta': {
-    color: '#066',
-  },
-  'hljs-number': {
-    color: '#066',
-  },
-  'hljs-link': {
-    color: '#066',
-  },
-  'hljs-doctag': {
-    color: '#606',
-    fontWeight: 'bold',
-  },
-  'hljs-type': {
-    color: '#606',
-  },
-  'hljs-attr': {
-    color: '#606',
-  },
-  'hljs-built_in': {
-    color: '#606',
-  },
-  'hljs-builtin-name': {
-    color: '#606',
-  },
-  'hljs-params': {
-    color: '#606',
-  },
-  'hljs-attribute': {
-    color: '#000',
-  },
-  'hljs-subst': {
-    color: '#000',
-  },
-  'hljs-formula': {
-    backgroundColor: '#eee',
-    fontStyle: 'italic',
-  },
-  'hljs-selector-id': {
-    color: '#9B703F',
-  },
-  'hljs-selector-class': {
-    color: '#9B703F',
-  },
-  'hljs-addition': {
-    backgroundColor: '#baeeba',
-  },
-  'hljs-deletion': {
-    backgroundColor: '#ffc8bd',
-  },
-  'hljs-strong': {
-    fontWeight: 'bold',
-  },
-  'hljs-emphasis': {
-    fontStyle: 'italic',
-  },
-});

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,98 +4,102 @@
  * 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(
-  hljs: {
+  'VS',
-    display: 'block',
+  {
-    overflowX: 'auto',
+    hljs: {
-    padding: '0.5em',
+      display: 'block',
-    background: 'white',
+      overflowX: 'auto',
-    color: 'black',
+      padding: '0.5em',
+      background: 'white',
+      color: 'black',
+    },
+    'hljs-comment': {
+      color: '#008000',
+    },
+    'hljs-quote': {
+      color: '#008000',
+    },
+    'hljs-variable': {
+      color: '#008000',
+    },
+    'hljs-keyword': {
+      color: '#00f',
+    },
+    'hljs-selector-tag': {
+      color: '#00f',
+    },
+    'hljs-built_in': {
+      color: '#00f',
+    },
+    'hljs-name': {
+      color: '#00f',
+    },
+    'hljs-tag': {
+      color: '#00f',
+    },
+    'hljs-string': {
+      color: '#a31515',
+    },
+    'hljs-title': {
+      color: '#a31515',
+    },
+    'hljs-section': {
+      color: '#a31515',
+    },
+    'hljs-attribute': {
+      color: '#a31515',
+    },
+    'hljs-literal': {
+      color: '#a31515',
+    },
+    'hljs-template-tag': {
+      color: '#a31515',
+    },
+    'hljs-template-variable': {
+      color: '#a31515',
+    },
+    'hljs-type': {
+      color: '#a31515',
+    },
+    'hljs-addition': {
+      color: '#a31515',
+    },
+    'hljs-deletion': {
+      color: '#2b91af',
+    },
+    'hljs-selector-attr': {
+      color: '#2b91af',
+    },
+    'hljs-selector-pseudo': {
+      color: '#2b91af',
+    },
+    'hljs-meta': {
+      color: '#2b91af',
+    },
+    'hljs-doctag': {
+      color: '#808080',
+    },
+    'hljs-attr': {
+      color: '#f00',
+    },
+    'hljs-symbol': {
+      color: '#00b0e8',
+    },
+    'hljs-bullet': {
+      color: '#00b0e8',
+    },
+    'hljs-link': {
+      color: '#00b0e8',
+    },
+    'hljs-emphasis': {
+      fontStyle: 'italic',
+    },
+    'hljs-strong': {
+      fontWeight: 'bold',
+    },
   },
-  'hljs-comment': {
+  lightTheme,
-    color: '#008000',
+);
-  },
-  'hljs-quote': {
-    color: '#008000',
-  },
-  'hljs-variable': {
-    color: '#008000',
-  },
-  'hljs-keyword': {
-    color: '#00f',
-  },
-  'hljs-selector-tag': {
-    color: '#00f',
-  },
-  'hljs-built_in': {
-    color: '#00f',
-  },
-  'hljs-name': {
-    color: '#00f',
-  },
-  'hljs-tag': {
-    color: '#00f',
-  },
-  'hljs-string': {
-    color: '#a31515',
-  },
-  'hljs-title': {
-    color: '#a31515',
-  },
-  'hljs-section': {
-    color: '#a31515',
-  },
-  'hljs-attribute': {
-    color: '#a31515',
-  },
-  'hljs-literal': {
-    color: '#a31515',
-  },
-  'hljs-template-tag': {
-    color: '#a31515',
-  },
-  'hljs-template-variable': {
-    color: '#a31515',
-  },
-  'hljs-type': {
-    color: '#a31515',
-  },
-  'hljs-addition': {
-    color: '#a31515',
-  },
-  'hljs-deletion': {
-    color: '#2b91af',
-  },
-  'hljs-selector-attr': {
-    color: '#2b91af',
-  },
-  'hljs-selector-pseudo': {
-    color: '#2b91af',
-  },
-  'hljs-meta': {
-    color: '#2b91af',
-  },
-  'hljs-doctag': {
-    color: '#808080',
-  },
-  'hljs-attr': {
-    color: '#f00',
-  },
-  'hljs-symbol': {
-    color: '#00b0e8',
-  },
-  'hljs-bullet': {
-    color: '#00b0e8',
-  },
-  'hljs-link': {
-    color: '#00b0e8',
-  },
-  'hljs-emphasis': {
-    fontStyle: 'italic',
-  },
-  'hljs-strong': {
-    fontWeight: 'bold',
-  },
-});

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

@@ -4,141 +4,145 @@
  * 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(
-  hljs: {
+  'VS2015',
-    display: 'block',
+  {
-    overflowX: 'auto',
+    hljs: {
-    padding: '0.5em',
+      display: 'block',
-    background: '#1E1E1E',
+      overflowX: 'auto',
-    color: '#DCDCDC',
+      padding: '0.5em',
+      background: '#1E1E1E',
+      color: '#DCDCDC',
+    },
+    'hljs-keyword': {
+      color: '#569CD6',
+    },
+    'hljs-literal': {
+      color: '#569CD6',
+    },
+    'hljs-symbol': {
+      color: '#569CD6',
+    },
+    'hljs-name': {
+      color: '#569CD6',
+    },
+    'hljs-link': {
+      color: '#569CD6',
+      textDecoration: 'underline',
+    },
+    'hljs-built_in': {
+      color: '#4EC9B0',
+    },
+    'hljs-type': {
+      color: '#4EC9B0',
+    },
+    'hljs-number': {
+      color: '#B8D7A3',
+    },
+    'hljs-class': {
+      color: '#B8D7A3',
+    },
+    'hljs-string': {
+      color: '#D69D85',
+    },
+    'hljs-meta-string': {
+      color: '#D69D85',
+    },
+    'hljs-regexp': {
+      color: '#9A5334',
+    },
+    'hljs-template-tag': {
+      color: '#9A5334',
+    },
+    'hljs-subst': {
+      color: '#DCDCDC',
+    },
+    'hljs-function': {
+      color: '#DCDCDC',
+    },
+    'hljs-title': {
+      color: '#DCDCDC',
+    },
+    'hljs-params': {
+      color: '#DCDCDC',
+    },
+    'hljs-formula': {
+      color: '#DCDCDC',
+    },
+    'hljs-comment': {
+      color: '#57A64A',
+      fontStyle: 'italic',
+    },
+    'hljs-quote': {
+      color: '#57A64A',
+      fontStyle: 'italic',
+    },
+    'hljs-doctag': {
+      color: '#608B4E',
+    },
+    'hljs-meta': {
+      color: '#9B9B9B',
+    },
+    'hljs-meta-keyword': {
+      color: '#9B9B9B',
+    },
+    'hljs-tag': {
+      color: '#9B9B9B',
+    },
+    'hljs-variable': {
+      color: '#BD63C5',
+    },
+    'hljs-template-variable': {
+      color: '#BD63C5',
+    },
+    'hljs-attr': {
+      color: '#9CDCFE',
+    },
+    'hljs-attribute': {
+      color: '#9CDCFE',
+    },
+    'hljs-builtin-name': {
+      color: '#9CDCFE',
+    },
+    'hljs-section': {
+      color: 'gold',
+    },
+    'hljs-emphasis': {
+      fontStyle: 'italic',
+    },
+    'hljs-strong': {
+      fontWeight: 'bold',
+    },
+    'hljs-bullet': {
+      color: '#D7BA7D',
+    },
+    'hljs-selector-tag': {
+      color: '#D7BA7D',
+    },
+    'hljs-selector-id': {
+      color: '#D7BA7D',
+    },
+    'hljs-selector-class': {
+      color: '#D7BA7D',
+    },
+    'hljs-selector-attr': {
+      color: '#D7BA7D',
+    },
+    'hljs-selector-pseudo': {
+      color: '#D7BA7D',
+    },
+    'hljs-addition': {
+      backgroundColor: '#144212',
+      display: 'inline-block',
+      width: '100%',
+    },
+    'hljs-deletion': {
+      backgroundColor: '#600',
+      display: 'inline-block',
+      width: '100%',
+    },
   },
-  'hljs-keyword': {
+  darkTheme,
-    color: '#569CD6',
+);
-  },
-  'hljs-literal': {
-    color: '#569CD6',
-  },
-  'hljs-symbol': {
-    color: '#569CD6',
-  },
-  'hljs-name': {
-    color: '#569CD6',
-  },
-  'hljs-link': {
-    color: '#569CD6',
-    textDecoration: 'underline',
-  },
-  'hljs-built_in': {
-    color: '#4EC9B0',
-  },
-  'hljs-type': {
-    color: '#4EC9B0',
-  },
-  'hljs-number': {
-    color: '#B8D7A3',
-  },
-  'hljs-class': {
-    color: '#B8D7A3',
-  },
-  'hljs-string': {
-    color: '#D69D85',
-  },
-  'hljs-meta-string': {
-    color: '#D69D85',
-  },
-  'hljs-regexp': {
-    color: '#9A5334',
-  },
-  'hljs-template-tag': {
-    color: '#9A5334',
-  },
-  'hljs-subst': {
-    color: '#DCDCDC',
-  },
-  'hljs-function': {
-    color: '#DCDCDC',
-  },
-  'hljs-title': {
-    color: '#DCDCDC',
-  },
-  'hljs-params': {
-    color: '#DCDCDC',
-  },
-  'hljs-formula': {
-    color: '#DCDCDC',
-  },
-  'hljs-comment': {
-    color: '#57A64A',
-    fontStyle: 'italic',
-  },
-  'hljs-quote': {
-    color: '#57A64A',
-    fontStyle: 'italic',
-  },
-  'hljs-doctag': {
-    color: '#608B4E',
-  },
-  'hljs-meta': {
-    color: '#9B9B9B',
-  },
-  'hljs-meta-keyword': {
-    color: '#9B9B9B',
-  },
-  'hljs-tag': {
-    color: '#9B9B9B',
-  },
-  'hljs-variable': {
-    color: '#BD63C5',
-  },
-  'hljs-template-variable': {
-    color: '#BD63C5',
-  },
-  'hljs-attr': {
-    color: '#9CDCFE',
-  },
-  'hljs-attribute': {
-    color: '#9CDCFE',
-  },
-  'hljs-builtin-name': {
-    color: '#9CDCFE',
-  },
-  'hljs-section': {
-    color: 'gold',
-  },
-  'hljs-emphasis': {
-    fontStyle: 'italic',
-  },
-  'hljs-strong': {
-    fontWeight: 'bold',
-  },
-  'hljs-bullet': {
-    color: '#D7BA7D',
-  },
-  'hljs-selector-tag': {
-    color: '#D7BA7D',
-  },
-  'hljs-selector-id': {
-    color: '#D7BA7D',
-  },
-  'hljs-selector-class': {
-    color: '#D7BA7D',
-  },
-  'hljs-selector-attr': {
-    color: '#D7BA7D',
-  },
-  'hljs-selector-pseudo': {
-    color: '#D7BA7D',
-  },
-  'hljs-addition': {
-    backgroundColor: '#144212',
-    display: 'inline-block',
-    width: '100%',
-  },
-  'hljs-deletion': {
-    backgroundColor: '#600',
-    display: 'inline-block',
-    width: '100%',
-  },
-});

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

@@ -4,126 +4,130 @@
  * 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(
-  hljs: {
+  'XCode',
-    display: 'block',
+  {
-    overflowX: 'auto',
+    hljs: {
-    padding: '0.5em',
+      display: 'block',
-    background: '#fff',
+      overflowX: 'auto',
-    color: 'black',
+      padding: '0.5em',
+      background: '#fff',
+      color: 'black',
+    },
+    'xml .hljs-meta': {
+      color: '#c0c0c0',
+    },
+    'hljs-comment': {
+      color: '#007400',
+    },
+    'hljs-quote': {
+      color: '#007400',
+    },
+    'hljs-tag': {
+      color: '#aa0d91',
+    },
+    'hljs-attribute': {
+      color: '#aa0d91',
+    },
+    'hljs-keyword': {
+      color: '#aa0d91',
+    },
+    'hljs-selector-tag': {
+      color: '#aa0d91',
+    },
+    'hljs-literal': {
+      color: '#aa0d91',
+    },
+    'hljs-name': {
+      color: '#aa0d91',
+    },
+    'hljs-variable': {
+      color: '#3F6E74',
+    },
+    'hljs-template-variable': {
+      color: '#3F6E74',
+    },
+    'hljs-code': {
+      color: '#c41a16',
+    },
+    'hljs-string': {
+      color: '#c41a16',
+    },
+    'hljs-meta-string': {
+      color: '#c41a16',
+    },
+    'hljs-regexp': {
+      color: '#0E0EFF',
+    },
+    'hljs-link': {
+      color: '#0E0EFF',
+    },
+    'hljs-title': {
+      color: '#1c00cf',
+    },
+    'hljs-symbol': {
+      color: '#1c00cf',
+    },
+    'hljs-bullet': {
+      color: '#1c00cf',
+    },
+    'hljs-number': {
+      color: '#1c00cf',
+    },
+    'hljs-section': {
+      color: '#643820',
+    },
+    'hljs-meta': {
+      color: '#643820',
+    },
+    'hljs-class .hljs-title': {
+      color: '#5c2699',
+    },
+    'hljs-type': {
+      color: '#5c2699',
+    },
+    'hljs-built_in': {
+      color: '#5c2699',
+    },
+    'hljs-builtin-name': {
+      color: '#5c2699',
+    },
+    'hljs-params': {
+      color: '#5c2699',
+    },
+    'hljs-attr': {
+      color: '#836C28',
+    },
+    'hljs-subst': {
+      color: '#000',
+    },
+    'hljs-formula': {
+      backgroundColor: '#eee',
+      fontStyle: 'italic',
+    },
+    'hljs-addition': {
+      backgroundColor: '#baeeba',
+    },
+    'hljs-deletion': {
+      backgroundColor: '#ffc8bd',
+    },
+    'hljs-selector-id': {
+      color: '#9b703f',
+    },
+    'hljs-selector-class': {
+      color: '#9b703f',
+    },
+    'hljs-doctag': {
+      fontWeight: 'bold',
+    },
+    'hljs-strong': {
+      fontWeight: 'bold',
+    },
+    'hljs-emphasis': {
+      fontStyle: 'italic',
+    },
   },
-  'xml .hljs-meta': {
+  lightTheme,
-    color: '#c0c0c0',
+);
-  },
-  'hljs-comment': {
-    color: '#007400',
-  },
-  'hljs-quote': {
-    color: '#007400',
-  },
-  'hljs-tag': {
-    color: '#aa0d91',
-  },
-  'hljs-attribute': {
-    color: '#aa0d91',
-  },
-  'hljs-keyword': {
-    color: '#aa0d91',
-  },
-  'hljs-selector-tag': {
-    color: '#aa0d91',
-  },
-  'hljs-literal': {
-    color: '#aa0d91',
-  },
-  'hljs-name': {
-    color: '#aa0d91',
-  },
-  'hljs-variable': {
-    color: '#3F6E74',
-  },
-  'hljs-template-variable': {
-    color: '#3F6E74',
-  },
-  'hljs-code': {
-    color: '#c41a16',
-  },
-  'hljs-string': {
-    color: '#c41a16',
-  },
-  'hljs-meta-string': {
-    color: '#c41a16',
-  },
-  'hljs-regexp': {
-    color: '#0E0EFF',
-  },
-  'hljs-link': {
-    color: '#0E0EFF',
-  },
-  'hljs-title': {
-    color: '#1c00cf',
-  },
-  'hljs-symbol': {
-    color: '#1c00cf',
-  },
-  'hljs-bullet': {
-    color: '#1c00cf',
-  },
-  'hljs-number': {
-    color: '#1c00cf',
-  },
-  'hljs-section': {
-    color: '#643820',
-  },
-  'hljs-meta': {
-    color: '#643820',
-  },
-  'hljs-class .hljs-title': {
-    color: '#5c2699',
-  },
-  'hljs-type': {
-    color: '#5c2699',
-  },
-  'hljs-built_in': {
-    color: '#5c2699',
-  },
-  'hljs-builtin-name': {
-    color: '#5c2699',
-  },
-  'hljs-params': {
-    color: '#5c2699',
-  },
-  'hljs-attr': {
-    color: '#836C28',
-  },
-  'hljs-subst': {
-    color: '#000',
-  },
-  'hljs-formula': {
-    backgroundColor: '#eee',
-    fontStyle: 'italic',
-  },
-  'hljs-addition': {
-    backgroundColor: '#baeeba',
-  },
-  'hljs-deletion': {
-    backgroundColor: '#ffc8bd',
-  },
-  'hljs-selector-id': {
-    color: '#9b703f',
-  },
-  'hljs-selector-class': {
-    color: '#9b703f',
-  },
-  'hljs-doctag': {
-    fontWeight: 'bold',
-  },
-  'hljs-strong': {
-    fontWeight: 'bold',
-  },
-  'hljs-emphasis': {
-    fontStyle: 'italic',
-  },
-});