Allow themes to theme the UI (#769)

2025-12-20 16:57:46 +00:00 · 2025-06-05 14:35:47 -07:00
parent 2285bba66e
commit 8a0a2523ca
33 changed files with 533 additions and 385 deletions
--- a/packages/cli/src/ui/themes/ansi-light.ts
+++ b/packages/cli/src/ui/themes/ansi-light.ts
@@ -4,7 +4,23 @@
 * SPDX-License-Identifier: Apache-2.0
 */

-import { lightTheme, Theme } from './theme.js';
+import { lightTheme, Theme, type ColorsTheme } from './theme.js';
+
+const ansiLightColors: ColorsTheme = {
+  type: 'light',
+  Background: 'white',
+  Foreground: 'black',
+  LightBlue: 'blue',
+  AccentBlue: 'blue',
+  AccentPurple: 'purple',
+  AccentCyan: 'cyan',
+  AccentGreen: 'green',
+  AccentYellow: 'orange',
+  AccentRed: 'red',
+  Comment: 'gray',
+  Gray: 'gray',
+  GradientColors: lightTheme.GradientColors,
+};

 export const ANSILight: Theme = new Theme(
  'ANSI Light',
@@ -126,5 +142,5 @@ export const ANSILight: Theme = new Theme(
      color: 'orange',
    },
  },
-  lightTheme,
+  ansiLightColors,
 );
--- a/packages/cli/src/ui/themes/ansi.ts
+++ b/packages/cli/src/ui/themes/ansi.ts
@@ -4,11 +4,27 @@
 * SPDX-License-Identifier: Apache-2.0
 */

-import { darkTheme, Theme } from './theme.js';
+import { darkTheme, Theme, type ColorsTheme } from './theme.js';
+
+const ansiColors: ColorsTheme = {
+  type: 'dark',
+  Background: 'black',
+  Foreground: 'white',
+  LightBlue: 'bluebright',
+  AccentBlue: '#0000FF',
+  AccentPurple: 'magenta',
+  AccentCyan: 'cyan',
+  AccentGreen: 'green',
+  AccentYellow: 'yellow',
+  AccentRed: 'red',
+  Comment: 'gray',
+  Gray: 'gray',
+  GradientColors: darkTheme.GradientColors, // Fallback
+};

 export const ANSI: Theme = new Theme(
  'ANSI',
-  'dark',
+  'dark', // Consistent with its color palette base
  {
    hljs: {
      display: 'block',
@@ -135,5 +151,5 @@ export const ANSI: Theme = new Theme(
      color: 'yellow', // Mapped from #D7BA7D
    },
  },
-  darkTheme,
+  ansiColors,
 );
--- a/packages/cli/src/ui/themes/atom-one-dark.ts
+++ b/packages/cli/src/ui/themes/atom-one-dark.ts
@@ -4,7 +4,23 @@
 * SPDX-License-Identifier: Apache-2.0
 */

-import { darkTheme, Theme } from './theme.js';
+import { darkTheme, Theme, type ColorsTheme } from './theme.js';
+
+const atomOneDarkColors: ColorsTheme = {
+  type: 'dark',
+  Background: '#282c34',
+  Foreground: '#abb2bf',
+  LightBlue: '#61aeee',
+  AccentBlue: '#61aeee',
+  AccentPurple: '#c678dd',
+  AccentCyan: '#56b6c2',
+  AccentGreen: '#98c379',
+  AccentYellow: '#e6c07b',
+  AccentRed: '#e06c75',
+  Comment: '#5c6370',
+  Gray: '#5c6370',
+  GradientColors: darkTheme.GradientColors,
+};

 export const AtomOneDark: Theme = new Theme(
  'Atom One',
@@ -14,107 +30,107 @@ export const AtomOneDark: Theme = new Theme(
      display: 'block',
      overflowX: 'auto',
      padding: '0.5em',
-      color: '#abb2bf',
-      background: '#282c34',
+      color: atomOneDarkColors.Foreground,
+      background: atomOneDarkColors.Background,
    },
    'hljs-comment': {
-      color: '#5c6370',
+      color: atomOneDarkColors.Comment,
      fontStyle: 'italic',
    },
    'hljs-quote': {
-      color: '#5c6370',
+      color: atomOneDarkColors.Comment,
      fontStyle: 'italic',
    },
    'hljs-doctag': {
-      color: '#c678dd',
+      color: atomOneDarkColors.AccentPurple,
    },
    'hljs-keyword': {
-      color: '#c678dd',
+      color: atomOneDarkColors.AccentPurple,
    },
    'hljs-formula': {
-      color: '#c678dd',
+      color: atomOneDarkColors.AccentPurple,
    },
    'hljs-section': {
-      color: '#e06c75',
+      color: atomOneDarkColors.AccentRed,
    },
    'hljs-name': {
-      color: '#e06c75',
+      color: atomOneDarkColors.AccentRed,
    },
    'hljs-selector-tag': {
-      color: '#e06c75',
+      color: atomOneDarkColors.AccentRed,
    },
    'hljs-deletion': {
-      color: '#e06c75',
+      color: atomOneDarkColors.AccentRed,
    },
    'hljs-subst': {
-      color: '#e06c75',
+      color: atomOneDarkColors.AccentRed,
    },
    'hljs-literal': {
-      color: '#56b6c2',
+      color: atomOneDarkColors.AccentCyan,
    },
    'hljs-string': {
-      color: '#98c379',
+      color: atomOneDarkColors.AccentGreen,
    },
    'hljs-regexp': {
-      color: '#98c379',
+      color: atomOneDarkColors.AccentGreen,
    },
    'hljs-addition': {
-      color: '#98c379',
+      color: atomOneDarkColors.AccentGreen,
    },
    'hljs-attribute': {
-      color: '#98c379',
+      color: atomOneDarkColors.AccentGreen,
    },
    'hljs-meta-string': {
-      color: '#98c379',
+      color: atomOneDarkColors.AccentGreen,
    },
    'hljs-built_in': {
-      color: '#e6c07b',
+      color: atomOneDarkColors.AccentYellow,
    },
    'hljs-class .hljs-title': {
-      color: '#e6c07b',
+      color: atomOneDarkColors.AccentYellow,
    },
    'hljs-attr': {
-      color: '#d19a66',
+      color: atomOneDarkColors.AccentYellow,
    },
    'hljs-variable': {
-      color: '#d19a66',
+      color: atomOneDarkColors.AccentYellow,
    },
    'hljs-template-variable': {
-      color: '#d19a66',
+      color: atomOneDarkColors.AccentYellow,
    },
    'hljs-type': {
-      color: '#d19a66',
+      color: atomOneDarkColors.AccentYellow,
    },
    'hljs-selector-class': {
-      color: '#d19a66',
+      color: atomOneDarkColors.AccentYellow,
    },
    'hljs-selector-attr': {
-      color: '#d19a66',
+      color: atomOneDarkColors.AccentYellow,
    },
    'hljs-selector-pseudo': {
-      color: '#d19a66',
+      color: atomOneDarkColors.AccentYellow,
    },
    'hljs-number': {
-      color: '#d19a66',
+      color: atomOneDarkColors.AccentYellow,
    },
    'hljs-symbol': {
-      color: '#61aeee',
+      color: atomOneDarkColors.AccentBlue,
    },
    'hljs-bullet': {
-      color: '#61aeee',
+      color: atomOneDarkColors.AccentBlue,
    },
    'hljs-link': {
-      color: '#61aeee',
+      color: atomOneDarkColors.AccentBlue,
      textDecoration: 'underline',
    },
    'hljs-meta': {
-      color: '#61aeee',
+      color: atomOneDarkColors.AccentBlue,
    },
    'hljs-selector-id': {
-      color: '#61aeee',
+      color: atomOneDarkColors.AccentBlue,
    },
    'hljs-title': {
-      color: '#61aeee',
+      color: atomOneDarkColors.AccentBlue,
    },
    'hljs-emphasis': {
      fontStyle: 'italic',
@@ -123,5 +139,5 @@ export const AtomOneDark: Theme = new Theme(
      fontWeight: 'bold',
    },
  },
-  darkTheme,
+  atomOneDarkColors,
 );
--- a/packages/cli/src/ui/themes/ayu-light.ts
+++ b/packages/cli/src/ui/themes/ayu-light.ts
@@ -4,7 +4,23 @@
 * SPDX-License-Identifier: Apache-2.0
 */

-import { lightTheme, Theme } from './theme.js';
+import { lightTheme, Theme, type ColorsTheme } from './theme.js';
+
+const ayuLightColors: ColorsTheme = {
+  type: 'light',
+  Background: '#f8f9fa',
+  Foreground: '#5c6166',
+  LightBlue: '#55b4d4',
+  AccentBlue: '#399ee6',
+  AccentPurple: '#a37acc',
+  AccentCyan: '#4cbf99',
+  AccentGreen: '#86b300',
+  AccentYellow: '#f2ae49',
+  AccentRed: '#f07171',
+  Comment: '#ABADB1',
+  Gray: '#CCCFD3',
+  GradientColors: lightTheme.GradientColors,
+};

 export const AyuLight: Theme = new Theme(
  'Ayu Light',
@@ -14,84 +30,84 @@ export const AyuLight: Theme = new Theme(
      display: 'block',
      overflowX: 'auto',
      padding: '0.5em',
-      background: '#f8f9fa',
-      color: '#5c6166',
+      background: ayuLightColors.Background,
+      color: ayuLightColors.Foreground,
    },
    'hljs-comment': {
-      color: '#787b80',
+      color: ayuLightColors.Comment,
      fontStyle: 'italic',
    },
    'hljs-quote': {
-      color: '#4cbf99',
+      color: ayuLightColors.AccentCyan,
      fontStyle: 'italic',
    },
    'hljs-string': {
-      color: '#86b300',
+      color: ayuLightColors.AccentGreen,
    },
    'hljs-constant': {
-      color: '#4cbf99',
+      color: ayuLightColors.AccentCyan,
    },
    'hljs-number': {
-      color: '#a37acc',
+      color: ayuLightColors.AccentPurple,
    },
    'hljs-keyword': {
-      color: '#fa8d3e',
+      color: ayuLightColors.AccentYellow,
    },
    'hljs-selector-tag': {
-      color: '#fa8d3e',
+      color: ayuLightColors.AccentYellow,
    },
    'hljs-attribute': {
-      color: '#f2ae49',
+      color: ayuLightColors.AccentYellow,
    },
    'hljs-variable': {
-      color: '#5c6166',
+      color: ayuLightColors.Foreground,
    },
    'hljs-variable.language': {
-      color: '#55b4d4',
+      color: ayuLightColors.LightBlue,
      fontStyle: 'italic',
    },
    'hljs-title': {
-      color: '#399ee6',
+      color: ayuLightColors.AccentBlue,
    },
    'hljs-section': {
-      color: '#86b300',
+      color: ayuLightColors.AccentGreen,
      fontWeight: 'bold',
    },
    'hljs-type': {
-      color: '#55b4d4',
+      color: ayuLightColors.LightBlue,
    },
    'hljs-class .hljs-title': {
-      color: '#399ee6',
+      color: ayuLightColors.AccentBlue,
    },
    'hljs-tag': {
-      color: '#55b4d4',
+      color: ayuLightColors.LightBlue,
    },
    'hljs-name': {
-      color: '#399ee6',
+      color: ayuLightColors.AccentBlue,
    },
    'hljs-builtin-name': {
-      color: '#f2ae49',
+      color: ayuLightColors.AccentYellow,
    },
    'hljs-meta': {
-      color: '#e6ba7e',
+      color: ayuLightColors.AccentYellow,
    },
    'hljs-symbol': {
-      color: '#f07171',
+      color: ayuLightColors.AccentRed,
    },
    'hljs-bullet': {
-      color: '#f2ae49',
+      color: ayuLightColors.AccentYellow,
    },
    'hljs-regexp': {
-      color: '#4cbf99',
+      color: ayuLightColors.AccentCyan,
    },
    'hljs-link': {
-      color: '#55b4d4',
+      color: ayuLightColors.LightBlue,
    },
    'hljs-deletion': {
-      color: '#ff7383',
+      color: ayuLightColors.AccentRed,
    },
    'hljs-addition': {
-      color: '#6cbf43',
+      color: ayuLightColors.AccentGreen,
    },
    'hljs-emphasis': {
      fontStyle: 'italic',
@@ -100,20 +116,20 @@ export const AyuLight: Theme = new Theme(
      fontWeight: 'bold',
    },
    'hljs-literal': {
-      color: '#4cbf99',
+      color: ayuLightColors.AccentCyan,
    },
    'hljs-built_in': {
-      color: '#f07171',
+      color: ayuLightColors.AccentRed,
    },
    'hljs-doctag': {
-      color: '#d14',
+      color: ayuLightColors.AccentRed,
    },
    'hljs-template-variable': {
-      color: '#008080',
+      color: ayuLightColors.AccentCyan,
    },
    'hljs-selector-id': {
-      color: '#900',
+      color: ayuLightColors.AccentRed,
    },
  },
-  lightTheme,
+  ayuLightColors,
 );
--- a/packages/cli/src/ui/themes/ayu.ts
+++ b/packages/cli/src/ui/themes/ayu.ts
@@ -4,7 +4,23 @@
 * SPDX-License-Identifier: Apache-2.0
 */

-import { darkTheme, Theme } from './theme.js';
+import { darkTheme, Theme, type ColorsTheme } from './theme.js';
+
+const ayuDarkColors: ColorsTheme = {
+  type: 'dark',
+  Background: '#0b0e14',
+  Foreground: '#bfbdb6',
+  LightBlue: '#59C2FF',
+  AccentBlue: '#39BAE6',
+  AccentPurple: '#D2A6FF',
+  AccentCyan: '#95E6CB',
+  AccentGreen: '#AAD94C',
+  AccentYellow: '#FFB454',
+  AccentRed: '#F26D78',
+  Comment: '#646A71',
+  Gray: '##3D4149',
+  GradientColors: darkTheme.GradientColors,
+};

 export const AyuDark: Theme = new Theme(
  'Ayu',
@@ -14,70 +30,70 @@ export const AyuDark: Theme = new Theme(
      display: 'block',
      overflowX: 'auto',
      padding: '0.5em',
-      background: '#0b0e14',
-      color: '#bfbdb6',
+      background: ayuDarkColors.Background,
+      color: ayuDarkColors.Foreground,
    },
    'hljs-keyword': {
-      color: '#FF8F40',
+      color: ayuDarkColors.AccentYellow,
    },
    'hljs-literal': {
-      color: '#D2A6FF',
+      color: ayuDarkColors.AccentPurple,
    },
    'hljs-symbol': {
-      color: '#95E6CB',
+      color: ayuDarkColors.AccentCyan,
    },
    'hljs-name': {
-      color: '#59C2FF',
+      color: ayuDarkColors.LightBlue,
    },
    'hljs-link': {
-      color: '#39BAE6',
+      color: ayuDarkColors.AccentBlue,
    },
    'hljs-function .hljs-keyword': {
-      color: '#FFB454',
+      color: ayuDarkColors.AccentYellow,
    },
    'hljs-subst': {
-      color: '#BFBDB6',
+      color: ayuDarkColors.Foreground,
    },
    'hljs-string': {
-      color: '#AAD94C',
+      color: ayuDarkColors.AccentGreen,
    },
    'hljs-title': {
-      color: '#FFB454',
+      color: ayuDarkColors.AccentYellow,
    },
    'hljs-type': {
-      color: '#39BAE6',
+      color: ayuDarkColors.AccentBlue,
    },
    'hljs-attribute': {
-      color: '#FFB454',
+      color: ayuDarkColors.AccentYellow,
    },
    'hljs-bullet': {
-      color: '#FFB454',
+      color: ayuDarkColors.AccentYellow,
    },
    'hljs-addition': {
-      color: '#7FD962',
+      color: ayuDarkColors.AccentGreen,
    },
    'hljs-variable': {
-      color: '#BFBDB6',
+      color: ayuDarkColors.Foreground,
    },
    'hljs-template-tag': {
-      color: '#FF8F40',
+      color: ayuDarkColors.AccentYellow,
    },
    'hljs-template-variable': {
-      color: '#FF8F40',
+      color: ayuDarkColors.AccentYellow,
    },
    'hljs-comment': {
-      color: '#ACB6BF8C',
+      color: ayuDarkColors.Comment,
      fontStyle: 'italic',
    },
    'hljs-quote': {
-      color: '#95E6CB',
+      color: ayuDarkColors.AccentCyan,
      fontStyle: 'italic',
    },
    'hljs-deletion': {
-      color: '#F26D78',
+      color: ayuDarkColors.AccentRed,
    },
    'hljs-meta': {
-      color: '#E6B673',
+      color: ayuDarkColors.AccentYellow,
    },
    'hljs-doctag': {
      fontWeight: 'bold',
@@ -89,5 +105,5 @@ export const AyuDark: Theme = new Theme(
      fontStyle: 'italic',
    },
  },
-  darkTheme,
+  ayuDarkColors,
 );
--- a/packages/cli/src/ui/themes/default-light.ts
+++ b/packages/cli/src/ui/themes/default-light.ts
@@ -14,86 +14,86 @@ export const DefaultLight: Theme = new Theme(
      display: 'block',
      overflowX: 'auto',
      padding: '0.5em',
-      background: 'white',
-      color: 'black',
+      background: lightTheme.Background,
+      color: lightTheme.Foreground,
    },
    'hljs-comment': {
-      color: '#008000',
+      color: lightTheme.Comment,
    },
    'hljs-quote': {
-      color: '#008000',
+      color: lightTheme.Comment,
    },
    'hljs-variable': {
-      color: '#008000',
+      color: lightTheme.Foreground,
    },
    'hljs-keyword': {
-      color: '#00f',
+      color: lightTheme.AccentBlue,
    },
    'hljs-selector-tag': {
-      color: '#00f',
+      color: lightTheme.AccentBlue,
    },
    'hljs-built_in': {
-      color: '#00f',
+      color: lightTheme.AccentBlue,
    },
    'hljs-name': {
-      color: '#00f',
+      color: lightTheme.AccentBlue,
    },
    'hljs-tag': {
-      color: '#00f',
+      color: lightTheme.AccentBlue,
    },
    'hljs-string': {
-      color: '#a31515',
+      color: lightTheme.AccentRed,
    },
    'hljs-title': {
-      color: '#a31515',
+      color: lightTheme.AccentRed,
    },
    'hljs-section': {
-      color: '#a31515',
+      color: lightTheme.AccentRed,
    },
    'hljs-attribute': {
-      color: '#a31515',
+      color: lightTheme.AccentRed,
    },
    'hljs-literal': {
-      color: '#a31515',
+      color: lightTheme.AccentRed,
    },
    'hljs-template-tag': {
-      color: '#a31515',
+      color: lightTheme.AccentRed,
    },
    'hljs-template-variable': {
-      color: '#a31515',
+      color: lightTheme.AccentRed,
    },
    'hljs-type': {
-      color: '#a31515',
+      color: lightTheme.AccentRed,
    },
    'hljs-addition': {
-      color: '#a31515',
+      color: lightTheme.AccentGreen,
    },
    'hljs-deletion': {
-      color: '#2b91af',
+      color: lightTheme.AccentRed,
    },
    'hljs-selector-attr': {
-      color: '#2b91af',
+      color: lightTheme.AccentCyan,
    },
    'hljs-selector-pseudo': {
-      color: '#2b91af',
+      color: lightTheme.AccentCyan,
    },
    'hljs-meta': {
-      color: '#2b91af',
+      color: lightTheme.AccentCyan,
    },
    'hljs-doctag': {
-      color: '#808080',
+      color: lightTheme.Gray,
    },
    'hljs-attr': {
-      color: '#f00',
+      color: lightTheme.AccentRed,
    },
    'hljs-symbol': {
-      color: '#00b0e8',
+      color: lightTheme.AccentCyan,
    },
    'hljs-bullet': {
-      color: '#00b0e8',
+      color: lightTheme.AccentCyan,
    },
    'hljs-link': {
-      color: '#00b0e8',
+      color: lightTheme.AccentCyan,
    },
    'hljs-emphasis': {
      fontStyle: 'italic',
--- a/packages/cli/src/ui/themes/default.ts
+++ b/packages/cli/src/ui/themes/default.ts
@@ -14,101 +14,101 @@ export const DefaultDark: Theme = new Theme(
      display: 'block',
      overflowX: 'auto',
      padding: '0.5em',
-      background: '#1E1E1E',
-      color: '#DCDCDC',
+      background: darkTheme.Background,
+      color: darkTheme.Foreground,
    },
    'hljs-keyword': {
-      color: '#569CD6',
+      color: darkTheme.AccentBlue,
    },
    'hljs-literal': {
-      color: '#569CD6',
+      color: darkTheme.AccentBlue,
    },
    'hljs-symbol': {
-      color: '#569CD6',
+      color: darkTheme.AccentBlue,
    },
    'hljs-name': {
-      color: '#569CD6',
+      color: darkTheme.AccentBlue,
    },
    'hljs-link': {
-      color: '#569CD6',
+      color: darkTheme.AccentBlue,
      textDecoration: 'underline',
    },
    'hljs-built_in': {
-      color: '#4EC9B0',
+      color: darkTheme.AccentCyan,
    },
    'hljs-type': {
-      color: '#4EC9B0',
+      color: darkTheme.AccentCyan,
    },
    'hljs-number': {
-      color: '#B8D7A3',
+      color: darkTheme.AccentGreen,
    },
    'hljs-class': {
-      color: '#B8D7A3',
+      color: darkTheme.AccentGreen,
    },
    'hljs-string': {
-      color: '#D69D85',
+      color: darkTheme.AccentYellow,
    },
    'hljs-meta-string': {
-      color: '#D69D85',
+      color: darkTheme.AccentYellow,
    },
    'hljs-regexp': {
-      color: '#9A5334',
+      color: darkTheme.AccentRed,
    },
    'hljs-template-tag': {
-      color: '#9A5334',
+      color: darkTheme.AccentRed,
    },
    'hljs-subst': {
-      color: '#DCDCDC',
+      color: darkTheme.Foreground,
    },
    'hljs-function': {
-      color: '#DCDCDC',
+      color: darkTheme.Foreground,
    },
    'hljs-title': {
-      color: '#DCDCDC',
+      color: darkTheme.Foreground,
    },
    'hljs-params': {
-      color: '#DCDCDC',
+      color: darkTheme.Foreground,
    },
    'hljs-formula': {
-      color: '#DCDCDC',
+      color: darkTheme.Foreground,
    },
    'hljs-comment': {
-      color: '#57A64A',
+      color: darkTheme.Comment,
      fontStyle: 'italic',
    },
    'hljs-quote': {
-      color: '#57A64A',
+      color: darkTheme.Comment,
      fontStyle: 'italic',
    },
    'hljs-doctag': {
-      color: '#608B4E',
+      color: darkTheme.Comment,
    },
    'hljs-meta': {
-      color: '#9B9B9B',
+      color: darkTheme.Gray,
    },
    'hljs-meta-keyword': {
-      color: '#9B9B9B',
+      color: darkTheme.Gray,
    },
    'hljs-tag': {
-      color: '#9B9B9B',
+      color: darkTheme.Gray,
    },
    'hljs-variable': {
-      color: '#BD63C5',
+      color: darkTheme.AccentPurple,
    },
    'hljs-template-variable': {
-      color: '#BD63C5',
+      color: darkTheme.AccentPurple,
    },
    'hljs-attr': {
-      color: '#9CDCFE',
+      color: darkTheme.LightBlue,
    },
    'hljs-attribute': {
-      color: '#9CDCFE',
+      color: darkTheme.LightBlue,
    },
    'hljs-builtin-name': {
-      color: '#9CDCFE',
+      color: darkTheme.LightBlue,
    },
    'hljs-section': {
-      color: 'gold',
+      color: darkTheme.AccentYellow,
    },
    'hljs-emphasis': {
      fontStyle: 'italic',
@@ -117,22 +117,22 @@ export const DefaultDark: Theme = new Theme(
      fontWeight: 'bold',
    },
    'hljs-bullet': {
-      color: '#D7BA7D',
+      color: darkTheme.AccentYellow,
    },
    'hljs-selector-tag': {
-      color: '#D7BA7D',
+      color: darkTheme.AccentYellow,
    },
    'hljs-selector-id': {
-      color: '#D7BA7D',
+      color: darkTheme.AccentYellow,
    },
    'hljs-selector-class': {
-      color: '#D7BA7D',
+      color: darkTheme.AccentYellow,
    },
    'hljs-selector-attr': {
-      color: '#D7BA7D',
+      color: darkTheme.AccentYellow,
    },
    'hljs-selector-pseudo': {
-      color: '#D7BA7D',
+      color: darkTheme.AccentYellow,
    },
    'hljs-addition': {
      backgroundColor: '#144212',
--- a/packages/cli/src/ui/themes/dracula.ts
+++ b/packages/cli/src/ui/themes/dracula.ts
@@ -4,7 +4,23 @@
 * SPDX-License-Identifier: Apache-2.0
 */

-import { darkTheme, Theme } from './theme.js';
+import { darkTheme, Theme, type ColorsTheme } from './theme.js';
+
+const draculaColors: ColorsTheme = {
+  type: 'dark',
+  Background: '#282a36',
+  Foreground: '#f8f8f2',
+  LightBlue: '#8be9fd',
+  AccentBlue: '#8be9fd',
+  AccentPurple: '#ff79c6',
+  AccentCyan: '#8be9fd',
+  AccentGreen: '#50fa7b',
+  AccentYellow: '#f1fa8c',
+  AccentRed: '#ff5555',
+  Comment: '#6272a4',
+  Gray: '#6272a4',
+  GradientColors: darkTheme.GradientColors,
+};

 export const Dracula: Theme = new Theme(
  'Dracula',
@@ -14,81 +30,81 @@ export const Dracula: Theme = new Theme(
      display: 'block',
      overflowX: 'auto',
      padding: '0.5em',
-      background: '#282a36',
-      color: '#f8f8f2',
+      background: draculaColors.Background,
+      color: draculaColors.Foreground,
    },
    'hljs-keyword': {
-      color: '#8be9fd',
+      color: draculaColors.AccentBlue,
      fontWeight: 'bold',
    },
    'hljs-selector-tag': {
-      color: '#8be9fd',
+      color: draculaColors.AccentBlue,
      fontWeight: 'bold',
    },
    'hljs-literal': {
-      color: '#8be9fd',
+      color: draculaColors.AccentBlue,
      fontWeight: 'bold',
    },
    'hljs-section': {
-      color: '#8be9fd',
+      color: draculaColors.AccentBlue,
      fontWeight: 'bold',
    },
    'hljs-link': {
-      color: '#8be9fd',
+      color: draculaColors.AccentBlue,
    },
    'hljs-function .hljs-keyword': {
-      color: '#ff79c6',
+      color: draculaColors.AccentPurple,
    },
    'hljs-subst': {
-      color: '#f8f8f2',
+      color: draculaColors.Foreground,
    },
    'hljs-string': {
-      color: '#f1fa8c',
+      color: draculaColors.AccentYellow,
    },
    'hljs-title': {
-      color: '#f1fa8c',
+      color: draculaColors.AccentYellow,
      fontWeight: 'bold',
    },
    'hljs-name': {
-      color: '#f1fa8c',
+      color: draculaColors.AccentYellow,
      fontWeight: 'bold',
    },
    'hljs-type': {
-      color: '#f1fa8c',
+      color: draculaColors.AccentYellow,
      fontWeight: 'bold',
    },
    'hljs-attribute': {
-      color: '#f1fa8c',
+      color: draculaColors.AccentYellow,
    },
    'hljs-symbol': {
-      color: '#f1fa8c',
+      color: draculaColors.AccentYellow,
    },
    'hljs-bullet': {
-      color: '#f1fa8c',
+      color: draculaColors.AccentYellow,
    },
    'hljs-addition': {
-      color: '#f1fa8c',
+      color: draculaColors.AccentGreen,
    },
    'hljs-variable': {
-      color: '#f1fa8c',
+      color: draculaColors.AccentYellow,
    },
    'hljs-template-tag': {
-      color: '#f1fa8c',
+      color: draculaColors.AccentYellow,
    },
    'hljs-template-variable': {
-      color: '#f1fa8c',
+      color: draculaColors.AccentYellow,
    },
    'hljs-comment': {
-      color: '#6272a4',
+      color: draculaColors.Comment,
    },
    'hljs-quote': {
-      color: '#6272a4',
+      color: draculaColors.Comment,
    },
    'hljs-deletion': {
-      color: '#6272a4',
+      color: draculaColors.AccentRed,
    },
    'hljs-meta': {
-      color: '#6272a4',
+      color: draculaColors.Comment,
    },
    'hljs-doctag': {
      fontWeight: 'bold',
@@ -100,5 +116,5 @@ export const Dracula: Theme = new Theme(
      fontStyle: 'italic',
    },
  },
-  darkTheme,
+  draculaColors,
 );
--- a/packages/cli/src/ui/themes/github-dark.ts
+++ b/packages/cli/src/ui/themes/github-dark.ts
@@ -4,7 +4,23 @@
 * SPDX-License-Identifier: Apache-2.0
 */

-import { darkTheme, Theme } from './theme.js';
+import { darkTheme, Theme, type ColorsTheme } from './theme.js';
+
+const githubDarkColors: ColorsTheme = {
+  type: 'dark',
+  Background: '#24292e',
+  Foreground: '#d1d5da',
+  LightBlue: '#79B8FF',
+  AccentBlue: '#79B8FF',
+  AccentPurple: '#B392F0',
+  AccentCyan: '#9ECBFF',
+  AccentGreen: '#85E89D',
+  AccentYellow: '#FFAB70',
+  AccentRed: '#F97583',
+  Comment: '#6A737D',
+  Gray: '#6A737D',
+  GradientColors: darkTheme.GradientColors,
+};

 export const GitHubDark: Theme = new Theme(
  'GitHub',
@@ -14,107 +30,107 @@ export const GitHubDark: Theme = new Theme(
      display: 'block',
      overflowX: 'auto',
      padding: '0.5em',
-      color: '#d1d5da',
-      background: '#24292e',
+      color: githubDarkColors.Foreground,
+      background: githubDarkColors.Background,
    },
    'hljs-comment': {
-      color: '#6A737D',
+      color: githubDarkColors.Comment,
      fontStyle: 'italic',
    },
    'hljs-quote': {
-      color: '#6A737D',
+      color: githubDarkColors.Comment,
      fontStyle: 'italic',
    },
    'hljs-keyword': {
-      color: '#F97583',
+      color: githubDarkColors.AccentRed,
      fontWeight: 'bold',
    },
    'hljs-selector-tag': {
-      color: '#F97583',
+      color: githubDarkColors.AccentRed,
      fontWeight: 'bold',
    },
    'hljs-subst': {
-      color: '#e1e4e8',
+      color: githubDarkColors.Foreground,
    },
    'hljs-number': {
-      color: '#79B8FF',
+      color: githubDarkColors.LightBlue,
    },
    'hljs-literal': {
-      color: '#79B8FF',
+      color: githubDarkColors.LightBlue,
    },
    'hljs-variable': {
-      color: '#FFAB70',
+      color: githubDarkColors.AccentYellow,
    },
    'hljs-template-variable': {
-      color: '#FFAB70',
+      color: githubDarkColors.AccentYellow,
    },
    'hljs-tag .hljs-attr': {
-      color: '#FFAB70',
+      color: githubDarkColors.AccentYellow,
    },
    'hljs-string': {
-      color: '#9ECBFF',
+      color: githubDarkColors.AccentCyan,
    },
    'hljs-doctag': {
-      color: '#9ECBFF',
+      color: githubDarkColors.AccentCyan,
    },
    'hljs-title': {
-      color: '#B392F0',
+      color: githubDarkColors.AccentPurple,
      fontWeight: 'bold',
    },
    'hljs-section': {
-      color: '#B392F0',
+      color: githubDarkColors.AccentPurple,
      fontWeight: 'bold',
    },
    'hljs-selector-id': {
-      color: '#B392F0',
+      color: githubDarkColors.AccentPurple,
      fontWeight: 'bold',
    },
    'hljs-type': {
-      color: '#85E89D',
+      color: githubDarkColors.AccentGreen,
      fontWeight: 'bold',
    },
    'hljs-class .hljs-title': {
-      color: '#85E89D',
+      color: githubDarkColors.AccentGreen,
      fontWeight: 'bold',
    },
    'hljs-tag': {
-      color: '#85E89D',
+      color: githubDarkColors.AccentGreen,
    },
    'hljs-name': {
-      color: '#85E89D',
+      color: githubDarkColors.AccentGreen,
    },
    'hljs-attribute': {
-      color: '#79B8FF',
+      color: githubDarkColors.LightBlue,
    },
    'hljs-regexp': {
-      color: '#DBEDFF',
+      color: githubDarkColors.AccentCyan,
    },
    'hljs-link': {
-      color: '#DBEDFF',
+      color: githubDarkColors.AccentCyan,
    },
    'hljs-symbol': {
-      color: '#990073',
+      color: githubDarkColors.AccentPurple,
    },
    'hljs-bullet': {
-      color: '#990073',
+      color: githubDarkColors.AccentPurple,
    },
    'hljs-built_in': {
-      color: '#79B8FF',
+      color: githubDarkColors.LightBlue,
    },
    'hljs-builtin-name': {
-      color: '#79B8FF',
+      color: githubDarkColors.LightBlue,
    },
    'hljs-meta': {
-      color: '#79B8FF',
+      color: githubDarkColors.LightBlue,
      fontWeight: 'bold',
    },
    'hljs-deletion': {
      background: '#86181D',
-      color: '#FDAEB7',
+      color: githubDarkColors.AccentRed,
    },
    'hljs-addition': {
      background: '#144620',
-      color: '#85E89D',
+      color: githubDarkColors.AccentGreen,
    },
    'hljs-emphasis': {
      fontStyle: 'italic',
@@ -123,5 +139,5 @@ export const GitHubDark: Theme = new Theme(
      fontWeight: 'bold',
    },
  },
-  darkTheme,
+  githubDarkColors,
 );
--- a/packages/cli/src/ui/themes/github-light.ts
+++ b/packages/cli/src/ui/themes/github-light.ts
@@ -4,7 +4,23 @@
 * SPDX-License-Identifier: Apache-2.0
 */

-import { lightTheme, Theme } from './theme.js';
+import { lightTheme, Theme, type ColorsTheme } from './theme.js';
+
+const githubLightColors: ColorsTheme = {
+  type: 'light',
+  Background: '#f8f8f8',
+  Foreground: '#24292E',
+  LightBlue: '#0086b3',
+  AccentBlue: '#458',
+  AccentPurple: '#900',
+  AccentCyan: '#009926',
+  AccentGreen: '#008080',
+  AccentYellow: '#990073',
+  AccentRed: '#d14',
+  Comment: '#998',
+  Gray: '#999',
+  GradientColors: lightTheme.GradientColors,
+};

 export const GitHubLight: Theme = new Theme(
  'GitHub Light',
@@ -14,102 +30,102 @@ export const GitHubLight: Theme = new Theme(
      display: 'block',
      overflowX: 'auto',
      padding: '0.5em',
-      color: '#24292E',
-      background: '#f8f8f8',
+      color: githubLightColors.Foreground,
+      background: githubLightColors.Background,
    },
    'hljs-comment': {
-      color: '#998',
+      color: githubLightColors.Comment,
      fontStyle: 'italic',
    },
    'hljs-quote': {
-      color: '#998',
+      color: githubLightColors.Comment,
      fontStyle: 'italic',
    },
    'hljs-keyword': {
-      color: '#333',
+      color: githubLightColors.Foreground,
      fontWeight: 'bold',
    },
    'hljs-selector-tag': {
-      color: '#333',
+      color: githubLightColors.Foreground,
      fontWeight: 'bold',
    },
    'hljs-subst': {
-      color: '#333',
+      color: githubLightColors.Foreground,
      fontWeight: 'normal',
    },
    'hljs-number': {
-      color: '#008080',
+      color: githubLightColors.AccentGreen,
    },
    'hljs-literal': {
-      color: '#008080',
+      color: githubLightColors.AccentGreen,
    },
    'hljs-variable': {
-      color: '#008080',
+      color: githubLightColors.AccentGreen,
    },
    'hljs-template-variable': {
-      color: '#008080',
+      color: githubLightColors.AccentGreen,
    },
    'hljs-tag .hljs-attr': {
-      color: '#008080',
+      color: githubLightColors.AccentGreen,
    },
    'hljs-string': {
-      color: '#d14',
+      color: githubLightColors.AccentRed,
    },
    'hljs-doctag': {
-      color: '#d14',
+      color: githubLightColors.AccentRed,
    },
    'hljs-title': {
-      color: '#900',
+      color: githubLightColors.AccentPurple,
      fontWeight: 'bold',
    },
    'hljs-section': {
-      color: '#900',
+      color: githubLightColors.AccentPurple,
      fontWeight: 'bold',
    },
    'hljs-selector-id': {
-      color: '#900',
+      color: githubLightColors.AccentPurple,
      fontWeight: 'bold',
    },
    'hljs-type': {
-      color: '#458',
+      color: githubLightColors.AccentBlue,
      fontWeight: 'bold',
    },
    'hljs-class .hljs-title': {
-      color: '#458',
+      color: githubLightColors.AccentBlue,
      fontWeight: 'bold',
    },
    'hljs-tag': {
-      color: '#000080',
+      color: githubLightColors.AccentBlue,
      fontWeight: 'normal',
    },
    'hljs-name': {
-      color: '#000080',
+      color: githubLightColors.AccentBlue,
      fontWeight: 'normal',
    },
    'hljs-attribute': {
-      color: '#000080',
+      color: githubLightColors.AccentBlue,
      fontWeight: 'normal',
    },
    'hljs-regexp': {
-      color: '#009926',
+      color: githubLightColors.AccentCyan,
    },
    'hljs-link': {
-      color: '#009926',
+      color: githubLightColors.AccentCyan,
    },
    'hljs-symbol': {
-      color: '#990073',
+      color: githubLightColors.AccentYellow,
    },
    'hljs-bullet': {
-      color: '#990073',
+      color: githubLightColors.AccentYellow,
    },
    'hljs-built_in': {
-      color: '#0086b3',
+      color: githubLightColors.LightBlue,
    },
    'hljs-builtin-name': {
-      color: '#0086b3',
+      color: githubLightColors.LightBlue,
    },
    'hljs-meta': {
-      color: '#999',
+      color: githubLightColors.Gray,
      fontWeight: 'bold',
    },
    'hljs-deletion': {
@@ -125,5 +141,5 @@ export const GitHubLight: Theme = new Theme(
      fontWeight: 'bold',
    },
  },
-  lightTheme,
+  githubLightColors,
 );
--- a/packages/cli/src/ui/themes/googlecode.ts
+++ b/packages/cli/src/ui/themes/googlecode.ts
@@ -4,7 +4,23 @@
 * SPDX-License-Identifier: Apache-2.0
 */

-import { lightTheme, Theme } from './theme.js';
+import { lightTheme, Theme, type ColorsTheme } from './theme.js';
+
+const googleCodeColors: ColorsTheme = {
+  type: 'light',
+  Background: 'white',
+  Foreground: 'black',
+  LightBlue: '#066',
+  AccentBlue: '#008',
+  AccentPurple: '#606',
+  AccentCyan: '#066',
+  AccentGreen: '#080',
+  AccentYellow: '#660',
+  AccentRed: '#800',
+  Comment: '#5f6368',
+  Gray: lightTheme.Gray,
+  GradientColors: lightTheme.GradientColors,
+};

 export const GoogleCode: Theme = new Theme(
  'Google Code',
@@ -14,100 +30,100 @@ export const GoogleCode: Theme = new Theme(
      display: 'block',
      overflowX: 'auto',
      padding: '0.5em',
-      background: 'white',
-      color: 'black',
+      background: googleCodeColors.Background,
+      color: googleCodeColors.Foreground,
    },
    'hljs-comment': {
-      color: '#800',
+      color: googleCodeColors.AccentRed,
    },
    'hljs-quote': {
-      color: '#800',
+      color: googleCodeColors.AccentRed,
    },
    'hljs-keyword': {
-      color: '#008',
+      color: googleCodeColors.AccentBlue,
    },
    'hljs-selector-tag': {
-      color: '#008',
+      color: googleCodeColors.AccentBlue,
    },
    'hljs-section': {
-      color: '#008',
+      color: googleCodeColors.AccentBlue,
    },
    'hljs-title': {
-      color: '#606',
+      color: googleCodeColors.AccentPurple,
    },
    'hljs-name': {
-      color: '#008',
+      color: googleCodeColors.AccentBlue,
    },
    'hljs-variable': {
-      color: '#660',
+      color: googleCodeColors.AccentYellow,
    },
    'hljs-template-variable': {
-      color: '#660',
+      color: googleCodeColors.AccentYellow,
    },
    'hljs-string': {
-      color: '#080',
+      color: googleCodeColors.AccentGreen,
    },
    'hljs-selector-attr': {
-      color: '#080',
+      color: googleCodeColors.AccentGreen,
    },
    'hljs-selector-pseudo': {
-      color: '#080',
+      color: googleCodeColors.AccentGreen,
    },
    'hljs-regexp': {
-      color: '#080',
+      color: googleCodeColors.AccentGreen,
    },
    'hljs-literal': {
-      color: '#066',
+      color: googleCodeColors.AccentCyan,
    },
    'hljs-symbol': {
-      color: '#066',
+      color: googleCodeColors.AccentCyan,
    },
    'hljs-bullet': {
-      color: '#066',
+      color: googleCodeColors.AccentCyan,
    },
    'hljs-meta': {
-      color: '#066',
+      color: googleCodeColors.AccentCyan,
    },
    'hljs-number': {
-      color: '#066',
+      color: googleCodeColors.AccentCyan,
    },
    'hljs-link': {
-      color: '#066',
+      color: googleCodeColors.AccentCyan,
    },
    'hljs-doctag': {
-      color: '#606',
+      color: googleCodeColors.AccentPurple,
      fontWeight: 'bold',
    },
    'hljs-type': {
-      color: '#606',
+      color: googleCodeColors.AccentPurple,
    },
    'hljs-attr': {
-      color: '#606',
+      color: googleCodeColors.AccentPurple,
    },
    'hljs-built_in': {
-      color: '#606',
+      color: googleCodeColors.AccentPurple,
    },
    'hljs-builtin-name': {
-      color: '#606',
+      color: googleCodeColors.AccentPurple,
    },
    'hljs-params': {
-      color: '#606',
+      color: googleCodeColors.AccentPurple,
    },
    'hljs-attribute': {
-      color: '#000',
+      color: googleCodeColors.Foreground,
    },
    'hljs-subst': {
-      color: '#000',
+      color: googleCodeColors.Foreground,
    },
    'hljs-formula': {
      backgroundColor: '#eee',
      fontStyle: 'italic',
    },
    'hljs-selector-id': {
-      color: '#9B703F',
+      color: googleCodeColors.AccentYellow,
    },
    'hljs-selector-class': {
-      color: '#9B703F',
+      color: googleCodeColors.AccentYellow,
    },
    'hljs-addition': {
      backgroundColor: '#baeeba',
@@ -122,5 +138,5 @@ export const GoogleCode: Theme = new Theme(
      fontStyle: 'italic',
    },
  },
-  lightTheme,
+  googleCodeColors,
 );
--- a/packages/cli/src/ui/themes/theme.ts
+++ b/packages/cli/src/ui/themes/theme.ts
@@ -19,7 +19,7 @@ export interface ColorsTheme {
  AccentGreen: string;
  AccentYellow: string;
  AccentRed: string;
-  SubtleComment: string;
+  Comment: string;
  Gray: string;
  GradientColors?: string[];
 }
@@ -35,8 +35,8 @@ export const lightTheme: ColorsTheme = {
  AccentGreen: '#3CA84B',
  AccentYellow: '#D5A40A',
  AccentRed: '#DD4C4C',
-  SubtleComment: '#9CA3AF',
-  Gray: 'gray',
+  Comment: '#008000',
+  Gray: '#B7BECC',
  GradientColors: ['#4796E4', '#847ACE', '#C3677F'],
 };

@@ -51,8 +51,8 @@ export const darkTheme: ColorsTheme = {
  AccentGreen: '#A6E3A1',
  AccentYellow: '#F9E2AF',
  AccentRed: '#F38BA8',
-  SubtleComment: '#6C7086',
-  Gray: 'gray',
+  Comment: '#6C7086',
+  Gray: '#6C7086',
  GradientColors: ['#4796E4', '#847ACE', '#C3677F'],
 };

@@ -67,7 +67,7 @@ export const ansiTheme: ColorsTheme = {
  AccentGreen: 'green',
  AccentYellow: 'yellow',
  AccentRed: 'red',
-  SubtleComment: 'gray',
+  Comment: 'gray',
  Gray: 'gray',
 };

--- a/packages/cli/src/ui/themes/xcode.ts
+++ b/packages/cli/src/ui/themes/xcode.ts
@@ -4,105 +4,121 @@
 * SPDX-License-Identifier: Apache-2.0
 */

-import { lightTheme, Theme } from './theme.js';
+import { darkTheme, Theme, type ColorsTheme } from './theme.js';
+
+const xcodeColors: ColorsTheme = {
+  type: 'light',
+  Background: '#fff',
+  Foreground: 'black',
+  LightBlue: '#0E0EFF',
+  AccentBlue: '#1c00cf',
+  AccentPurple: '#aa0d91',
+  AccentCyan: '#3F6E74',
+  AccentGreen: '#007400',
+  AccentYellow: '#836C28',
+  AccentRed: '#c41a16',
+  Comment: '#007400',
+  Gray: '#c0c0c0',
+  GradientColors: darkTheme.GradientColors,
+};

 export const XCode: Theme = new Theme(
-  'XCode',
+  'Xcode',
  'light',
  {
    hljs: {
      display: 'block',
      overflowX: 'auto',
      padding: '0.5em',
-      background: '#fff',
-      color: 'black',
+      background: xcodeColors.Background,
+      color: xcodeColors.Foreground,
    },
    'xml .hljs-meta': {
-      color: '#c0c0c0',
+      color: xcodeColors.Gray,
    },
    'hljs-comment': {
-      color: '#007400',
+      color: xcodeColors.Comment,
    },
    'hljs-quote': {
-      color: '#007400',
+      color: xcodeColors.Comment,
    },
    'hljs-tag': {
-      color: '#aa0d91',
+      color: xcodeColors.AccentPurple,
    },
    'hljs-attribute': {
-      color: '#aa0d91',
+      color: xcodeColors.AccentPurple,
    },
    'hljs-keyword': {
-      color: '#aa0d91',
+      color: xcodeColors.AccentPurple,
    },
    'hljs-selector-tag': {
-      color: '#aa0d91',
+      color: xcodeColors.AccentPurple,
    },
    'hljs-literal': {
-      color: '#aa0d91',
+      color: xcodeColors.AccentPurple,
    },
    'hljs-name': {
-      color: '#aa0d91',
+      color: xcodeColors.AccentPurple,
    },
    'hljs-variable': {
-      color: '#3F6E74',
+      color: xcodeColors.AccentCyan,
    },
    'hljs-template-variable': {
-      color: '#3F6E74',
+      color: xcodeColors.AccentCyan,
    },
    'hljs-code': {
-      color: '#c41a16',
+      color: xcodeColors.AccentRed,
    },
    'hljs-string': {
-      color: '#c41a16',
+      color: xcodeColors.AccentRed,
    },
    'hljs-meta-string': {
-      color: '#c41a16',
+      color: xcodeColors.AccentRed,
    },
    'hljs-regexp': {
-      color: '#0E0EFF',
+      color: xcodeColors.LightBlue,
    },
    'hljs-link': {
-      color: '#0E0EFF',
+      color: xcodeColors.LightBlue,
    },
    'hljs-title': {
-      color: '#1c00cf',
+      color: xcodeColors.AccentBlue,
    },
    'hljs-symbol': {
-      color: '#1c00cf',
+      color: xcodeColors.AccentBlue,
    },
    'hljs-bullet': {
-      color: '#1c00cf',
+      color: xcodeColors.AccentBlue,
    },
    'hljs-number': {
-      color: '#1c00cf',
+      color: xcodeColors.AccentBlue,
    },
    'hljs-section': {
-      color: '#643820',
+      color: xcodeColors.AccentYellow,
    },
    'hljs-meta': {
-      color: '#643820',
+      color: xcodeColors.AccentYellow,
    },
    'hljs-class .hljs-title': {
-      color: '#5c2699',
+      color: xcodeColors.AccentPurple,
    },
    'hljs-type': {
-      color: '#5c2699',
+      color: xcodeColors.AccentPurple,
    },
    'hljs-built_in': {
-      color: '#5c2699',
+      color: xcodeColors.AccentPurple,
    },
    'hljs-builtin-name': {
-      color: '#5c2699',
+      color: xcodeColors.AccentPurple,
    },
    'hljs-params': {
-      color: '#5c2699',
+      color: xcodeColors.AccentPurple,
    },
    'hljs-attr': {
-      color: '#836C28',
+      color: xcodeColors.AccentYellow,
    },
    'hljs-subst': {
-      color: '#000',
+      color: xcodeColors.Foreground,
    },
    'hljs-formula': {
      backgroundColor: '#eee',
@@ -115,10 +131,10 @@ export const XCode: Theme = new Theme(
      backgroundColor: '#ffc8bd',
    },
    'hljs-selector-id': {
-      color: '#9b703f',
+      color: xcodeColors.AccentYellow,
    },
    'hljs-selector-class': {
-      color: '#9b703f',
+      color: xcodeColors.AccentYellow,
    },
    'hljs-doctag': {
      fontWeight: 'bold',
@@ -130,5 +146,5 @@ export const XCode: Theme = new Theme(
      fontStyle: 'italic',
    },
  },
-  lightTheme,
+  xcodeColors,
 );