1import { EditorView } from '@codemirror/view';
2import { syntaxHighlighting } from '@codemirror/language';
3import { HighlightStyle } from '@codemirror/language';
4
5export const createTheme = ({ theme, settings, styles }) => {
6  const _theme = EditorView.theme(
7    {
8      '&': {
9        color: settings.foreground,
10        backgroundColor: settings.background,
11      },
12      '.cm-gutters': {
13        backgroundColor: settings.gutterBackground,
14        color: settings.gutterForeground,
15        //borderRightColor: settings.gutterBorder
16      },
17      '.cm-content': {
18        caretColor: settings.caret,
19      },
20      '.cm-cursor, .cm-dropCursor': {
21        borderLeftColor: settings.caret,
22      },
23      '.cm-activeLineGutter': {
24        // color: settings.gutterActiveForeground
25        backgroundColor: settings.lineHighlight,
26      },
27      '.cm-activeLine': {
28        backgroundColor: settings.lineHighlight,
29      },
30      '&.cm-focused .cm-selectionBackground, & .cm-line::selection, & .cm-selectionLayer .cm-selectionBackground, .cm-content ::selection':
31        {
32          background: settings.selection + ' !important',
33        },
34      '& .cm-selectionMatch': {
35        backgroundColor: settings.selectionMatch,
36      },
37    },
38    { dark: theme === 'dark' },
39  );
40  const highlightStyle = HighlightStyle.define(styles);
41  return [_theme, syntaxHighlighting(highlightStyle)];
42};