1import { tags as t } from '@lezer/highlight';
2import { createTheme } from './theme-helper.mjs';
3
4let colorA = '#6edee4';

6let colorB = 'white';
7let colorC = 'red';
8let colorD = '#f8fc55';

10export const settings = {
11  background: '#000000',
12  foreground: colorA,
13  muted: colorA + '50',
14  caret: colorC,
15  selection: colorD,
16  selectionMatch: colorA,
17  lineHighlight: '#6edee440', // panel bg
18  lineBackground: '#00000040',
19  gutterBackground: 'transparent',
20  gutterForeground: '#8a919966',
21  // customStyle: '.cm-line { line-height: 1 }',
22};
23
24let punctuation = colorD;
25let mini = colorB;
26
27export default createTheme({
28  theme: 'dark',
29  settings,
30  styles: [
31    { tag: t.labelName, color: colorB },
32    { tag: t.keyword, color: colorA },
33    { tag: t.operator, color: mini },
34    { tag: t.special(t.variableName), color: colorA },
35    { tag: t.typeName, color: colorA },
36    { tag: t.atom, color: colorA },
37    { tag: t.number, color: mini },
38    { tag: t.definition(t.variableName), color: colorA },
39    { tag: t.string, color: mini },
40    { tag: t.special(t.string), color: mini },
41    { tag: t.comment, color: punctuation },
42    { tag: t.variableName, color: colorA },
43    { tag: t.tagName, color: colorA },
44    { tag: t.bracket, color: punctuation },
45    { tag: t.meta, color: colorA },
46    { tag: t.attributeName, color: colorA },
47    { tag: t.propertyName, color: colorA }, // methods
48    { tag: t.className, color: colorA },
49    { tag: t.invalid, color: colorC },
50    { tag: [t.unit, t.punctuation], color: punctuation },
51  ],
52});