feat(Editor): add monochrome themes for codemirror

src/livecodes/editor/codemirror/codemirror-themes.ts

@@ -1,3 +1,6 @@
+import { EditorView } from 'codemirror';
+import { HighlightStyle, syntaxHighlighting } from '@codemirror/language';
+
 import type { CodemirrorTheme } from '../../models';
 import {
   cm6ThemeBasicDarkUrl,
@@ -139,6 +142,8 @@ export const codemirrorThemes: Array<{
     url: ddietrCmThemesBaseUrl + 'material-light.js',
     exportName: 'materialLight',
   },
+  { name: 'monochrome', title: 'Monochrome' },
+  { name: 'monochrome-dark', title: 'Monochrome Dark' },
   {
     name: 'noctis-lilac',
     title: 'Noctis Lilac',
@@ -201,3 +206,78 @@ export const codemirrorThemes: Array<{
     exportName: 'tomorrow',
   },
 ];
+
+const createTheme = ({
+  variant,
+  settings,
+  styles,
+}: {
+  variant: 'light' | 'dark';
+  settings: any;
+  styles: any[];
+}) => {
+  const theme = EditorView.theme(
+    {
+      // eslint-disable-next-line @typescript-eslint/naming-convention
+      '&': {
+        backgroundColor: settings.background,
+        color: settings.foreground,
+      },
+      '.cm-content': {
+        caretColor: settings.caret,
+      },
+      '.cm-cursor, .cm-dropCursor': {
+        borderLeftColor: settings.caret,
+      },
+      '&.cm-focused .cm-selectionBackgroundm .cm-selectionBackground, .cm-selectionMatch, .cm-content ::selection':
+        {
+          backgroundColor: settings.selection,
+        },
+      '.cm-activeLine': {
+        backgroundColor: settings.lineHighlight,
+      },
+      '.cm-gutters': {
+        backgroundColor: settings.gutterBackground,
+        color: settings.gutterForeground,
+      },
+      '.cm-activeLineGutter': {
+        backgroundColor: settings.lineHighlight,
+      },
+    },
+    {
+      dark: variant === 'dark',
+    },
+  );
+  const highlightStyle = HighlightStyle.define(styles);
+  const extension = [theme, syntaxHighlighting(highlightStyle)];
+  return extension;
+};
+
+export const customThemes = {
+  monochrome: createTheme({
+    variant: 'light',
+    settings: {
+      background: '#fffffe',
+      foreground: '#24292e',
+      caret: '#24292e',
+      selection: '#c8c8fa',
+      gutterBackground: '#fffffe',
+      gutterForeground: '#24292e',
+      lineHighlight: '#f1faff',
+    },
+    styles: [],
+  }),
+  'monochrome-dark': createTheme({
+    variant: 'dark',
+    settings: {
+      background: '#24292e',
+      foreground: '#e2e2e3',
+      caret: '#e2e2e3',
+      selection: '#444d56',
+      gutterBackground: '#24292e',
+      gutterForeground: '#e2e2e3',
+      lineHighlight: '#444d56',
+    },
+    styles: [],
+  }),
+};

src/livecodes/editor/codemirror/codemirror.ts

@@ -33,7 +33,7 @@ import { getEditorTheme } from '../themes';
 import { basicSetup, lineNumbers, closeBrackets } from './basic-setup';
 import { editorLanguages } from './editor-languages';
 import { colorPicker, indentationMarkers, vscodeKeymap } from './extras';
-import { codemirrorThemes } from './codemirror-themes';
+import { codemirrorThemes, customThemes } from './codemirror-themes';
 
 export const createEditor = async (options: EditorOptions): Promise<CodeEditor> => {
   const { container, readonly, isEmbed, editorId, getFormatterConfig, getFontFamily } = options;
@@ -56,6 +56,7 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
         '&': { backgroundColor: '#ffffff' },
       }),
     ],
+    ...customThemes,
   };
   const defaultThemes: Record<Theme, CodemirrorTheme> = { dark: 'one-dark', light: 'cm-light' };
   const getActiveTheme = () => themes[theme] || themes[defaultThemes[options.theme]] || [];

src/sdk/models.ts

@@ -831,6 +831,8 @@ export type CodemirrorTheme =
   | 'gruvbox-light'
   | 'material-dark'
   | 'material-light'
+  | 'monochrome'
+  | 'monochrome-dark'
   | 'noctis-lilac'
   | 'nord'
   | 'one-dark'