@uiw/codemirror-themes 4.9.3 → 4.9.4

package/cjs/index.d.ts

@@ -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. */

package/cjs/index.js

@@ -13,8 +13,7 @@ var createTheme = function createTheme(_ref) {
   var theme = _ref.theme,
       settings = _ref.settings,
       styles = _ref.styles;
-
-  var themeExtension = _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,7 +34,21 @@ var createTheme = function createTheme(_ref) {
     '.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
+    };
+  }
+
+  var themeExtension = _view.EditorView.theme(themeOptions, {
     dark: theme === 'dark'
   });
 

package/cjs/index.js.map

@@ -5,8 +5,7 @@
     "theme",
     "settings",
     "styles",
-    "themeExtension",
-    "EditorView",
+    "themeOptions",
     "backgroundColor",
     "background",
     "color",
@@ -14,10 +13,13 @@
     "caretColor",
     "caret",
     "borderLeftColor",
-    "selection",
     "lineHighlight",
     "gutterBackground",
     "gutterForeground",
+    "selection",
+    "selectionMatch",
+    "themeExtension",
+    "EditorView",
     "dark",
     "highlightStyle",
     "HighlightStyle",
@@ -29,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  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  /** 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 themeExtension = 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: theme === 'dark',\n    },\n  );\n\n  const highlightStyle = HighlightStyle.define(styles);\n  const extension = [themeExtension, 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,OAAgE;EAAA,IAA7DC,KAA6D,QAA7DA,KAA6D;EAAA,IAAtDC,QAAsD,QAAtDA,QAAsD;EAAA,IAA5CC,MAA4C,QAA5CA,MAA4C;;EACzF,IAAMC,cAAc,GAAGC,gBAAA,CAAWJ,KAAX,CACrB;IACE,KAAK;MACHK,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,CADqB,EA2BrB;IACEG,IAAI,EAAEhB,KAAK,KAAK;EADlB,CA3BqB,CAAvB;;EAgCA,IAAMiB,cAAc,GAAGC,wBAAA,CAAeC,MAAf,CAAsBjB,MAAtB,CAAvB;;EACA,IAAMkB,SAAS,GAAG,CAACjB,cAAD,EAAiB,IAAAkB,4BAAA,EAAmBJ,cAAnB,CAAjB,CAAlB;EAEA,OAAOG,SAAP;AACD,CArCM;;;eAuCQrB,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

@@ -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. */

package/esm/index.js

@@ -6,7 +6,7 @@ export var createTheme = _ref => {
     settings,
     styles
   } = _ref;
-  var themeExtension = 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,7 +27,21 @@ export var createTheme = _ref => {
     '.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
+    };
+  }
+
+  var themeExtension = EditorView.theme(themeOptions, {
     dark: theme === 'dark'
   });
   var highlightStyle = HighlightStyle.define(styles);

package/esm/index.js.map

@@ -8,7 +8,7 @@
     "theme",
     "settings",
     "styles",
-    "themeExtension",
+    "themeOptions",
     "backgroundColor",
     "background",
     "color",
@@ -16,10 +16,12 @@
     "caretColor",
     "caret",
     "borderLeftColor",
-    "selection",
     "lineHighlight",
     "gutterBackground",
     "gutterForeground",
+    "selection",
+    "selectionMatch",
+    "themeExtension",
     "dark",
     "highlightStyle",
     "define",
@@ -29,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  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  /** 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 themeExtension = 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: theme === 'dark',\n    },\n  );\n\n  const highlightStyle = HighlightStyle.define(styles);\n  const extension = [themeExtension, 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,QAAgE;EAAA,IAA/D;IAAEC,KAAF;IAASC,QAAT;IAAmBC;EAAnB,CAA+D;EACzF,IAAMC,cAAc,GAAGP,UAAU,CAACI,KAAX,CACrB;IACE,KAAK;MACHI,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,CADqB,EA2BrB;IACEG,IAAI,EAAEf,KAAK,KAAK;EADlB,CA3BqB,CAAvB;EAgCA,IAAMgB,cAAc,GAAGnB,cAAc,CAACoB,MAAf,CAAsBf,MAAtB,CAAvB;EACA,IAAMgB,SAAS,GAAG,CAACf,cAAD,EAAiBL,kBAAkB,CAACkB,cAAD,CAAnC,CAAlB;EAEA,OAAOE,SAAP;AACD,CArCM;AAuCP,eAAenB,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,6 +1,6 @@
 {
   "name": "@uiw/codemirror-themes",
-  "version": "4.9.3",
+  "version": "4.9.4",
   "description": "Themes for CodeMirror.",
   "homepage": "https://uiwjs.github.io/react-codemirror/#/theme/doc",
   "author": "kenny wong <wowohoo@qq.com>",

package/src/index.tsx

@@ -1,6 +1,7 @@
 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 {
   /**
@@ -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. */
@@ -35,37 +38,43 @@ export interface Settings {
 }
 
 export const createTheme = ({ theme, settings, styles }: CreateThemeOptions): Extension => {
-  const themeExtension = 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,
-      },
+  const themeOptions: Record<string, StyleSpec> = {
+    '&': {
+      backgroundColor: settings.background,
+      color: settings.foreground,
     },
-    {
-      dark: theme === '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 = [themeExtension, syntaxHighlighting(highlightStyle)];