140 lines
5.1 KiB
JavaScript
140 lines
5.1 KiB
JavaScript
'use strict';
|
|
|
|
var view = require('@codemirror/view');
|
|
var language = require('@codemirror/language');
|
|
var highlight = require('@lezer/highlight');
|
|
|
|
// Using https://github.com/one-dark/vscode-one-dark-theme/ as reference for the colors
|
|
const chalky = "#e5c07b", coral = "#e06c75", cyan = "#56b6c2", invalid = "#ffffff", ivory = "#abb2bf", stone = "#7d8799", // Brightened compared to original to increase contrast
|
|
malibu = "#61afef", sage = "#98c379", whiskey = "#d19a66", violet = "#c678dd", darkBackground = "#21252b", highlightBackground = "#2c313a", background = "#282c34", tooltipBackground = "#353a42", selection = "#3E4451", cursor = "#528bff";
|
|
/**
|
|
The colors used in the theme, as CSS color strings.
|
|
*/
|
|
const color = {
|
|
chalky,
|
|
coral,
|
|
cyan,
|
|
invalid,
|
|
ivory,
|
|
stone,
|
|
malibu,
|
|
sage,
|
|
whiskey,
|
|
violet,
|
|
darkBackground,
|
|
highlightBackground,
|
|
background,
|
|
tooltipBackground,
|
|
selection,
|
|
cursor
|
|
};
|
|
/**
|
|
The editor theme styles for One Dark.
|
|
*/
|
|
const oneDarkTheme = view.EditorView.theme({
|
|
"&": {
|
|
color: ivory,
|
|
backgroundColor: background
|
|
},
|
|
".cm-content": {
|
|
caretColor: cursor
|
|
},
|
|
".cm-cursor, .cm-dropCursor": { borderLeftColor: cursor },
|
|
"&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection": { backgroundColor: selection },
|
|
".cm-panels": { backgroundColor: darkBackground, color: ivory },
|
|
".cm-panels.cm-panels-top": { borderBottom: "2px solid black" },
|
|
".cm-panels.cm-panels-bottom": { borderTop: "2px solid black" },
|
|
".cm-searchMatch": {
|
|
backgroundColor: "#72a1ff59",
|
|
outline: "1px solid #457dff"
|
|
},
|
|
".cm-searchMatch.cm-searchMatch-selected": {
|
|
backgroundColor: "#6199ff2f"
|
|
},
|
|
".cm-activeLine": { backgroundColor: "#6699ff0b" },
|
|
".cm-selectionMatch": { backgroundColor: "#aafe661a" },
|
|
"&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket": {
|
|
backgroundColor: "#bad0f847"
|
|
},
|
|
".cm-gutters": {
|
|
backgroundColor: background,
|
|
color: stone,
|
|
border: "none"
|
|
},
|
|
".cm-activeLineGutter": {
|
|
backgroundColor: highlightBackground
|
|
},
|
|
".cm-foldPlaceholder": {
|
|
backgroundColor: "transparent",
|
|
border: "none",
|
|
color: "#ddd"
|
|
},
|
|
".cm-tooltip": {
|
|
border: "none",
|
|
backgroundColor: tooltipBackground
|
|
},
|
|
".cm-tooltip .cm-tooltip-arrow:before": {
|
|
borderTopColor: "transparent",
|
|
borderBottomColor: "transparent"
|
|
},
|
|
".cm-tooltip .cm-tooltip-arrow:after": {
|
|
borderTopColor: tooltipBackground,
|
|
borderBottomColor: tooltipBackground
|
|
},
|
|
".cm-tooltip-autocomplete": {
|
|
"& > ul > li[aria-selected]": {
|
|
backgroundColor: highlightBackground,
|
|
color: ivory
|
|
}
|
|
}
|
|
}, { dark: true });
|
|
/**
|
|
The highlighting style for code in the One Dark theme.
|
|
*/
|
|
const oneDarkHighlightStyle = language.HighlightStyle.define([
|
|
{ tag: highlight.tags.keyword,
|
|
color: violet },
|
|
{ tag: [highlight.tags.name, highlight.tags.deleted, highlight.tags.character, highlight.tags.propertyName, highlight.tags.macroName],
|
|
color: coral },
|
|
{ tag: [highlight.tags.function(highlight.tags.variableName), highlight.tags.labelName],
|
|
color: malibu },
|
|
{ tag: [highlight.tags.color, highlight.tags.constant(highlight.tags.name), highlight.tags.standard(highlight.tags.name)],
|
|
color: whiskey },
|
|
{ tag: [highlight.tags.definition(highlight.tags.name), highlight.tags.separator],
|
|
color: ivory },
|
|
{ tag: [highlight.tags.typeName, highlight.tags.className, highlight.tags.number, highlight.tags.changed, highlight.tags.annotation, highlight.tags.modifier, highlight.tags.self, highlight.tags.namespace],
|
|
color: chalky },
|
|
{ tag: [highlight.tags.operator, highlight.tags.operatorKeyword, highlight.tags.url, highlight.tags.escape, highlight.tags.regexp, highlight.tags.link, highlight.tags.special(highlight.tags.string)],
|
|
color: cyan },
|
|
{ tag: [highlight.tags.meta, highlight.tags.comment],
|
|
color: stone },
|
|
{ tag: highlight.tags.strong,
|
|
fontWeight: "bold" },
|
|
{ tag: highlight.tags.emphasis,
|
|
fontStyle: "italic" },
|
|
{ tag: highlight.tags.strikethrough,
|
|
textDecoration: "line-through" },
|
|
{ tag: highlight.tags.link,
|
|
color: stone,
|
|
textDecoration: "underline" },
|
|
{ tag: highlight.tags.heading,
|
|
fontWeight: "bold",
|
|
color: coral },
|
|
{ tag: [highlight.tags.atom, highlight.tags.bool, highlight.tags.special(highlight.tags.variableName)],
|
|
color: whiskey },
|
|
{ tag: [highlight.tags.processingInstruction, highlight.tags.string, highlight.tags.inserted],
|
|
color: sage },
|
|
{ tag: highlight.tags.invalid,
|
|
color: invalid },
|
|
]);
|
|
/**
|
|
Extension to enable the One Dark theme (both the editor theme and
|
|
the highlight style).
|
|
*/
|
|
const oneDark = [oneDarkTheme, language.syntaxHighlighting(oneDarkHighlightStyle)];
|
|
|
|
exports.color = color;
|
|
exports.oneDark = oneDark;
|
|
exports.oneDarkHighlightStyle = oneDarkHighlightStyle;
|
|
exports.oneDarkTheme = oneDarkTheme;
|