ZacharyZhang-NY
b7fca0146d
ElyDoc, ElyTable, ElyShow (LibreOfficeKit), ElyPDF (MuPDF), ElyTree (Git), ElyMark (Milkdown and CodeMirror in CEF). ElyMail and ElyAgent follow.
43 lines
1.9 KiB
JavaScript
43 lines
1.9 KiB
JavaScript
// CodeMirror colors from the page's Ely tokens.
|
|
import { HighlightStyle, syntaxHighlighting } from '@codemirror/language'
|
|
import { EditorView } from '@codemirror/view'
|
|
import { tags } from '@lezer/highlight'
|
|
|
|
const token = (name) => `var(--ely-${name})`
|
|
|
|
const colors = HighlightStyle.define([
|
|
{ tag: [tags.keyword, tags.operatorKeyword, tags.modifier], color: token('keyword') },
|
|
{ tag: [tags.string, tags.regexp, tags.special(tags.string)], color: token('string') },
|
|
{ tag: [tags.number, tags.bool, tags.null, tags.atom], color: token('number') },
|
|
{ tag: [tags.comment, tags.meta], color: token('comment') },
|
|
{
|
|
tag: [tags.function(tags.variableName), tags.function(tags.propertyName)],
|
|
color: token('function'),
|
|
},
|
|
{ tag: [tags.typeName, tags.className, tags.namespace], color: token('type') },
|
|
{ tag: [tags.tagName, tags.heading], color: token('tag'), fontWeight: 'bold' },
|
|
{ tag: [tags.attributeName, tags.propertyName], color: token('attribute') },
|
|
{
|
|
tag: [tags.punctuation, tags.bracket, tags.processingInstruction],
|
|
color: token('punctuation'),
|
|
},
|
|
{ tag: [tags.link, tags.url], color: token('link') },
|
|
{ tag: tags.emphasis, fontStyle: 'italic' },
|
|
{ tag: tags.strong, fontWeight: 'bold' },
|
|
{ tag: tags.strikethrough, textDecoration: 'line-through' },
|
|
])
|
|
|
|
const frame = EditorView.theme({
|
|
'&': { color: token('fg'), backgroundColor: 'transparent' },
|
|
'.cm-content': { caretColor: token('fg'), fontFamily: 'var(--ely-mono), monospace' },
|
|
'.cm-cursor': { borderLeftColor: token('fg') },
|
|
'.cm-gutters': { backgroundColor: 'transparent', color: token('fg-subtle'), border: 'none' },
|
|
'.cm-activeLine, .cm-activeLineGutter': { backgroundColor: token('hover') },
|
|
'&.cm-focused .cm-selectionBackground, .cm-selectionBackground': {
|
|
backgroundColor: token('selection'),
|
|
},
|
|
'&.cm-focused': { outline: 'none' },
|
|
})
|
|
|
|
export const theme = [frame, syntaxHighlighting(colors)]
|