@uiw/codemirror-themes 4.10.2 → 4.11.0

package/README.md

@@ -141,11 +141,11 @@ export default App;
 **duotone**
 
 <a href="https://uiwjs.github.io/react-codemirror/#/theme/data/duotone/dark">
-  <img width="436" alt="codemirror-theme-duotone" src="https://user-images.githubusercontent.com/1680273/176572959-adfc1284-4c70-48df-8aeb-9a47ff76b2f2.png">
+  <img width="436" alt="codemirror-theme-duotone dark" src="https://user-images.githubusercontent.com/1680273/176572959-adfc1284-4c70-48df-8aeb-9a47ff76b2f2.png">
 </a>
 
 <a href="https://uiwjs.github.io/react-codemirror/#/theme/data/duotone/light">
-  <img width="436" alt="codemirror-theme-duotone" src="https://user-images.githubusercontent.com/1680273/176573139-5c22ed62-6000-40da-b080-59c83e6181e2.png">
+  <img width="436" alt="codemirror-theme-duotone light" src="https://user-images.githubusercontent.com/1680273/176573139-5c22ed62-6000-40da-b080-59c83e6181e2.png">
 </a>
 
 **eclipse**
@@ -154,6 +154,16 @@ export default App;
   <img width="436" alt="codemirror-theme-eclipse" src="https://user-images.githubusercontent.com/1680273/176572785-4f56f11a-018b-4f86-9088-e6f71f745cfb.png">
 </a>
 
+**github**
+
+<a href="https://uiwjs.github.io/react-codemirror/#/theme/data/github/dark">
+  <img width="436" alt="codemirror-theme-github dark" src="https://user-images.githubusercontent.com/1680273/177048035-644af599-aaf1-41d8-86ea-9ea8c3a1a0c5.png">
+</a>
+
+<a href="https://uiwjs.github.io/react-codemirror/#/theme/data/github/light">
+  <img width="436" alt="codemirror-theme-github light" src="https://user-images.githubusercontent.com/1680273/177048005-32794f23-8bff-4059-babf-21316d886e65.png">
+</a>
+
 **okaidia**
 
 <a href="https://uiwjs.github.io/react-codemirror/#/theme/data/okaidia">
@@ -166,6 +176,22 @@ export default App;
   <img width="436" alt="codemirror-theme-sublime" src="https://user-images.githubusercontent.com/1680273/176572314-cc296f81-0763-485c-8fa2-7d61b24ad09b.png">
 </a>
 
+**xcode**
+
+<a href="https://uiwjs.github.io/react-codemirror/#/theme/data/xcode/dark">
+  <img width="436" alt="codemirror-theme-xcode dark" src="https://user-images.githubusercontent.com/1680273/177074703-4c5c6be0-e287-45ac-b6cc-db1568276e73.png">
+</a>
+
+<a href="https://uiwjs.github.io/react-codemirror/#/theme/data/xcode/light">
+  <img width="436" alt="codemirror-theme-xcode light" src="https://user-images.githubusercontent.com/1680273/177077462-2046096f-a31c-4dee-b9bb-2fcaaa87a844.png">
+</a>
+
+**android studio**
+
+<a href="https://uiwjs.github.io/react-codemirror/#/theme/data/xcode/light">
+  <img width="436" alt="codemirror-theme-androidstudio" src="https://user-images.githubusercontent.com/1680273/177484354-0a4fa43e-de96-409f-83e2-61808f2347e6.png">
+</a>
+
 ## Props
 
 ```ts
@@ -203,6 +229,8 @@ export interface Settings {
   gutterBackground: string;
   /** Text color inside gutter. */
   gutterForeground: string;
+  /** Gutter right border color. */
+  gutterBorder: string;
 }
 declare const createTheme: ({ dark, settings, styles }: CreateThemeOptions) => Extension;
 export default createTheme;

package/cjs/index.d.ts

@@ -19,17 +19,19 @@ export interface Settings {
     /** Default text color. */
     foreground: string;
     /** Caret color. */
-    caret: string;
+    caret?: string;
     /** Selection background. */
-    selection: string;
+    selection?: string;
     /** Selection match background. */
     selectionMatch?: string;
     /** Background of highlighted lines. */
-    lineHighlight: string;
+    lineHighlight?: string;
     /** Gutter background. */
-    gutterBackground: string;
+    gutterBackground?: string;
     /** Text color inside gutter. */
-    gutterForeground: string;
+    gutterForeground?: string;
+    /** Gutter right border color. */
+    gutterBorder?: string;
 }
 export declare const createTheme: ({ theme, settings, styles }: CreateThemeOptions) => Extension;
 export default createTheme;

package/cjs/index.js

@@ -18,23 +18,38 @@ var createTheme = function createTheme(_ref) {
       backgroundColor: settings.background,
       color: settings.foreground
     },
-    '.cm-content': {
+    '.cm-gutters': {}
+  };
+
+  if (settings.gutterBackground) {
+    themeOptions['.cm-gutters'].backgroundColor = settings.gutterBackground;
+  }
+
+  if (settings.gutterForeground) {
+    themeOptions['.cm-gutters'].color = settings.gutterForeground;
+  }
+
+  if (settings.gutterBorder) {
+    themeOptions['.cm-gutters'].borderRightColor = settings.gutterBorder;
+  }
+
+  if (settings.caret) {
+    themeOptions['.cm-content'] = {
       caretColor: settings.caret
-    },
-    '.cm-cursor, .cm-dropCursor': {
+    };
+    themeOptions['.cm-cursor, .cm-dropCursor'] = {
       borderLeftColor: settings.caret
-    },
-    '.cm-activeLine': {
+    };
+  }
+
+  if (settings.lineHighlight) {
+    themeOptions['.cm-activeLine'] = {
       backgroundColor: settings.lineHighlight
-    },
-    '.cm-gutters': {
-      backgroundColor: settings.gutterBackground,
-      color: settings.gutterForeground
-    },
-    '.cm-activeLineGutter': {
+    };
+    themeOptions['.cm-activeLineGutter'] = {
       backgroundColor: settings.lineHighlight
-    }
-  };
+    };
+  }
 
   if (settings.selection) {
     themeOptions['&.cm-focused .cm-selectionBackground .cm-selectionBackground, & .cm-selectionLayer .cm-selectionBackground, ::selection'] = {

package/cjs/index.js.map

@@ -10,12 +10,14 @@
     "background",
     "color",
     "foreground",
-    "caretColor",
+    "gutterBackground",
+    "gutterForeground",
+    "gutterBorder",
+    "borderRightColor",
     "caret",
+    "caretColor",
     "borderLeftColor",
     "lineHighlight",
-    "gutterBackground",
-    "gutterForeground",
     "selection",
     "selectionMatch",
     "themeExtension",
@@ -31,7 +33,7 @@
     "../src/index.tsx"
   ],
   "sourcesContent": [
-    "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"
+    "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  /** Gutter right border color. */\n  gutterBorder?: 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-gutters': {},\n  };\n\n  if (settings.gutterBackground) {\n    themeOptions['.cm-gutters'].backgroundColor = settings.gutterBackground;\n  }\n  if (settings.gutterForeground) {\n    themeOptions['.cm-gutters'].color = settings.gutterForeground;\n  }\n  if (settings.gutterBorder) {\n    themeOptions['.cm-gutters'].borderRightColor = settings.gutterBorder;\n  }\n\n  if (settings.caret) {\n    themeOptions['.cm-content'] = {\n      caretColor: settings.caret,\n    };\n    themeOptions['.cm-cursor, .cm-dropCursor'] = {\n      borderLeftColor: settings.caret,\n    };\n  }\n\n  if (settings.lineHighlight) {\n    themeOptions['.cm-activeLine'] = {\n      backgroundColor: settings.lineHighlight,\n    };\n    themeOptions['.cm-activeLineGutter'] = {\n      backgroundColor: settings.lineHighlight,\n    };\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;;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"
+  "mappings": ";;;;;;;AAAA;;AAEA;;AAuCO,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;EAL+B,CAAhD;;EAQA,IAAIN,QAAQ,CAACO,gBAAb,EAA+B;IAC7BL,YAAY,CAAC,aAAD,CAAZ,CAA4BC,eAA5B,GAA8CH,QAAQ,CAACO,gBAAvD;EACD;;EACD,IAAIP,QAAQ,CAACQ,gBAAb,EAA+B;IAC7BN,YAAY,CAAC,aAAD,CAAZ,CAA4BG,KAA5B,GAAoCL,QAAQ,CAACQ,gBAA7C;EACD;;EACD,IAAIR,QAAQ,CAACS,YAAb,EAA2B;IACzBP,YAAY,CAAC,aAAD,CAAZ,CAA4BQ,gBAA5B,GAA+CV,QAAQ,CAACS,YAAxD;EACD;;EAED,IAAIT,QAAQ,CAACW,KAAb,EAAoB;IAClBT,YAAY,CAAC,aAAD,CAAZ,GAA8B;MAC5BU,UAAU,EAAEZ,QAAQ,CAACW;IADO,CAA9B;IAGAT,YAAY,CAAC,4BAAD,CAAZ,GAA6C;MAC3CW,eAAe,EAAEb,QAAQ,CAACW;IADiB,CAA7C;EAGD;;EAED,IAAIX,QAAQ,CAACc,aAAb,EAA4B;IAC1BZ,YAAY,CAAC,gBAAD,CAAZ,GAAiC;MAC/BC,eAAe,EAAEH,QAAQ,CAACc;IADK,CAAjC;IAGAZ,YAAY,CAAC,sBAAD,CAAZ,GAAuC;MACrCC,eAAe,EAAEH,QAAQ,CAACc;IADW,CAAvC;EAGD;;EAED,IAAId,QAAQ,CAACe,SAAb,EAAwB;IACtBb,YAAY,CACV,yHADU,CAAZ,GAEI;MACFC,eAAe,EAAEH,QAAQ,CAACe;IADxB,CAFJ;EAKD;;EACD,IAAIf,QAAQ,CAACgB,cAAb,EAA6B;IAC3Bd,YAAY,CAAC,sBAAD,CAAZ,GAAuC;MACrCC,eAAe,EAAEH,QAAQ,CAACgB;IADW,CAAvC;EAGD;;EACD,IAAMC,cAAc,GAAGC,gBAAA,CAAWnB,KAAX,CAAiBG,YAAjB,EAA+B;IACpDiB,IAAI,EAAEpB,KAAK,KAAK;EADoC,CAA/B,CAAvB;;EAIA,IAAMqB,cAAc,GAAGC,wBAAA,CAAeC,MAAf,CAAsBrB,MAAtB,CAAvB;;EACA,IAAMsB,SAAS,GAAG,CAACN,cAAD,EAAiB,IAAAO,4BAAA,EAAmBJ,cAAnB,CAAjB,CAAlB;EAEA,OAAOG,SAAP;AACD,CAzDM;;;eA2DQzB,W"
 }

package/esm/index.d.ts

@@ -19,17 +19,19 @@ export interface Settings {
     /** Default text color. */
     foreground: string;
     /** Caret color. */
-    caret: string;
+    caret?: string;
     /** Selection background. */
-    selection: string;
+    selection?: string;
     /** Selection match background. */
     selectionMatch?: string;
     /** Background of highlighted lines. */
-    lineHighlight: string;
+    lineHighlight?: string;
     /** Gutter background. */
-    gutterBackground: string;
+    gutterBackground?: string;
     /** Text color inside gutter. */
-    gutterForeground: string;
+    gutterForeground?: string;
+    /** Gutter right border color. */
+    gutterBorder?: string;
 }
 export declare const createTheme: ({ theme, settings, styles }: CreateThemeOptions) => Extension;
 export default createTheme;

package/esm/index.js

@@ -11,23 +11,38 @@ export var createTheme = _ref => {
       backgroundColor: settings.background,
       color: settings.foreground
     },
-    '.cm-content': {
+    '.cm-gutters': {}
+  };
+
+  if (settings.gutterBackground) {
+    themeOptions['.cm-gutters'].backgroundColor = settings.gutterBackground;
+  }
+
+  if (settings.gutterForeground) {
+    themeOptions['.cm-gutters'].color = settings.gutterForeground;
+  }
+
+  if (settings.gutterBorder) {
+    themeOptions['.cm-gutters'].borderRightColor = settings.gutterBorder;
+  }
+
+  if (settings.caret) {
+    themeOptions['.cm-content'] = {
       caretColor: settings.caret
-    },
-    '.cm-cursor, .cm-dropCursor': {
+    };
+    themeOptions['.cm-cursor, .cm-dropCursor'] = {
       borderLeftColor: settings.caret
-    },
-    '.cm-activeLine': {
+    };
+  }
+
+  if (settings.lineHighlight) {
+    themeOptions['.cm-activeLine'] = {
       backgroundColor: settings.lineHighlight
-    },
-    '.cm-gutters': {
-      backgroundColor: settings.gutterBackground,
-      color: settings.gutterForeground
-    },
-    '.cm-activeLineGutter': {
+    };
+    themeOptions['.cm-activeLineGutter'] = {
       backgroundColor: settings.lineHighlight
-    }
-  };
+    };
+  }
 
   if (settings.selection) {
     themeOptions['&.cm-focused .cm-selectionBackground .cm-selectionBackground, & .cm-selectionLayer .cm-selectionBackground, ::selection'] = {

package/esm/index.js.map

@@ -13,12 +13,14 @@
     "background",
     "color",
     "foreground",
-    "caretColor",
+    "gutterBackground",
+    "gutterForeground",
+    "gutterBorder",
+    "borderRightColor",
     "caret",
+    "caretColor",
     "borderLeftColor",
     "lineHighlight",
-    "gutterBackground",
-    "gutterForeground",
     "selection",
     "selectionMatch",
     "themeExtension",
@@ -31,7 +33,7 @@
     "../src/index.tsx"
   ],
   "sourcesContent": [
-    "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"
+    "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  /** Gutter right border color. */\n  gutterBorder?: 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-gutters': {},\n  };\n\n  if (settings.gutterBackground) {\n    themeOptions['.cm-gutters'].backgroundColor = settings.gutterBackground;\n  }\n  if (settings.gutterForeground) {\n    themeOptions['.cm-gutters'].color = settings.gutterForeground;\n  }\n  if (settings.gutterBorder) {\n    themeOptions['.cm-gutters'].borderRightColor = settings.gutterBorder;\n  }\n\n  if (settings.caret) {\n    themeOptions['.cm-content'] = {\n      caretColor: settings.caret,\n    };\n    themeOptions['.cm-cursor, .cm-dropCursor'] = {\n      borderLeftColor: settings.caret,\n    };\n  }\n\n  if (settings.lineHighlight) {\n    themeOptions['.cm-activeLine'] = {\n      backgroundColor: settings.lineHighlight,\n    };\n    themeOptions['.cm-activeLineGutter'] = {\n      backgroundColor: settings.lineHighlight,\n    };\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;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"
+  "mappings": "AAAA,SAASA,UAAT,QAA2B,kBAA3B;AAEA,SAASC,cAAT,EAAmCC,kBAAnC,QAA6D,sBAA7D;AAuCA,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;EAL+B,CAAhD;;EAQA,IAAIN,QAAQ,CAACO,gBAAb,EAA+B;IAC7BL,YAAY,CAAC,aAAD,CAAZ,CAA4BC,eAA5B,GAA8CH,QAAQ,CAACO,gBAAvD;EACD;;EACD,IAAIP,QAAQ,CAACQ,gBAAb,EAA+B;IAC7BN,YAAY,CAAC,aAAD,CAAZ,CAA4BG,KAA5B,GAAoCL,QAAQ,CAACQ,gBAA7C;EACD;;EACD,IAAIR,QAAQ,CAACS,YAAb,EAA2B;IACzBP,YAAY,CAAC,aAAD,CAAZ,CAA4BQ,gBAA5B,GAA+CV,QAAQ,CAACS,YAAxD;EACD;;EAED,IAAIT,QAAQ,CAACW,KAAb,EAAoB;IAClBT,YAAY,CAAC,aAAD,CAAZ,GAA8B;MAC5BU,UAAU,EAAEZ,QAAQ,CAACW;IADO,CAA9B;IAGAT,YAAY,CAAC,4BAAD,CAAZ,GAA6C;MAC3CW,eAAe,EAAEb,QAAQ,CAACW;IADiB,CAA7C;EAGD;;EAED,IAAIX,QAAQ,CAACc,aAAb,EAA4B;IAC1BZ,YAAY,CAAC,gBAAD,CAAZ,GAAiC;MAC/BC,eAAe,EAAEH,QAAQ,CAACc;IADK,CAAjC;IAGAZ,YAAY,CAAC,sBAAD,CAAZ,GAAuC;MACrCC,eAAe,EAAEH,QAAQ,CAACc;IADW,CAAvC;EAGD;;EAED,IAAId,QAAQ,CAACe,SAAb,EAAwB;IACtBb,YAAY,CACV,yHADU,CAAZ,GAEI;MACFC,eAAe,EAAEH,QAAQ,CAACe;IADxB,CAFJ;EAKD;;EACD,IAAIf,QAAQ,CAACgB,cAAb,EAA6B;IAC3Bd,YAAY,CAAC,sBAAD,CAAZ,GAAuC;MACrCC,eAAe,EAAEH,QAAQ,CAACgB;IADW,CAAvC;EAGD;;EACD,IAAMC,cAAc,GAAGtB,UAAU,CAACI,KAAX,CAAiBG,YAAjB,EAA+B;IACpDgB,IAAI,EAAEnB,KAAK,KAAK;EADoC,CAA/B,CAAvB;EAIA,IAAMoB,cAAc,GAAGvB,cAAc,CAACwB,MAAf,CAAsBnB,MAAtB,CAAvB;EACA,IAAMoB,SAAS,GAAG,CAACJ,cAAD,EAAiBpB,kBAAkB,CAACsB,cAAD,CAAnC,CAAlB;EAEA,OAAOE,SAAP;AACD,CAzDM;AA2DP,eAAevB,WAAf"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uiw/codemirror-themes",
-  "version": "4.10.2",
+  "version": "4.11.0",
   "description": "Themes for CodeMirror.",
   "homepage": "https://uiwjs.github.io/react-codemirror/#/theme/doc",
   "author": "kenny wong <wowohoo@qq.com>",

package/src/index.tsx

@@ -24,17 +24,19 @@ export interface Settings {
   /** Default text color. */
   foreground: string;
   /** Caret color. */
-  caret: string;
+  caret?: string;
   /** Selection background. */
-  selection: string;
+  selection?: string;
   /** Selection match background. */
   selectionMatch?: string;
   /** Background of highlighted lines. */
-  lineHighlight: string;
+  lineHighlight?: string;
   /** Gutter background. */
-  gutterBackground: string;
+  gutterBackground?: string;
   /** Text color inside gutter. */
-  gutterForeground: string;
+  gutterForeground?: string;
+  /** Gutter right border color. */
+  gutterBorder?: string;
 }
 
 export const createTheme = ({ theme, settings, styles }: CreateThemeOptions): Extension => {
@@ -43,23 +45,37 @@ export const createTheme = ({ theme, settings, styles }: CreateThemeOptions): Ex
       backgroundColor: settings.background,
       color: settings.foreground,
     },
-    '.cm-content': {
+    '.cm-gutters': {},
+  };
+
+  if (settings.gutterBackground) {
+    themeOptions['.cm-gutters'].backgroundColor = settings.gutterBackground;
+  }
+  if (settings.gutterForeground) {
+    themeOptions['.cm-gutters'].color = settings.gutterForeground;
+  }
+  if (settings.gutterBorder) {
+    themeOptions['.cm-gutters'].borderRightColor = settings.gutterBorder;
+  }
+
+  if (settings.caret) {
+    themeOptions['.cm-content'] = {
       caretColor: settings.caret,
-    },
-    '.cm-cursor, .cm-dropCursor': {
+    };
+    themeOptions['.cm-cursor, .cm-dropCursor'] = {
       borderLeftColor: settings.caret,
-    },
-    '.cm-activeLine': {
+    };
+  }
+
+  if (settings.lineHighlight) {
+    themeOptions['.cm-activeLine'] = {
       backgroundColor: settings.lineHighlight,
-    },
-    '.cm-gutters': {
-      backgroundColor: settings.gutterBackground,
-      color: settings.gutterForeground,
-    },
-    '.cm-activeLineGutter': {
+    };
+    themeOptions['.cm-activeLineGutter'] = {
       backgroundColor: settings.lineHighlight,
-    },
-  };
+    };
+  }
+
   if (settings.selection) {
     themeOptions[
       '&.cm-focused .cm-selectionBackground .cm-selectionBackground, & .cm-selectionLayer .cm-selectionBackground, ::selection'