diff --git a/src/editor.js b/src/editor.js index 2bc81e2..a11db8a 100644 --- a/src/editor.js +++ b/src/editor.js @@ -10,7 +10,7 @@ import { EditorView, minimalSetup } from 'codemirror'; import { yCollab } from 'y-codemirror.next'; import { UndoManager } from 'yjs'; import './style.css'; -import { strudelTheme } from './themes/theme.js'; +import theme from './themes/strudel-theme.js'; import { highlightMiniLocations, updateMiniLocations } from '@strudel/codemirror'; import { getSettings } from './settings.js'; @@ -47,7 +47,7 @@ export class PastaMirror { doc: doc.content, extensions: [ minimalSetup, - strudelTheme, + theme, this.flokBasicSetup(doc), javascript(), getSettings().vimMode ? vim() : [], diff --git a/src/themes/black-theme.js b/src/themes/black-theme.js new file mode 100644 index 0000000..afce804 --- /dev/null +++ b/src/themes/black-theme.js @@ -0,0 +1,64 @@ +// currently unused +import { EditorView } from 'codemirror'; +import { tags } from '@lezer/highlight'; +import { HighlightStyle } from '@codemirror/language'; +import { syntaxHighlighting } from '@codemirror/language'; + +let theme = EditorView.theme( + { + '&': { + color: 'white', + overflow: 'hidden', + backgroundColor: 'transparent', + fontSize: '16px', + height: '100%', + }, + '.cm-gutters': { + 'background-color': 'transparent', + color: 'white', + }, + '.cm-cursor': { + 'border-left-color': 'transparent', + // the regular cursor is hidden, because we're showing a nametag.. + // the cursor is part of https://github.com/felixroos/y-codemirror.next + // i had to fork again because the scrollIntoView was messing with the global scroll + }, + '.cm-activeLine, .cm-activeLineGutter, .cm-line': { + 'background-color': 'rgba(0,0,0,.7) !important', + }, + '.cm-selectionBackground': { + 'background-color': 'rgba(255,255,255,.7) !important', + }, + '.cm-cursorLayer': { + 'animation-name': 'inherit !important;', // disables blinking + }, + '.cm-matchingBracket': { + 'text-decoration': 'underline 0.12rem', + 'text-underline-offset': '0.24rem', + 'text-decoration-color': 'white', + }, + '.cm-ySelectionInfo': { + opacity: '1', + fontFamily: 'monospace', + color: 'black', + padding: '2px 2px', + fontSize: '0.8rem', + //"font-weight": "bold", + top: '1.45em', + 'z-index': '1000', + }, + }, + { dark: true }, +); + +const highlightStyle = HighlightStyle.define([ + { tag: tags.labelName, color: 'white' }, + { tag: tags.keyword, color: 'white' }, + { tag: tags.literal, color: 'white' }, + { tag: tags.squareBracket, color: 'white' }, + { tag: tags.punctuation, color: 'white' }, + { tag: tags.operator, color: 'white' }, + { tag: tags.comment, color: 'white', fontStyle: 'italic' }, +]); + +export default [theme, syntaxHighlighting(highlightStyle)]; diff --git a/src/themes/strudel-theme.js b/src/themes/strudel-theme.js index ef176de..cdca619 100644 --- a/src/themes/strudel-theme.js +++ b/src/themes/strudel-theme.js @@ -77,4 +77,4 @@ const highlightStyle = HighlightStyle.define([ { tag: tags.comment, color: colors.stone500, fontStyle: 'italic' }, ]); -export let strudelTheme = [theme, syntaxHighlighting(highlightStyle)]; +export default [theme, syntaxHighlighting(highlightStyle)];