| 19 | } |
| 20 | |
| 21 | function getEditorTheme(settings: EditorSettings) { |
| 22 | return EditorView.theme({ |
| 23 | '&': { |
| 24 | fontSize: settings.fontSize ?? '12px', |
| 25 | }, |
| 26 | '&.cm-editor': { |
| 27 | height: '100%', |
| 28 | background: 'var(--cm-backgroundColor)', |
| 29 | color: 'var(--cm-textColor)', |
| 30 | }, |
| 31 | '.cm-cursor': { |
| 32 | borderLeft: 'var(--cm-cursor-width) solid var(--cm-cursor-backgroundColor)', |
| 33 | }, |
| 34 | '.cm-scroller': { |
| 35 | lineHeight: '1.5', |
| 36 | '&:focus-visible': { |
| 37 | outline: 'none', |
| 38 | }, |
| 39 | }, |
| 40 | '.cm-line': { |
| 41 | padding: '0 0 0 4px', |
| 42 | }, |
| 43 | '&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground': { |
| 44 | backgroundColor: 'var(--cm-selection-backgroundColorFocused) !important', |
| 45 | opacity: 'var(--cm-selection-backgroundOpacityFocused, 0.3)', |
| 46 | }, |
| 47 | '&:not(.cm-focused) > .cm-scroller > .cm-selectionLayer .cm-selectionBackground': { |
| 48 | backgroundColor: 'var(--cm-selection-backgroundColorBlured)', |
| 49 | opacity: 'var(--cm-selection-backgroundOpacityBlured, 0.3)', |
| 50 | }, |
| 51 | '&.cm-focused > .cm-scroller .cm-matchingBracket': { |
| 52 | backgroundColor: 'var(--cm-matching-bracket)', |
| 53 | }, |
| 54 | '.cm-activeLine': { |
| 55 | background: 'var(--cm-activeLineBackgroundColor)', |
| 56 | }, |
| 57 | '.cm-gutters': { |
| 58 | background: 'var(--cm-gutter-backgroundColor)', |
| 59 | borderRight: 0, |
| 60 | color: 'var(--cm-gutter-textColor)', |
| 61 | }, |
| 62 | '.cm-gutter': { |
| 63 | '&.cm-lineNumbers': { |
| 64 | fontFamily: 'Roboto Mono, monospace', |
| 65 | fontSize: settings.gutterFontSize ?? settings.fontSize ?? '12px', |
| 66 | minWidth: '40px', |
| 67 | }, |
| 68 | '& .cm-activeLineGutter': { |
| 69 | background: 'transparent', |
| 70 | color: 'var(--cm-gutter-activeLineTextColor)', |
| 71 | }, |
| 72 | '&.cm-foldGutter .cm-gutterElement > .fold-icon': { |
| 73 | cursor: 'pointer', |
| 74 | color: 'var(--cm-foldGutter-textColor)', |
| 75 | transform: 'translateY(2px)', |
| 76 | '&:hover': { |
| 77 | color: 'var(--cm-foldGutter-textColorHover)', |
| 78 | }, |