@uiw/codemirror-themes 4.9.0 → 4.9.3

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.
      */
@@ -29,5 +29,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,11 @@ 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 themeExtension = _view.EditorView.theme({
     '&': {
       backgroundColor: settings.background,
       color: settings.foreground
@@ -25,7 +25,7 @@ var createTheme = function createTheme(_ref) {
     '.cm-cursor, .cm-dropCursor': {
       borderLeftColor: settings.caret
     },
-    '&.cm-focused .cm-selectionBackgroundm .cm-selectionBackground, .cm-content ::selection': {
+    '&.cm-focused .cm-selectionBackground .cm-selectionBackground, & .cm-selectionLayer .cm-selectionBackground, ::selection': {
       backgroundColor: settings.selection
     },
     '.cm-activeLine': {
@@ -39,12 +39,12 @@ var createTheme = function createTheme(_ref) {
       backgroundColor: settings.lineHighlight
     }
   }, {
-    dark: dark === 'dark'
+    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,10 +2,10 @@
   "version": 3,
   "names": [
     "createTheme",
-    "dark",
+    "theme",
     "settings",
     "styles",
-    "theme",
+    "themeExtension",
     "EditorView",
     "backgroundColor",
     "background",
@@ -18,6 +18,7 @@
     "lineHighlight",
     "gutterBackground",
     "gutterForeground",
+    "dark",
     "highlightStyle",
     "HighlightStyle",
     "define",
@@ -28,7 +29,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-selectionBackgroundm .cm-selectionBackground, .cm-content ::selection': {\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';\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"
   ],
-  "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,0FAA0F;MACxFL,eAAe,EAAEJ,QAAQ,CAACW;IAD8D,CAX5F;IAcE,kBAAkB;MAChBP,eAAe,EAAEJ,QAAQ,CAACY;IADV,CAdpB;IAiBE,eAAe;MACbR,eAAe,EAAEJ,QAAQ,CAACa,gBADb;MAEbP,KAAK,EAAEN,QAAQ,CAACc;IAFH,CAjBjB;IAqBE,wBAAwB;MACtBV,eAAe,EAAEJ,QAAQ,CAACY;IADJ;EArB1B,CADY,EA0BZ;IACEb,IAAI,EAAEA,IAAI,KAAK;EADjB,CA1BY,CAAd;;EA+BA,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,CApCM;;;eAsCQpB,W"
+  "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"
 }

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.
      */
@@ -29,5 +29,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 themeExtension = EditorView.theme({
     '&': {
       backgroundColor: settings.background,
       color: settings.foreground
@@ -17,7 +17,7 @@ export var createTheme = _ref => {
     '.cm-cursor, .cm-dropCursor': {
       borderLeftColor: settings.caret
     },
-    '&.cm-focused .cm-selectionBackgroundm .cm-selectionBackground, .cm-content ::selection': {
+    '&.cm-focused .cm-selectionBackground .cm-selectionBackground, & .cm-selectionLayer .cm-selectionBackground, ::selection': {
       backgroundColor: settings.selection
     },
     '.cm-activeLine': {
@@ -31,10 +31,10 @@ export var createTheme = _ref => {
       backgroundColor: settings.lineHighlight
     }
   }, {
-    dark: dark === 'dark'
+    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",
+    "themeExtension",
     "backgroundColor",
     "background",
     "color",
@@ -20,6 +20,7 @@
     "lineHighlight",
     "gutterBackground",
     "gutterForeground",
+    "dark",
     "highlightStyle",
     "define",
     "extension"
@@ -28,7 +29,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-selectionBackgroundm .cm-selectionBackground, .cm-content ::selection': {\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';\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"
   ],
-  "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,0FAA0F;MACxFL,eAAe,EAAEH,QAAQ,CAACU;IAD8D,CAX5F;IAcE,kBAAkB;MAChBP,eAAe,EAAEH,QAAQ,CAACW;IADV,CAdpB;IAiBE,eAAe;MACbR,eAAe,EAAEH,QAAQ,CAACY,gBADb;MAEbP,KAAK,EAAEL,QAAQ,CAACa;IAFH,CAjBjB;IAqBE,wBAAwB;MACtBV,eAAe,EAAEH,QAAQ,CAACW;IADJ;EArB1B,CADY,EA0BZ;IACEZ,IAAI,EAAEA,IAAI,KAAK;EADjB,CA1BY,CAAd;EA+BA,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,CApCM;AAsCP,eAAelB,WAAf"
+  "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"
 }

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@uiw/codemirror-themes",
-  "version": "4.9.0",
+  "version": "4.9.3",
   "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

@@ -6,7 +6,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.
    */
@@ -34,8 +34,8 @@ export interface Settings {
   gutterForeground: string;
 }
 
-export const createTheme = ({ dark, settings, styles }: CreateThemeOptions): Extension => {
-  const theme = EditorView.theme(
+export const createTheme = ({ theme, settings, styles }: CreateThemeOptions): Extension => {
+  const themeExtension = EditorView.theme(
     {
       '&': {
         backgroundColor: settings.background,
@@ -47,9 +47,10 @@ export const createTheme = ({ dark, settings, styles }: CreateThemeOptions): Ext
       '.cm-cursor, .cm-dropCursor': {
         borderLeftColor: settings.caret,
       },
-      '&.cm-focused .cm-selectionBackgroundm .cm-selectionBackground, .cm-content ::selection': {
-        backgroundColor: settings.selection,
-      },
+      '&.cm-focused .cm-selectionBackground .cm-selectionBackground, & .cm-selectionLayer .cm-selectionBackground, ::selection':
+        {
+          backgroundColor: settings.selection,
+        },
       '.cm-activeLine': {
         backgroundColor: settings.lineHighlight,
       },
@@ -62,12 +63,12 @@ export const createTheme = ({ dark, settings, styles }: CreateThemeOptions): Ext
       },
     },
     {
-      dark: dark === 'dark',
+      dark: theme === 'dark',
     },
   );
 
   const highlightStyle = HighlightStyle.define(styles);
-  const extension = [theme, syntaxHighlighting(highlightStyle)];
+  const extension = [themeExtension, syntaxHighlighting(highlightStyle)];
 
   return extension;
 };