summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--packages/cli/src/ui/colors.ts48
-rw-r--r--packages/cli/src/ui/components/Footer.tsx7
-rw-r--r--packages/cli/src/ui/themes/atom-one-dark.ts232
-rw-r--r--packages/cli/src/ui/themes/dracula.ts186
-rw-r--r--packages/cli/src/ui/themes/github.ts236
-rw-r--r--packages/cli/src/ui/themes/googlecode.ts230
-rw-r--r--packages/cli/src/ui/themes/theme-manager.ts2
-rw-r--r--packages/cli/src/ui/themes/theme.ts49
-rw-r--r--packages/cli/src/ui/themes/vs.ts190
-rw-r--r--packages/cli/src/ui/themes/vs2015.ts276
-rw-r--r--packages/cli/src/ui/themes/xcode.ts246
11 files changed, 903 insertions, 799 deletions
diff --git a/packages/cli/src/ui/colors.ts b/packages/cli/src/ui/colors.ts
index f320d856..62c8a12d 100644
--- a/packages/cli/src/ui/colors.ts
+++ b/packages/cli/src/ui/colors.ts
@@ -4,15 +4,41 @@
* SPDX-License-Identifier: Apache-2.0
*/
-export const Colors = {
- Foreground: 'white',
- LightBlue: '#CDD6F4',
- AccentBlue: '#89B4FA',
- AccentPurple: '#CBA6F7',
- AccentCyan: '#89DCEB',
- AccentGreen: '#A6E3A1',
- AccentYellow: '#F9E2AF',
- AccentRed: '#F38BA8',
- SubtleComment: '#6C7086',
- Gray: 'gray',
+import { themeManager } from './themes/theme-manager.js';
+import { ColorsTheme } from './themes/theme.js';
+
+export const Colors: ColorsTheme = {
+ get Foreground() {
+ return themeManager.getActiveTheme().colors.Foreground;
+ },
+ get Background() {
+ return themeManager.getActiveTheme().colors.Background;
+ },
+ 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;
+ },
};
diff --git a/packages/cli/src/ui/components/Footer.tsx b/packages/cli/src/ui/components/Footer.tsx
index 1a61bd2f..0e7d086d 100644
--- a/packages/cli/src/ui/components/Footer.tsx
+++ b/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>
diff --git a/packages/cli/src/ui/themes/atom-one-dark.ts b/packages/cli/src/ui/themes/atom-one-dark.ts
index 316b9048..5599c01a 100644
--- a/packages/cli/src/ui/themes/atom-one-dark.ts
+++ b/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', {
- hljs: {
- display: 'block',
- overflowX: 'auto',
- padding: '0.5em',
- color: '#abb2bf',
- background: '#282c34',
+export const AtomOneDark: Theme = new Theme(
+ 'Atom One Dark',
+ {
+ hljs: {
+ display: 'block',
+ overflowX: 'auto',
+ 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': {
- 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',
- },
-});
+ darkTheme,
+);
diff --git a/packages/cli/src/ui/themes/dracula.ts b/packages/cli/src/ui/themes/dracula.ts
index 0b55435a..e8979e70 100644
--- a/packages/cli/src/ui/themes/dracula.ts
+++ b/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', {
- hljs: {
- display: 'block',
- overflowX: 'auto',
- padding: '0.5em',
- background: '#282a36',
- color: '#f8f8f2',
+export const Dracula: Theme = new Theme(
+ 'Dracula',
+ {
+ hljs: {
+ display: 'block',
+ overflowX: 'auto',
+ 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': {
- 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',
- },
-});
+ darkTheme,
+);
diff --git a/packages/cli/src/ui/themes/github.ts b/packages/cli/src/ui/themes/github.ts
index fb4080e6..61d7de65 100644
--- a/packages/cli/src/ui/themes/github.ts
+++ b/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', {
- hljs: {
- display: 'block',
- overflowX: 'auto',
- padding: '0.5em',
- color: '#333',
- background: '#f8f8f8',
+export const GitHub: Theme = new Theme(
+ 'GitHub',
+ {
+ hljs: {
+ display: 'block',
+ overflowX: 'auto',
+ 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': {
- 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',
- },
-});
+ lightTheme,
+);
diff --git a/packages/cli/src/ui/themes/googlecode.ts b/packages/cli/src/ui/themes/googlecode.ts
index ff01d8b6..25dbb8a3 100644
--- a/packages/cli/src/ui/themes/googlecode.ts
+++ b/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', {
- hljs: {
- display: 'block',
- overflowX: 'auto',
- padding: '0.5em',
- background: 'white',
- color: 'black',
+export const GoogleCode: Theme = new Theme(
+ 'Google Code',
+ {
+ hljs: {
+ display: 'block',
+ overflowX: 'auto',
+ 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': {
- 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',
- },
-});
+ lightTheme,
+);
diff --git a/packages/cli/src/ui/themes/theme-manager.ts b/packages/cli/src/ui/themes/theme-manager.ts
index 7e375574..a0e14902 100644
--- a/packages/cli/src/ui/themes/theme-manager.ts
+++ b/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,
diff --git a/packages/cli/src/ui/themes/theme.ts b/packages/cli/src/ui/themes/theme.ts
index f7bd1cd0..7097bcc9 100644
--- a/packages/cli/src/ui/themes/theme.ts
+++ b/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;
diff --git a/packages/cli/src/ui/themes/vs.ts b/packages/cli/src/ui/themes/vs.ts
index a87e9e80..ea0d938d 100644
--- a/packages/cli/src/ui/themes/vs.ts
+++ b/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', {
- hljs: {
- display: 'block',
- overflowX: 'auto',
- padding: '0.5em',
- background: 'white',
- color: 'black',
+export const VS: Theme = new Theme(
+ 'VS',
+ {
+ hljs: {
+ display: 'block',
+ overflowX: 'auto',
+ 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': {
- 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',
- },
-});
+ lightTheme,
+);
diff --git a/packages/cli/src/ui/themes/vs2015.ts b/packages/cli/src/ui/themes/vs2015.ts
index fa4ec1ee..93f00ec8 100644
--- a/packages/cli/src/ui/themes/vs2015.ts
+++ b/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', {
- hljs: {
- display: 'block',
- overflowX: 'auto',
- padding: '0.5em',
- background: '#1E1E1E',
- color: '#DCDCDC',
+export const VS2015: Theme = new Theme(
+ 'VS2015',
+ {
+ hljs: {
+ display: 'block',
+ overflowX: 'auto',
+ 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': {
- 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%',
- },
-});
+ darkTheme,
+);
diff --git a/packages/cli/src/ui/themes/xcode.ts b/packages/cli/src/ui/themes/xcode.ts
index ff2fb852..53fd2e5b 100644
--- a/packages/cli/src/ui/themes/xcode.ts
+++ b/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', {
- hljs: {
- display: 'block',
- overflowX: 'auto',
- padding: '0.5em',
- background: '#fff',
- color: 'black',
+export const XCode: Theme = new Theme(
+ 'XCode',
+ {
+ hljs: {
+ display: 'block',
+ overflowX: 'auto',
+ 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': {
- 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',
- },
-});
+ lightTheme,
+);
generated by cgit v1.2.3 (git 2.51.0) at 2025-11-05 14:18:44 +0000