Make ui/colors refelect the current theme.

This commit is contained in:
jacob314 2025-04-23 17:37:09 -07:00 committed by N. Taylor Mullen
parent 105c20146c
commit cf89c030d0
11 changed files with 903 additions and 799 deletions

View File

@ -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;
},
};

View File

@ -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>

View File

@ -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,
);

View File

@ -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,
);

View File

@ -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,
);

View File

@ -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,
);

View File

@ -27,7 +27,7 @@ class ThemeManager {
this.availableThemes = [
AtomOneDark,
Dracula,
VS,
VS, // Light mode.
VS2015,
GitHub,
GoogleCode,

View File

@ -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;

View File

@ -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,
);

View File

@ -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,
);

View File

@ -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,
);