7import { tags as t } from '@lezer/highlight';
8import { createTheme } from './theme-helper.mjs';

10export const settings = {
11  background: '#282a36',
12  lineBackground: '#282a3699',
13  foreground: '#f8f8f2',
14  muted: '#f8f8f250',
15  caret: '#f8f8f0',
16  selection: 'rgba(255, 255, 255, 0.1)',
17  selectionMatch: 'rgba(255, 255, 255, 0.2)',
18  gutterBackground: '#282a36',
19  gutterForeground: '#6272a4',
20  gutterBorder: 'transparent',
21  lineHighlight: 'rgba(255, 255, 255, 0.1)',
22};
23
24const purple = '#BD93F9';
25
26export default createTheme({
27  theme: 'dark',
28  settings: {
29    background: '#282a36',
30    foreground: '#f8f8f2',
31    muted: '#f8f8f250',
32    caret: '#f8f8f0',
33    selection: 'rgba(255, 255, 255, 0.1)',
34    selectionMatch: 'rgba(255, 255, 255, 0.2)',
35    gutterBackground: '#282a36',
36    gutterForeground: '#6272a4',
37    gutterBorder: 'transparent',
38    lineHighlight: 'rgba(255, 255, 255, 0.1)',
39  },
40  styles: [
41    { tag: t.comment, color: '#6272a4' },
42    { tag: t.string, color: '#f1fa8c' },
43    { tag: [t.atom, t.number], color: purple },
44    { tag: [t.meta, t.labelName, t.variableName], color: '#f8f8f2' },
45    {
46      tag: [t.keyword, t.tagName, t.arithmeticOperator],
47      color: '#ff79c6',
48    },
49    { tag: [t.function(t.variableName), t.propertyName], color: '#50fa7b' },
50    { tag: t.atom, color: '#bd93f9' },
51  ],
52});