@uiw/codemirror-themes 4.9.1 → 4.9.4

package/README.md

@@ -20,7 +20,7 @@ import { javascript } from '@codemirror/lang-javascript';
 import { tags as t } from '@lezer/highlight';
 
 const myTheme = createTheme({
-  variant: 'light',
+  theme: 'light',
   settings: {
     background: '#ffffff',
     foreground: '#75baff',
@@ -66,7 +66,7 @@ import { javascript } from '@codemirror/lang-javascript';
 import { tags as t } from '@lezer/highlight';
 
 const myTheme = createTheme({
-  variant: 'light',
+  theme: 'light',
   settings: {
     background: '#ffffff',
     foreground: '#75baff',
@@ -119,7 +119,7 @@ export interface CreateThemeOptions {
   /**
    * Theme inheritance. Determines which styles CodeMirror will apply by default.
    */
-  dark: Theme;
+  theme: Theme;
   /**
    * Settings to customize the look of the editor, like background, gutter, selection and others.
    */

package/cjs/index.d.ts

@@ -4,7 +4,7 @@ export interface CreateThemeOptions {
     /**
      * Theme inheritance. Determines which styles CodeMirror will apply by default.
      */
-    dark: Theme;
+    theme: Theme;
     /**
      * Settings to customize the look of the editor, like background, gutter, selection and others.
      */
@@ -22,6 +22,8 @@ export interface Settings {
     caret: string;
     /** Selection background. */
     selection: string;
+    /** Selection match background. */
+    selectionMatch?: string;
     /** Background of highlighted lines. */
     lineHighlight: string;
     /** Gutter background. */
@@ -29,5 +31,5 @@ export interface Settings {
     /** Text color inside gutter. */
     gutterForeground: string;
 }
-export declare const createTheme: ({ dark, settings, styles }: CreateThemeOptions) => Extension;
+export declare const createTheme: ({ theme, settings, styles }: CreateThemeOptions) => Extension;
 export default createTheme;

package/cjs/index.js

@@ -10,11 +10,10 @@ var _view = require("@codemirror/view");
 var _language = require("@codemirror/language");
 
 var createTheme = function createTheme(_ref) {
-  var dark = _ref.dark,
+  var theme = _ref.theme,
       settings = _ref.settings,
       styles = _ref.styles;
-
-  var theme = _view.EditorView.theme({
+  var themeOptions = {
     '&': {
       backgroundColor: settings.background,
       color: settings.foreground
@@ -25,9 +24,6 @@ var createTheme = function createTheme(_ref) {
     '.cm-cursor, .cm-dropCursor': {
       borderLeftColor: settings.caret
     },
-    '&.cm-focused .cm-selectionBackground .cm-selectionBackground, & .cm-selectionLayer .cm-selectionBackground, ::selection': {
-      backgroundColor: settings.selection
-    },
     '.cm-activeLine': {
       backgroundColor: settings.lineHighlight
     },
@@ -38,13 +34,27 @@ var createTheme = function createTheme(_ref) {
     '.cm-activeLineGutter': {
       backgroundColor: settings.lineHighlight
     }
-  }, {
-    dark: dark === 'dark'
+  };
+
+  if (settings.selection) {
+    themeOptions['&.cm-focused .cm-selectionBackground .cm-selectionBackground, & .cm-selectionLayer .cm-selectionBackground, ::selection'] = {
+      backgroundColor: settings.selection
+    };
+  }
+
+  if (settings.selectionMatch) {
+    themeOptions['& .cm-selectionMatch'] = {
+      backgroundColor: settings.selectionMatch
+    };
+  }
+
+  var themeExtension = _view.EditorView.theme(themeOptions, {
+    dark: theme === 'dark'
   });
 
   var highlightStyle = _language.HighlightStyle.define(styles);
 
-  var extension = [theme, (0, _language.syntaxHighlighting)(highlightStyle)];
+  var extension = [themeExtension, (0, _language.syntaxHighlighting)(highlightStyle)];
   return extension;
 };
 

package/cjs/index.js.map

@@ -2,11 +2,10 @@
   "version": 3,
   "names": [
     "createTheme",
-    "dark",
+    "theme",
     "settings",
     "styles",
-    "theme",
-    "EditorView",
+    "themeOptions",
     "backgroundColor",
     "background",
     "color",
@@ -14,10 +13,14 @@
     "caretColor",
     "caret",
     "borderLeftColor",
-    "selection",
     "lineHighlight",
     "gutterBackground",
     "gutterForeground",
+    "selection",
+    "selectionMatch",
+    "themeExtension",
+    "EditorView",
+    "dark",
     "highlightStyle",
     "HighlightStyle",
     "define",
@@ -28,7 +31,7 @@
     "../src/index.tsx"
   ],
   "sourcesContent": [
-    "import { EditorView } from '@codemirror/view';\nimport { Extension } from '@codemirror/state';\nimport { HighlightStyle, TagStyle, syntaxHighlighting } from '@codemirror/language';\n\nexport interface CreateThemeOptions {\n  /**\n   * Theme inheritance. Determines which styles CodeMirror will apply by default.\n   */\n  dark: Theme;\n  /**\n   * Settings to customize the look of the editor, like background, gutter, selection and others.\n   */\n  settings: Settings;\n  /** Syntax highlighting styles. */\n  styles: TagStyle[];\n}\n\ntype Theme = 'light' | 'dark';\n\nexport interface Settings {\n  /** Editor background. */\n  background: string;\n  /** Default text color. */\n  foreground: string;\n  /** Caret color. */\n  caret: string;\n  /** Selection background. */\n  selection: string;\n  /** Background of highlighted lines. */\n  lineHighlight: string;\n  /** Gutter background. */\n  gutterBackground: string;\n  /** Text color inside gutter. */\n  gutterForeground: string;\n}\n\nexport const createTheme = ({ dark, settings, styles }: CreateThemeOptions): Extension => {\n  const theme = EditorView.theme(\n    {\n      '&': {\n        backgroundColor: settings.background,\n        color: settings.foreground,\n      },\n      '.cm-content': {\n        caretColor: settings.caret,\n      },\n      '.cm-cursor, .cm-dropCursor': {\n        borderLeftColor: settings.caret,\n      },\n      '&.cm-focused .cm-selectionBackground .cm-selectionBackground, & .cm-selectionLayer .cm-selectionBackground, ::selection':\n        {\n          backgroundColor: settings.selection,\n        },\n      '.cm-activeLine': {\n        backgroundColor: settings.lineHighlight,\n      },\n      '.cm-gutters': {\n        backgroundColor: settings.gutterBackground,\n        color: settings.gutterForeground,\n      },\n      '.cm-activeLineGutter': {\n        backgroundColor: settings.lineHighlight,\n      },\n    },\n    {\n      dark: dark === 'dark',\n    },\n  );\n\n  const highlightStyle = HighlightStyle.define(styles);\n  const extension = [theme, syntaxHighlighting(highlightStyle)];\n\n  return extension;\n};\n\nexport default createTheme;\n"
+    "import { EditorView } from '@codemirror/view';\nimport { Extension } from '@codemirror/state';\nimport { HighlightStyle, TagStyle, syntaxHighlighting } from '@codemirror/language';\nimport { StyleSpec } from 'style-mod';\n\nexport interface CreateThemeOptions {\n  /**\n   * Theme inheritance. Determines which styles CodeMirror will apply by default.\n   */\n  theme: Theme;\n  /**\n   * Settings to customize the look of the editor, like background, gutter, selection and others.\n   */\n  settings: Settings;\n  /** Syntax highlighting styles. */\n  styles: TagStyle[];\n}\n\ntype Theme = 'light' | 'dark';\n\nexport interface Settings {\n  /** Editor background. */\n  background: string;\n  /** Default text color. */\n  foreground: string;\n  /** Caret color. */\n  caret: string;\n  /** Selection background. */\n  selection: string;\n  /** Selection match background. */\n  selectionMatch?: string;\n  /** Background of highlighted lines. */\n  lineHighlight: string;\n  /** Gutter background. */\n  gutterBackground: string;\n  /** Text color inside gutter. */\n  gutterForeground: string;\n}\n\nexport const createTheme = ({ theme, settings, styles }: CreateThemeOptions): Extension => {\n  const themeOptions: Record<string, StyleSpec> = {\n    '&': {\n      backgroundColor: settings.background,\n      color: settings.foreground,\n    },\n    '.cm-content': {\n      caretColor: settings.caret,\n    },\n    '.cm-cursor, .cm-dropCursor': {\n      borderLeftColor: settings.caret,\n    },\n    '.cm-activeLine': {\n      backgroundColor: settings.lineHighlight,\n    },\n    '.cm-gutters': {\n      backgroundColor: settings.gutterBackground,\n      color: settings.gutterForeground,\n    },\n    '.cm-activeLineGutter': {\n      backgroundColor: settings.lineHighlight,\n    },\n  };\n  if (settings.selection) {\n    themeOptions[\n      '&.cm-focused .cm-selectionBackground .cm-selectionBackground, & .cm-selectionLayer .cm-selectionBackground, ::selection'\n    ] = {\n      backgroundColor: settings.selection,\n    };\n  }\n  if (settings.selectionMatch) {\n    themeOptions['& .cm-selectionMatch'] = {\n      backgroundColor: settings.selectionMatch,\n    };\n  }\n  const themeExtension = EditorView.theme(themeOptions, {\n    dark: theme === 'dark',\n  });\n\n  const highlightStyle = HighlightStyle.define(styles);\n  const extension = [themeExtension, syntaxHighlighting(highlightStyle)];\n\n  return extension;\n};\n\nexport default createTheme;\n"
   ],
-  "mappings": ";;;;;;;AAAA;;AAEA;;AAkCO,IAAMA,WAAW,GAAG,SAAdA,WAAc,OAA+D;EAAA,IAA5DC,IAA4D,QAA5DA,IAA4D;EAAA,IAAtDC,QAAsD,QAAtDA,QAAsD;EAAA,IAA5CC,MAA4C,QAA5CA,MAA4C;;EACxF,IAAMC,KAAK,GAAGC,gBAAA,CAAWD,KAAX,CACZ;IACE,KAAK;MACHE,eAAe,EAAEJ,QAAQ,CAACK,UADvB;MAEHC,KAAK,EAAEN,QAAQ,CAACO;IAFb,CADP;IAKE,eAAe;MACbC,UAAU,EAAER,QAAQ,CAACS;IADR,CALjB;IAQE,8BAA8B;MAC5BC,eAAe,EAAEV,QAAQ,CAACS;IADE,CARhC;IAWE,2HACE;MACEL,eAAe,EAAEJ,QAAQ,CAACW;IAD5B,CAZJ;IAeE,kBAAkB;MAChBP,eAAe,EAAEJ,QAAQ,CAACY;IADV,CAfpB;IAkBE,eAAe;MACbR,eAAe,EAAEJ,QAAQ,CAACa,gBADb;MAEbP,KAAK,EAAEN,QAAQ,CAACc;IAFH,CAlBjB;IAsBE,wBAAwB;MACtBV,eAAe,EAAEJ,QAAQ,CAACY;IADJ;EAtB1B,CADY,EA2BZ;IACEb,IAAI,EAAEA,IAAI,KAAK;EADjB,CA3BY,CAAd;;EAgCA,IAAMgB,cAAc,GAAGC,wBAAA,CAAeC,MAAf,CAAsBhB,MAAtB,CAAvB;;EACA,IAAMiB,SAAS,GAAG,CAAChB,KAAD,EAAQ,IAAAiB,4BAAA,EAAmBJ,cAAnB,CAAR,CAAlB;EAEA,OAAOG,SAAP;AACD,CArCM;;;eAuCQpB,W"
+  "mappings": ";;;;;;;AAAA;;AAEA;;AAqCO,IAAMA,WAAW,GAAG,SAAdA,WAAc,OAAgE;EAAA,IAA7DC,KAA6D,QAA7DA,KAA6D;EAAA,IAAtDC,QAAsD,QAAtDA,QAAsD;EAAA,IAA5CC,MAA4C,QAA5CA,MAA4C;EACzF,IAAMC,YAAuC,GAAG;IAC9C,KAAK;MACHC,eAAe,EAAEH,QAAQ,CAACI,UADvB;MAEHC,KAAK,EAAEL,QAAQ,CAACM;IAFb,CADyC;IAK9C,eAAe;MACbC,UAAU,EAAEP,QAAQ,CAACQ;IADR,CAL+B;IAQ9C,8BAA8B;MAC5BC,eAAe,EAAET,QAAQ,CAACQ;IADE,CARgB;IAW9C,kBAAkB;MAChBL,eAAe,EAAEH,QAAQ,CAACU;IADV,CAX4B;IAc9C,eAAe;MACbP,eAAe,EAAEH,QAAQ,CAACW,gBADb;MAEbN,KAAK,EAAEL,QAAQ,CAACY;IAFH,CAd+B;IAkB9C,wBAAwB;MACtBT,eAAe,EAAEH,QAAQ,CAACU;IADJ;EAlBsB,CAAhD;;EAsBA,IAAIV,QAAQ,CAACa,SAAb,EAAwB;IACtBX,YAAY,CACV,yHADU,CAAZ,GAEI;MACFC,eAAe,EAAEH,QAAQ,CAACa;IADxB,CAFJ;EAKD;;EACD,IAAIb,QAAQ,CAACc,cAAb,EAA6B;IAC3BZ,YAAY,CAAC,sBAAD,CAAZ,GAAuC;MACrCC,eAAe,EAAEH,QAAQ,CAACc;IADW,CAAvC;EAGD;;EACD,IAAMC,cAAc,GAAGC,gBAAA,CAAWjB,KAAX,CAAiBG,YAAjB,EAA+B;IACpDe,IAAI,EAAElB,KAAK,KAAK;EADoC,CAA/B,CAAvB;;EAIA,IAAMmB,cAAc,GAAGC,wBAAA,CAAeC,MAAf,CAAsBnB,MAAtB,CAAvB;;EACA,IAAMoB,SAAS,GAAG,CAACN,cAAD,EAAiB,IAAAO,4BAAA,EAAmBJ,cAAnB,CAAjB,CAAlB;EAEA,OAAOG,SAAP;AACD,CA3CM;;;eA6CQvB,W"
 }

package/esm/index.d.ts

@@ -4,7 +4,7 @@ export interface CreateThemeOptions {
     /**
      * Theme inheritance. Determines which styles CodeMirror will apply by default.
      */
-    dark: Theme;
+    theme: Theme;
     /**
      * Settings to customize the look of the editor, like background, gutter, selection and others.
      */
@@ -22,6 +22,8 @@ export interface Settings {
     caret: string;
     /** Selection background. */
     selection: string;
+    /** Selection match background. */
+    selectionMatch?: string;
     /** Background of highlighted lines. */
     lineHighlight: string;
     /** Gutter background. */
@@ -29,5 +31,5 @@ export interface Settings {
     /** Text color inside gutter. */
     gutterForeground: string;
 }
-export declare const createTheme: ({ dark, settings, styles }: CreateThemeOptions) => Extension;
+export declare const createTheme: ({ theme, settings, styles }: CreateThemeOptions) => Extension;
 export default createTheme;

package/esm/index.js

@@ -2,11 +2,11 @@ import { EditorView } from '@codemirror/view';
 import { HighlightStyle, syntaxHighlighting } from '@codemirror/language';
 export var createTheme = _ref => {
   var {
-    dark,
+    theme,
     settings,
     styles
   } = _ref;
-  var theme = EditorView.theme({
+  var themeOptions = {
     '&': {
       backgroundColor: settings.background,
       color: settings.foreground
@@ -17,9 +17,6 @@ export var createTheme = _ref => {
     '.cm-cursor, .cm-dropCursor': {
       borderLeftColor: settings.caret
     },
-    '&.cm-focused .cm-selectionBackground .cm-selectionBackground, & .cm-selectionLayer .cm-selectionBackground, ::selection': {
-      backgroundColor: settings.selection
-    },
     '.cm-activeLine': {
       backgroundColor: settings.lineHighlight
     },
@@ -30,11 +27,25 @@ export var createTheme = _ref => {
     '.cm-activeLineGutter': {
       backgroundColor: settings.lineHighlight
     }
-  }, {
-    dark: dark === 'dark'
+  };
+
+  if (settings.selection) {
+    themeOptions['&.cm-focused .cm-selectionBackground .cm-selectionBackground, & .cm-selectionLayer .cm-selectionBackground, ::selection'] = {
+      backgroundColor: settings.selection
+    };
+  }
+
+  if (settings.selectionMatch) {
+    themeOptions['& .cm-selectionMatch'] = {
+      backgroundColor: settings.selectionMatch
+    };
+  }
+
+  var themeExtension = EditorView.theme(themeOptions, {
+    dark: theme === 'dark'
   });
   var highlightStyle = HighlightStyle.define(styles);
-  var extension = [theme, syntaxHighlighting(highlightStyle)];
+  var extension = [themeExtension, syntaxHighlighting(highlightStyle)];
   return extension;
 };
 export default createTheme;

package/esm/index.js.map

@@ -5,10 +5,10 @@
     "HighlightStyle",
     "syntaxHighlighting",
     "createTheme",
-    "dark",
+    "theme",
     "settings",
     "styles",
-    "theme",
+    "themeOptions",
     "backgroundColor",
     "background",
     "color",
@@ -16,10 +16,13 @@
     "caretColor",
     "caret",
     "borderLeftColor",
-    "selection",
     "lineHighlight",
     "gutterBackground",
     "gutterForeground",
+    "selection",
+    "selectionMatch",
+    "themeExtension",
+    "dark",
     "highlightStyle",
     "define",
     "extension"
@@ -28,7 +31,7 @@
     "../src/index.tsx"
   ],
   "sourcesContent": [
-    "import { EditorView } from '@codemirror/view';\nimport { Extension } from '@codemirror/state';\nimport { HighlightStyle, TagStyle, syntaxHighlighting } from '@codemirror/language';\n\nexport interface CreateThemeOptions {\n  /**\n   * Theme inheritance. Determines which styles CodeMirror will apply by default.\n   */\n  dark: Theme;\n  /**\n   * Settings to customize the look of the editor, like background, gutter, selection and others.\n   */\n  settings: Settings;\n  /** Syntax highlighting styles. */\n  styles: TagStyle[];\n}\n\ntype Theme = 'light' | 'dark';\n\nexport interface Settings {\n  /** Editor background. */\n  background: string;\n  /** Default text color. */\n  foreground: string;\n  /** Caret color. */\n  caret: string;\n  /** Selection background. */\n  selection: string;\n  /** Background of highlighted lines. */\n  lineHighlight: string;\n  /** Gutter background. */\n  gutterBackground: string;\n  /** Text color inside gutter. */\n  gutterForeground: string;\n}\n\nexport const createTheme = ({ dark, settings, styles }: CreateThemeOptions): Extension => {\n  const theme = EditorView.theme(\n    {\n      '&': {\n        backgroundColor: settings.background,\n        color: settings.foreground,\n      },\n      '.cm-content': {\n        caretColor: settings.caret,\n      },\n      '.cm-cursor, .cm-dropCursor': {\n        borderLeftColor: settings.caret,\n      },\n      '&.cm-focused .cm-selectionBackground .cm-selectionBackground, & .cm-selectionLayer .cm-selectionBackground, ::selection':\n        {\n          backgroundColor: settings.selection,\n        },\n      '.cm-activeLine': {\n        backgroundColor: settings.lineHighlight,\n      },\n      '.cm-gutters': {\n        backgroundColor: settings.gutterBackground,\n        color: settings.gutterForeground,\n      },\n      '.cm-activeLineGutter': {\n        backgroundColor: settings.lineHighlight,\n      },\n    },\n    {\n      dark: dark === 'dark',\n    },\n  );\n\n  const highlightStyle = HighlightStyle.define(styles);\n  const extension = [theme, syntaxHighlighting(highlightStyle)];\n\n  return extension;\n};\n\nexport default createTheme;\n"
+    "import { EditorView } from '@codemirror/view';\nimport { Extension } from '@codemirror/state';\nimport { HighlightStyle, TagStyle, syntaxHighlighting } from '@codemirror/language';\nimport { StyleSpec } from 'style-mod';\n\nexport interface CreateThemeOptions {\n  /**\n   * Theme inheritance. Determines which styles CodeMirror will apply by default.\n   */\n  theme: Theme;\n  /**\n   * Settings to customize the look of the editor, like background, gutter, selection and others.\n   */\n  settings: Settings;\n  /** Syntax highlighting styles. */\n  styles: TagStyle[];\n}\n\ntype Theme = 'light' | 'dark';\n\nexport interface Settings {\n  /** Editor background. */\n  background: string;\n  /** Default text color. */\n  foreground: string;\n  /** Caret color. */\n  caret: string;\n  /** Selection background. */\n  selection: string;\n  /** Selection match background. */\n  selectionMatch?: string;\n  /** Background of highlighted lines. */\n  lineHighlight: string;\n  /** Gutter background. */\n  gutterBackground: string;\n  /** Text color inside gutter. */\n  gutterForeground: string;\n}\n\nexport const createTheme = ({ theme, settings, styles }: CreateThemeOptions): Extension => {\n  const themeOptions: Record<string, StyleSpec> = {\n    '&': {\n      backgroundColor: settings.background,\n      color: settings.foreground,\n    },\n    '.cm-content': {\n      caretColor: settings.caret,\n    },\n    '.cm-cursor, .cm-dropCursor': {\n      borderLeftColor: settings.caret,\n    },\n    '.cm-activeLine': {\n      backgroundColor: settings.lineHighlight,\n    },\n    '.cm-gutters': {\n      backgroundColor: settings.gutterBackground,\n      color: settings.gutterForeground,\n    },\n    '.cm-activeLineGutter': {\n      backgroundColor: settings.lineHighlight,\n    },\n  };\n  if (settings.selection) {\n    themeOptions[\n      '&.cm-focused .cm-selectionBackground .cm-selectionBackground, & .cm-selectionLayer .cm-selectionBackground, ::selection'\n    ] = {\n      backgroundColor: settings.selection,\n    };\n  }\n  if (settings.selectionMatch) {\n    themeOptions['& .cm-selectionMatch'] = {\n      backgroundColor: settings.selectionMatch,\n    };\n  }\n  const themeExtension = EditorView.theme(themeOptions, {\n    dark: theme === 'dark',\n  });\n\n  const highlightStyle = HighlightStyle.define(styles);\n  const extension = [themeExtension, syntaxHighlighting(highlightStyle)];\n\n  return extension;\n};\n\nexport default createTheme;\n"
   ],
-  "mappings": "AAAA,SAASA,UAAT,QAA2B,kBAA3B;AAEA,SAASC,cAAT,EAAmCC,kBAAnC,QAA6D,sBAA7D;AAkCA,OAAO,IAAMC,WAAW,GAAG,QAA+D;EAAA,IAA9D;IAAEC,IAAF;IAAQC,QAAR;IAAkBC;EAAlB,CAA8D;EACxF,IAAMC,KAAK,GAAGP,UAAU,CAACO,KAAX,CACZ;IACE,KAAK;MACHC,eAAe,EAAEH,QAAQ,CAACI,UADvB;MAEHC,KAAK,EAAEL,QAAQ,CAACM;IAFb,CADP;IAKE,eAAe;MACbC,UAAU,EAAEP,QAAQ,CAACQ;IADR,CALjB;IAQE,8BAA8B;MAC5BC,eAAe,EAAET,QAAQ,CAACQ;IADE,CARhC;IAWE,2HACE;MACEL,eAAe,EAAEH,QAAQ,CAACU;IAD5B,CAZJ;IAeE,kBAAkB;MAChBP,eAAe,EAAEH,QAAQ,CAACW;IADV,CAfpB;IAkBE,eAAe;MACbR,eAAe,EAAEH,QAAQ,CAACY,gBADb;MAEbP,KAAK,EAAEL,QAAQ,CAACa;IAFH,CAlBjB;IAsBE,wBAAwB;MACtBV,eAAe,EAAEH,QAAQ,CAACW;IADJ;EAtB1B,CADY,EA2BZ;IACEZ,IAAI,EAAEA,IAAI,KAAK;EADjB,CA3BY,CAAd;EAgCA,IAAMe,cAAc,GAAGlB,cAAc,CAACmB,MAAf,CAAsBd,MAAtB,CAAvB;EACA,IAAMe,SAAS,GAAG,CAACd,KAAD,EAAQL,kBAAkB,CAACiB,cAAD,CAA1B,CAAlB;EAEA,OAAOE,SAAP;AACD,CArCM;AAuCP,eAAelB,WAAf"
+  "mappings": "AAAA,SAASA,UAAT,QAA2B,kBAA3B;AAEA,SAASC,cAAT,EAAmCC,kBAAnC,QAA6D,sBAA7D;AAqCA,OAAO,IAAMC,WAAW,GAAG,QAAgE;EAAA,IAA/D;IAAEC,KAAF;IAASC,QAAT;IAAmBC;EAAnB,CAA+D;EACzF,IAAMC,YAAuC,GAAG;IAC9C,KAAK;MACHC,eAAe,EAAEH,QAAQ,CAACI,UADvB;MAEHC,KAAK,EAAEL,QAAQ,CAACM;IAFb,CADyC;IAK9C,eAAe;MACbC,UAAU,EAAEP,QAAQ,CAACQ;IADR,CAL+B;IAQ9C,8BAA8B;MAC5BC,eAAe,EAAET,QAAQ,CAACQ;IADE,CARgB;IAW9C,kBAAkB;MAChBL,eAAe,EAAEH,QAAQ,CAACU;IADV,CAX4B;IAc9C,eAAe;MACbP,eAAe,EAAEH,QAAQ,CAACW,gBADb;MAEbN,KAAK,EAAEL,QAAQ,CAACY;IAFH,CAd+B;IAkB9C,wBAAwB;MACtBT,eAAe,EAAEH,QAAQ,CAACU;IADJ;EAlBsB,CAAhD;;EAsBA,IAAIV,QAAQ,CAACa,SAAb,EAAwB;IACtBX,YAAY,CACV,yHADU,CAAZ,GAEI;MACFC,eAAe,EAAEH,QAAQ,CAACa;IADxB,CAFJ;EAKD;;EACD,IAAIb,QAAQ,CAACc,cAAb,EAA6B;IAC3BZ,YAAY,CAAC,sBAAD,CAAZ,GAAuC;MACrCC,eAAe,EAAEH,QAAQ,CAACc;IADW,CAAvC;EAGD;;EACD,IAAMC,cAAc,GAAGpB,UAAU,CAACI,KAAX,CAAiBG,YAAjB,EAA+B;IACpDc,IAAI,EAAEjB,KAAK,KAAK;EADoC,CAA/B,CAAvB;EAIA,IAAMkB,cAAc,GAAGrB,cAAc,CAACsB,MAAf,CAAsBjB,MAAtB,CAAvB;EACA,IAAMkB,SAAS,GAAG,CAACJ,cAAD,EAAiBlB,kBAAkB,CAACoB,cAAD,CAAnC,CAAlB;EAEA,OAAOE,SAAP;AACD,CA3CM;AA6CP,eAAerB,WAAf"
 }

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@uiw/codemirror-themes",
-  "version": "4.9.1",
+  "version": "4.9.4",
   "description": "Themes for CodeMirror.",
-  "homepage": "https://uiwjs.github.io/react-codemirror",
+  "homepage": "https://uiwjs.github.io/react-codemirror/#/theme/doc",
   "author": "kenny wong <wowohoo@qq.com>",
   "license": "MIT",
   "main": "./cjs/index.js",

package/src/index.tsx

@@ -1,12 +1,13 @@
 import { EditorView } from '@codemirror/view';
 import { Extension } from '@codemirror/state';
 import { HighlightStyle, TagStyle, syntaxHighlighting } from '@codemirror/language';
+import { StyleSpec } from 'style-mod';
 
 export interface CreateThemeOptions {
   /**
    * Theme inheritance. Determines which styles CodeMirror will apply by default.
    */
-  dark: Theme;
+  theme: Theme;
   /**
    * Settings to customize the look of the editor, like background, gutter, selection and others.
    */
@@ -26,6 +27,8 @@ export interface Settings {
   caret: string;
   /** Selection background. */
   selection: string;
+  /** Selection match background. */
+  selectionMatch?: string;
   /** Background of highlighted lines. */
   lineHighlight: string;
   /** Gutter background. */
@@ -34,41 +37,47 @@ export interface Settings {
   gutterForeground: string;
 }
 
-export const createTheme = ({ dark, settings, styles }: CreateThemeOptions): Extension => {
-  const theme = EditorView.theme(
-    {
-      '&': {
-        backgroundColor: settings.background,
-        color: settings.foreground,
-      },
-      '.cm-content': {
-        caretColor: settings.caret,
-      },
-      '.cm-cursor, .cm-dropCursor': {
-        borderLeftColor: settings.caret,
-      },
-      '&.cm-focused .cm-selectionBackground .cm-selectionBackground, & .cm-selectionLayer .cm-selectionBackground, ::selection':
-        {
-          backgroundColor: settings.selection,
-        },
-      '.cm-activeLine': {
-        backgroundColor: settings.lineHighlight,
-      },
-      '.cm-gutters': {
-        backgroundColor: settings.gutterBackground,
-        color: settings.gutterForeground,
-      },
-      '.cm-activeLineGutter': {
-        backgroundColor: settings.lineHighlight,
-      },
+export const createTheme = ({ theme, settings, styles }: CreateThemeOptions): Extension => {
+  const themeOptions: Record<string, StyleSpec> = {
+    '&': {
+      backgroundColor: settings.background,
+      color: settings.foreground,
     },
-    {
-      dark: dark === 'dark',
+    '.cm-content': {
+      caretColor: settings.caret,
     },
-  );
+    '.cm-cursor, .cm-dropCursor': {
+      borderLeftColor: settings.caret,
+    },
+    '.cm-activeLine': {
+      backgroundColor: settings.lineHighlight,
+    },
+    '.cm-gutters': {
+      backgroundColor: settings.gutterBackground,
+      color: settings.gutterForeground,
+    },
+    '.cm-activeLineGutter': {
+      backgroundColor: settings.lineHighlight,
+    },
+  };
+  if (settings.selection) {
+    themeOptions[
+      '&.cm-focused .cm-selectionBackground .cm-selectionBackground, & .cm-selectionLayer .cm-selectionBackground, ::selection'
+    ] = {
+      backgroundColor: settings.selection,
+    };
+  }
+  if (settings.selectionMatch) {
+    themeOptions['& .cm-selectionMatch'] = {
+      backgroundColor: settings.selectionMatch,
+    };
+  }
+  const themeExtension = EditorView.theme(themeOptions, {
+    dark: theme === 'dark',
+  });
 
   const highlightStyle = HighlightStyle.define(styles);
-  const extension = [theme, syntaxHighlighting(highlightStyle)];
+  const extension = [themeExtension, syntaxHighlighting(highlightStyle)];
 
   return extension;
 };