@vizhub/codemirror-theme
Version:
CodeMirror color theme for VizHub
158 lines (157 loc) • 6.82 kB
JavaScript
;
// A CodeMirror 6 theme for the VizHub syntax highlighting colors.
Object.defineProperty(exports, "__esModule", { value: true });
exports.vizhubTheme = void 0;
// Inspired by https://github.com/uiwjs/react-codemirror/blob/master/themes/vscode/src/index.ts
const highlight_1 = require("@lezer/highlight");
const codemirror_themes_1 = require("@uiw/codemirror-themes");
const colors_1 = require("./colors");
const codemirror_1 = require("codemirror");
// Use semi-bold weight for keywords and other important things
// const boldWeight = 'bold';
// This looks way better as we are pulling in the semi-bold font from Google Fonts
const boldWeight = '500';
const defaultSettingsVizhubTheme = {
background: colors_1.backgroundColor,
foreground: colors_1.light,
caret: colors_1.caretColor,
selection: colors_1.selectionBackground,
selectionMatch: colors_1.selectionBackgroundMatch,
lineHighlight: colors_1.lineHighlight,
gutterBackground: colors_1.backgroundColor,
gutterForeground: colors_1.lineNumbers,
gutterActiveForeground: colors_1.lineNumbersActive,
};
function vizhubThemeInit(options) {
const { theme = 'dark', settings = {}, styles = [], } = options || {};
return [
(0, codemirror_themes_1.createTheme)({
theme: theme,
settings: Object.assign(Object.assign({}, defaultSettingsVizhubTheme), settings),
styles: [
{
tag: [
highlight_1.tags.keyword,
highlight_1.tags.operatorKeyword,
highlight_1.tags.modifier,
highlight_1.tags.color,
highlight_1.tags.constant(highlight_1.tags.name),
highlight_1.tags.standard(highlight_1.tags.name),
highlight_1.tags.standard(highlight_1.tags.tagName),
highlight_1.tags.special(highlight_1.tags.brace),
highlight_1.tags.atom,
highlight_1.tags.bool,
highlight_1.tags.special(highlight_1.tags.variableName),
],
color: colors_1.MINT,
},
{
tag: [highlight_1.tags.controlKeyword, highlight_1.tags.moduleKeyword],
color: colors_1.MINT,
},
{
tag: [
highlight_1.tags.name,
highlight_1.tags.deleted,
highlight_1.tags.character,
highlight_1.tags.macroName,
highlight_1.tags.variableName,
highlight_1.tags.labelName,
highlight_1.tags.definition(highlight_1.tags.name),
],
color: colors_1.AQUA,
},
{
tag: [highlight_1.tags.propertyName],
color: colors_1.GOLDENROD,
},
{
tag: highlight_1.tags.heading,
fontWeight: boldWeight,
color: colors_1.SKY,
},
{
tag: [
highlight_1.tags.typeName,
highlight_1.tags.className,
highlight_1.tags.tagName,
highlight_1.tags.number,
highlight_1.tags.changed,
highlight_1.tags.annotation,
highlight_1.tags.self,
highlight_1.tags.namespace,
],
color: colors_1.AQUA,
},
{
tag: [
highlight_1.tags.function(highlight_1.tags.variableName),
highlight_1.tags.function(highlight_1.tags.propertyName),
],
color: colors_1.AQUA,
},
{ tag: [highlight_1.tags.number], color: colors_1.SALMON },
{
tag: [
highlight_1.tags.operator,
highlight_1.tags.punctuation,
highlight_1.tags.separator,
highlight_1.tags.url,
highlight_1.tags.escape,
highlight_1.tags.regexp,
],
color: colors_1.light,
},
{
tag: [highlight_1.tags.regexp],
color: colors_1.LAVENDER,
},
{
tag: [highlight_1.tags.special(highlight_1.tags.string), highlight_1.tags.string, highlight_1.tags.inserted],
color: colors_1.LAVENDER,
},
{
tag: [highlight_1.tags.processingInstruction],
color: colors_1.AQUA,
},
{ tag: [highlight_1.tags.angleBracket], color: colors_1.AQUA },
{ tag: highlight_1.tags.strong, fontWeight: boldWeight },
{ tag: highlight_1.tags.emphasis, fontStyle: 'italic' },
{
tag: highlight_1.tags.strikethrough,
textDecoration: 'line-through',
},
{ tag: [highlight_1.tags.meta, highlight_1.tags.comment], color: colors_1.dark },
{
tag: highlight_1.tags.link,
color: colors_1.GOLDENROD,
textDecoration: 'underline',
},
{ tag: highlight_1.tags.invalid, color: colors_1.PANIC },
// {
// class: 'cm-nonmatchingBracket',
// // color: "rede",
// backgroundColor: 'red', // Optional: set background color for matching brackets
// },
// {
// tag: t.nonmatchingBracket,
// color: nonMatchingBracketColor,
// backgroundColor: 'transparent', // Optional: set background color for non-matching brackets
// },
...styles,
],
}),
// Theme matching and non-matching brackets.
codemirror_1.EditorView.theme({
'&.cm-focused .cm-matchingBracket': {
backgroundColor: 'transparent',
outline: '1px solid #888888',
},
'&.cm-focused .cm-nonmatchingBracket': {
backgroundColor: 'transparent',
outline: '1px solid #ff2222',
},
}, { dark: true }),
];
}
exports.vizhubTheme = vizhubThemeInit();