Add an ansi theme. (#152)
Add the gradient used by the ascii art logo to theme.
This commit is contained in:
Jacob Richman
GitHub
parent
5790a5d7cf
commit
19ed2ed630
|
|
@ -41,4 +41,7 @@ export const Colors: ColorsTheme = {
|
|||
get Gray() {
|
||||
return themeManager.getActiveTheme().colors.Gray;
|
||||
},
|
||||
get GradientColors() {
|
||||
return themeManager.getActiveTheme().colors.GradientColors;
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -7,14 +7,9 @@
|
|||
import React from 'react';
|
||||
import { Box, Text } from 'ink';
|
||||
import Gradient from 'ink-gradient';
|
||||
import { Colors } from '../colors.js';
|
||||
|
||||
const gradientColors = ['#4796E4', '#847ACE', '#C3677F'];
|
||||
|
||||
export const Header: React.FC = () => (
|
||||
<>
|
||||
<Box marginBottom={1} alignItems="flex-start">
|
||||
<Gradient colors={gradientColors}>
|
||||
<Text>{`
|
||||
const asciiArtLogo = `
|
||||
██████╗ ███████╗███╗ ███╗██╗███╗ ██╗██╗
|
||||
██╔════╝ ██╔════╝████╗ ████║██║████╗ ██║██║
|
||||
██║ ███╗█████╗ ██╔████╔██║██║██╔██╗ ██║██║
|
||||
|
|
@ -28,8 +23,18 @@ export const Header: React.FC = () => (
|
|||
██║ ██║ ██║██║ ██║██╔══╝
|
||||
╚██████╗╚██████╔╝██████╔╝███████╗
|
||||
╚═════╝ ╚═════╝ ╚═════╝ ╚══════╝
|
||||
`}</Text>
|
||||
</Gradient>
|
||||
`;
|
||||
|
||||
export const Header: React.FC = () => (
|
||||
<>
|
||||
<Box marginBottom={1} alignItems="flex-start">
|
||||
{Colors.GradientColors ? (
|
||||
<Gradient colors={Colors.GradientColors}>
|
||||
<Text>{asciiArtLogo}</Text>
|
||||
</Gradient>
|
||||
) : (
|
||||
<Text>{asciiArtLogo}</Text>
|
||||
)}
|
||||
</Box>
|
||||
</>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,138 @@
|
|||
/**
|
||||
* @license
|
||||
* Copyright 2025 Google LLC
|
||||
* SPDX-License-Identifier: Apache-2.0
|
||||
*/
|
||||
|
||||
import { ansiTheme, Theme } from './theme.js';
|
||||
|
||||
export const ANSI: Theme = new Theme(
|
||||
'ANSI colors only',
|
||||
{
|
||||
hljs: {
|
||||
display: 'block',
|
||||
overflowX: 'auto',
|
||||
padding: '0.5em',
|
||||
background: 'black', // Mapped from #1E1E1E
|
||||
color: 'white', // Mapped from #DCDCDC
|
||||
},
|
||||
'hljs-keyword': {
|
||||
color: 'blue', // Mapped from #569CD6
|
||||
},
|
||||
'hljs-literal': {
|
||||
color: 'blue', // Mapped from #569CD6
|
||||
},
|
||||
'hljs-symbol': {
|
||||
color: 'blue', // Mapped from #569CD6
|
||||
},
|
||||
'hljs-name': {
|
||||
color: 'blue', // Mapped from #569CD6
|
||||
},
|
||||
'hljs-link': {
|
||||
color: 'blue', // Mapped from #569CD6
|
||||
// textDecoration is ignored by Theme class
|
||||
},
|
||||
'hljs-built_in': {
|
||||
color: 'cyan', // Mapped from #4EC9B0
|
||||
},
|
||||
'hljs-type': {
|
||||
color: 'cyan', // Mapped from #4EC9B0
|
||||
},
|
||||
'hljs-number': {
|
||||
color: 'green', // Mapped from #B8D7A3
|
||||
},
|
||||
'hljs-class': {
|
||||
color: 'green', // Mapped from #B8D7A3
|
||||
},
|
||||
'hljs-string': {
|
||||
color: 'yellow', // Mapped from #D69D85
|
||||
},
|
||||
'hljs-meta-string': {
|
||||
color: 'yellow', // Mapped from #D69D85
|
||||
},
|
||||
'hljs-regexp': {
|
||||
color: 'red', // Mapped from #9A5334
|
||||
},
|
||||
'hljs-template-tag': {
|
||||
color: 'red', // Mapped from #9A5334
|
||||
},
|
||||
'hljs-subst': {
|
||||
color: 'white', // Mapped from #DCDCDC
|
||||
},
|
||||
'hljs-function': {
|
||||
color: 'white', // Mapped from #DCDCDC
|
||||
},
|
||||
'hljs-title': {
|
||||
color: 'white', // Mapped from #DCDCDC
|
||||
},
|
||||
'hljs-params': {
|
||||
color: 'white', // Mapped from #DCDCDC
|
||||
},
|
||||
'hljs-formula': {
|
||||
color: 'white', // Mapped from #DCDCDC
|
||||
},
|
||||
'hljs-comment': {
|
||||
color: 'green', // Mapped from #57A64A
|
||||
// fontStyle is ignored by Theme class
|
||||
},
|
||||
'hljs-quote': {
|
||||
color: 'green', // Mapped from #57A64A
|
||||
// fontStyle is ignored by Theme class
|
||||
},
|
||||
'hljs-doctag': {
|
||||
color: 'green', // Mapped from #608B4E
|
||||
},
|
||||
'hljs-meta': {
|
||||
color: 'gray', // Mapped from #9B9B9B
|
||||
},
|
||||
'hljs-meta-keyword': {
|
||||
color: 'gray', // Mapped from #9B9B9B
|
||||
},
|
||||
'hljs-tag': {
|
||||
color: 'gray', // Mapped from #9B9B9B
|
||||
},
|
||||
'hljs-variable': {
|
||||
color: 'magenta', // Mapped from #BD63C5
|
||||
},
|
||||
'hljs-template-variable': {
|
||||
color: 'magenta', // Mapped from #BD63C5
|
||||
},
|
||||
'hljs-attr': {
|
||||
color: 'bluebright', // Mapped from #9CDCFE
|
||||
},
|
||||
'hljs-attribute': {
|
||||
color: 'bluebright', // Mapped from #9CDCFE
|
||||
},
|
||||
'hljs-builtin-name': {
|
||||
color: 'bluebright', // Mapped from #9CDCFE
|
||||
},
|
||||
'hljs-section': {
|
||||
color: 'yellow', // Mapped from gold
|
||||
},
|
||||
'hljs-emphasis': {
|
||||
// fontStyle is ignored by Theme class
|
||||
},
|
||||
'hljs-strong': {
|
||||
// fontWeight is ignored by Theme class
|
||||
},
|
||||
'hljs-bullet': {
|
||||
color: 'yellow', // Mapped from #D7BA7D
|
||||
},
|
||||
'hljs-selector-tag': {
|
||||
color: 'yellow', // Mapped from #D7BA7D
|
||||
},
|
||||
'hljs-selector-id': {
|
||||
color: 'yellow', // Mapped from #D7BA7D
|
||||
},
|
||||
'hljs-selector-class': {
|
||||
color: 'yellow', // Mapped from #D7BA7D
|
||||
},
|
||||
'hljs-selector-attr': {
|
||||
color: 'yellow', // Mapped from #D7BA7D
|
||||
},
|
||||
'hljs-selector-pseudo': {
|
||||
color: 'yellow', // Mapped from #D7BA7D
|
||||
},
|
||||
},
|
||||
ansiTheme,
|
||||
);
|
||||
|
|
@ -12,6 +12,7 @@ import { VS } from './vs.js';
|
|||
import { VS2015 } from './vs2015.js';
|
||||
import { XCode } from './xcode.js';
|
||||
import { Theme } from './theme.js';
|
||||
import { ANSI } from './ansi.js';
|
||||
|
||||
export interface ThemeDisplay {
|
||||
name: string;
|
||||
|
|
@ -32,6 +33,7 @@ class ThemeManager {
|
|||
GitHub,
|
||||
GoogleCode,
|
||||
XCode,
|
||||
ANSI,
|
||||
];
|
||||
this.activeTheme = ThemeManager.DEFAULT_THEME;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@ export interface ColorsTheme {
|
|||
AccentRed: string;
|
||||
SubtleComment: string;
|
||||
Gray: string;
|
||||
GradientColors?: string[];
|
||||
}
|
||||
|
||||
export const lightTheme: ColorsTheme = {
|
||||
|
|
@ -31,6 +32,7 @@ export const lightTheme: ColorsTheme = {
|
|||
AccentRed: '#EF4444',
|
||||
SubtleComment: '#9CA3AF',
|
||||
Gray: 'gray',
|
||||
GradientColors: ['#4796E4', '#847ACE', '#C3677F'],
|
||||
};
|
||||
|
||||
export const darkTheme: ColorsTheme = {
|
||||
|
|
@ -45,6 +47,21 @@ export const darkTheme: ColorsTheme = {
|
|||
AccentRed: '#F38BA8',
|
||||
SubtleComment: '#6C7086',
|
||||
Gray: 'gray',
|
||||
GradientColors: ['#4796E4', '#847ACE', '#C3677F'],
|
||||
};
|
||||
|
||||
export const ansiTheme: ColorsTheme = {
|
||||
Background: 'black',
|
||||
Foreground: 'white',
|
||||
LightBlue: 'blue',
|
||||
AccentBlue: 'bluebright',
|
||||
AccentPurple: 'magentabright',
|
||||
AccentCyan: 'cyanbright',
|
||||
AccentGreen: 'greenbright',
|
||||
AccentYellow: 'yellowbright',
|
||||
AccentRed: 'red',
|
||||
SubtleComment: 'gray',
|
||||
Gray: 'gray',
|
||||
};
|
||||
|
||||
export class Theme {
|
||||
|
|
|
|||
Loading…
Reference in New Issue