129 lines
4.3 KiB
TypeScript
129 lines
4.3 KiB
TypeScript
import {EditorView} from '@codemirror/view'
|
|
import {Extension} from '@codemirror/state'
|
|
import {HighlightStyle, syntaxHighlighting} from '@codemirror/language'
|
|
import {tags as t} from '@lezer/highlight'
|
|
|
|
export const config = {
|
|
name: 'dracula',
|
|
dark: true,
|
|
background: '#282A36',
|
|
foreground: '#F8F8F2',
|
|
selection: '#44475A',
|
|
cursor: '#F8F8F2',
|
|
dropdownBackground: '#282A36',
|
|
dropdownBorder: '#191A21',
|
|
activeLine: '#53576c22',
|
|
lineNumber: '#6272A4',
|
|
lineNumberActive: '#F8F8F2',
|
|
matchingBracket: '#44475A',
|
|
keyword: '#FF79C6',
|
|
storage: '#FF79C6',
|
|
variable: '#F8F8F2',
|
|
parameter: '#F8F8F2',
|
|
function: '#50FA7B',
|
|
string: '#F1FA8C',
|
|
constant: '#BD93F9',
|
|
type: '#8BE9FD',
|
|
class: '#8BE9FD',
|
|
number: '#BD93F9',
|
|
comment: '#6272A4',
|
|
heading: '#BD93F9',
|
|
invalid: '#FF5555',
|
|
regexp: '#F1FA8C',
|
|
}
|
|
|
|
export const draculaTheme = EditorView.theme({
|
|
'&': {
|
|
color: config.foreground,
|
|
backgroundColor: config.background,
|
|
},
|
|
|
|
'.cm-content': {caretColor: config.cursor},
|
|
|
|
'.cm-cursor, .cm-dropCursor': {borderLeftColor: config.cursor},
|
|
'&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection': {backgroundColor: config.selection},
|
|
|
|
'.cm-panels': {backgroundColor: config.dropdownBackground, color: config.foreground},
|
|
'.cm-panels.cm-panels-top': {borderBottom: '2px solid black'},
|
|
'.cm-panels.cm-panels-bottom': {borderTop: '2px solid black'},
|
|
|
|
'.cm-searchMatch': {
|
|
backgroundColor: config.dropdownBackground,
|
|
outline: `1px solid ${config.dropdownBorder}`
|
|
},
|
|
'.cm-searchMatch.cm-searchMatch-selected': {
|
|
backgroundColor: config.selection
|
|
},
|
|
|
|
'.cm-activeLine': {backgroundColor: config.activeLine},
|
|
'.cm-selectionMatch': {backgroundColor: config.selection},
|
|
|
|
'&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket': {
|
|
backgroundColor: config.matchingBracket,
|
|
outline: 'none'
|
|
},
|
|
|
|
'.cm-gutters': {
|
|
backgroundColor: config.background,
|
|
color: config.foreground,
|
|
border: 'none'
|
|
},
|
|
'.cm-activeLineGutter': {backgroundColor: config.background},
|
|
|
|
'.cm-lineNumbers .cm-gutterElement': {color: config.lineNumber},
|
|
'.cm-lineNumbers .cm-activeLineGutter': {color: config.lineNumberActive},
|
|
|
|
'.cm-foldPlaceholder': {
|
|
backgroundColor: 'transparent',
|
|
border: 'none',
|
|
color: config.foreground
|
|
},
|
|
'.cm-tooltip': {
|
|
border: `1px solid ${config.dropdownBorder}`,
|
|
backgroundColor: config.dropdownBackground,
|
|
color: config.foreground,
|
|
},
|
|
'.cm-tooltip .cm-tooltip-arrow:before': {
|
|
borderTopColor: 'transparent',
|
|
borderBottomColor: 'transparent'
|
|
},
|
|
'.cm-tooltip .cm-tooltip-arrow:after': {
|
|
borderTopColor: config.foreground,
|
|
borderBottomColor: config.foreground,
|
|
},
|
|
'.cm-tooltip-autocomplete': {
|
|
'& > ul > li[aria-selected]': {
|
|
background: config.selection,
|
|
color: config.foreground,
|
|
}
|
|
}
|
|
}, {dark: config.dark})
|
|
|
|
export const draculaHighlightStyle = HighlightStyle.define([
|
|
{tag: t.keyword, color: config.keyword},
|
|
{tag: [t.name, t.deleted, t.character, t.macroName], color: config.variable},
|
|
{tag: [t.propertyName], color: config.function},
|
|
{tag: [t.processingInstruction, t.string, t.inserted, t.special(t.string)], color: config.string},
|
|
{tag: [t.function(t.variableName), t.labelName], color: config.function},
|
|
{tag: [t.color, t.constant(t.name), t.standard(t.name)], color: config.constant},
|
|
{tag: [t.definition(t.name), t.separator], color: config.variable},
|
|
{tag: [t.className], color: config.class},
|
|
{tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace], color: config.number},
|
|
{tag: [t.typeName], color: config.type, fontStyle: config.type},
|
|
{tag: [t.operator, t.operatorKeyword], color: config.keyword},
|
|
{tag: [t.url, t.escape, t.regexp, t.link], color: config.regexp},
|
|
{tag: [t.meta, t.comment], color: config.comment},
|
|
{tag: t.strong, fontWeight: 'bold'},
|
|
{tag: t.emphasis, fontStyle: 'italic'},
|
|
{tag: t.link, textDecoration: 'underline'},
|
|
{tag: t.heading, fontWeight: 'bold', color: config.heading},
|
|
{tag: [t.atom, t.bool, t.special(t.variableName)], color: config.variable},
|
|
{tag: t.invalid, color: config.invalid},
|
|
{tag: t.strikethrough, textDecoration: 'line-through'},
|
|
])
|
|
|
|
export const dracula: Extension = [
|
|
draculaTheme,
|
|
syntaxHighlighting(draculaHighlightStyle),
|
|
]
|