@uiw/codemirror-themes 4.8.1 → 4.9.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/README.md +38 -36
  2. package/cjs/index.d.ts +2 -2
  3. package/cjs/index.js +7 -7
  4. package/cjs/index.js.map +5 -4
  5. package/esm/index.d.ts +2 -2
  6. package/esm/index.js +6 -8
  7. package/esm/index.js.map +5 -4
  8. package/package.json +4 -7
  9. package/src/index.tsx +9 -8
package/README.md CHANGED
@@ -1,4 +1,6 @@
1
- # Codemirror Themes
1
+ # Custom Codemirror Themes
2
+
3
+ [![npm version](https://img.shields.io/npm/v/@uiw/codemirror-themes.svg)](https://www.npmjs.com/package/@uiw/codemirror-themes)
2
4
 
3
5
  Themes for CodeMirror.
4
6
 
@@ -18,7 +20,7 @@ import { javascript } from '@codemirror/lang-javascript';
18
20
  import { tags as t } from '@lezer/highlight';
19
21
 
20
22
  const myTheme = createTheme({
21
- variant: 'light',
23
+ theme: 'light',
22
24
  settings: {
23
25
  background: '#ffffff',
24
26
  foreground: '#75baff',
@@ -29,31 +31,31 @@ const myTheme = createTheme({
29
31
  gutterForeground: '#8a919966',
30
32
  },
31
33
  styles: [
32
- { tag: t.comment, color: '#787b8099', },
33
- { tag: t.variableName, color: '#0080ff', },
34
- { tag: [t.string, t.special(t.brace)], color: '#5c6166', },
35
- { tag: t.number, color: '#5c6166', },
36
- { tag: t.bool, color: '#5c6166', },
37
- { tag: t.null, color: '#5c6166', },
38
- { tag: t.keyword, color: '#5c6166', },
39
- { tag: t.operator, color: '#5c6166', },
40
- { tag: t.className, color: '#5c6166', },
41
- { tag: t.definition(t.typeName), color: '#5c6166', },
42
- { tag: t.typeName, color: '#5c6166', },
43
- { tag: t.angleBracket, color: '#5c6166', },
44
- { tag: t.tagName, color: '#5c6166', },
45
- { tag: t.attributeName, color: '#5c6166', },
34
+ { tag: t.comment, color: '#787b8099' },
35
+ { tag: t.variableName, color: '#0080ff' },
36
+ { tag: [t.string, t.special(t.brace)], color: '#5c6166' },
37
+ { tag: t.number, color: '#5c6166' },
38
+ { tag: t.bool, color: '#5c6166' },
39
+ { tag: t.null, color: '#5c6166' },
40
+ { tag: t.keyword, color: '#5c6166' },
41
+ { tag: t.operator, color: '#5c6166' },
42
+ { tag: t.className, color: '#5c6166' },
43
+ { tag: t.definition(t.typeName), color: '#5c6166' },
44
+ { tag: t.typeName, color: '#5c6166' },
45
+ { tag: t.angleBracket, color: '#5c6166' },
46
+ { tag: t.tagName, color: '#5c6166' },
47
+ { tag: t.attributeName, color: '#5c6166' },
46
48
  ],
47
49
  });
48
50
 
49
51
  const state = EditorState.create({
50
- doc: 'my source code',
51
- extensions: [myTheme, javascript({ jsx: true })],
52
+ doc: 'my source code',
53
+ extensions: [myTheme, javascript({ jsx: true })],
52
54
  });
53
55
 
54
56
  const view = new EditorView({
55
- parent: document.querySelector('#editor'),
56
- state,
57
+ parent: document.querySelector('#editor'),
58
+ state,
57
59
  });
58
60
  ```
59
61
 
@@ -64,7 +66,7 @@ import { javascript } from '@codemirror/lang-javascript';
64
66
  import { tags as t } from '@lezer/highlight';
65
67
 
66
68
  const myTheme = createTheme({
67
- variant: 'light',
69
+ theme: 'light',
68
70
  settings: {
69
71
  background: '#ffffff',
70
72
  foreground: '#75baff',
@@ -75,20 +77,20 @@ const myTheme = createTheme({
75
77
  gutterForeground: '#8a919966',
76
78
  },
77
79
  styles: [
78
- { tag: t.comment, color: '#787b8099', },
79
- { tag: t.variableName, color: '#0080ff', },
80
- { tag: [t.string, t.special(t.brace)], color: '#5c6166', },
81
- { tag: t.number, color: '#5c6166', },
82
- { tag: t.bool, color: '#5c6166', },
83
- { tag: t.null, color: '#5c6166', },
84
- { tag: t.keyword, color: '#5c6166', },
85
- { tag: t.operator, color: '#5c6166', },
86
- { tag: t.className, color: '#5c6166', },
87
- { tag: t.definition(t.typeName), color: '#5c6166', },
88
- { tag: t.typeName, color: '#5c6166', },
89
- { tag: t.angleBracket, color: '#5c6166', },
90
- { tag: t.tagName, color: '#5c6166', },
91
- { tag: t.attributeName, color: '#5c6166', },
80
+ { tag: t.comment, color: '#787b8099' },
81
+ { tag: t.variableName, color: '#0080ff' },
82
+ { tag: [t.string, t.special(t.brace)], color: '#5c6166' },
83
+ { tag: t.number, color: '#5c6166' },
84
+ { tag: t.bool, color: '#5c6166' },
85
+ { tag: t.null, color: '#5c6166' },
86
+ { tag: t.keyword, color: '#5c6166' },
87
+ { tag: t.operator, color: '#5c6166' },
88
+ { tag: t.className, color: '#5c6166' },
89
+ { tag: t.definition(t.typeName), color: '#5c6166' },
90
+ { tag: t.typeName, color: '#5c6166' },
91
+ { tag: t.angleBracket, color: '#5c6166' },
92
+ { tag: t.tagName, color: '#5c6166' },
93
+ { tag: t.attributeName, color: '#5c6166' },
92
94
  ],
93
95
  });
94
96
 
@@ -117,7 +119,7 @@ export interface CreateThemeOptions {
117
119
  /**
118
120
  * Theme inheritance. Determines which styles CodeMirror will apply by default.
119
121
  */
120
- dark: Theme;
122
+ theme: Theme;
121
123
  /**
122
124
  * Settings to customize the look of the editor, like background, gutter, selection and others.
123
125
  */
package/cjs/index.d.ts CHANGED
@@ -4,7 +4,7 @@ export interface CreateThemeOptions {
4
4
  /**
5
5
  * Theme inheritance. Determines which styles CodeMirror will apply by default.
6
6
  */
7
- dark: Theme;
7
+ theme: Theme;
8
8
  /**
9
9
  * Settings to customize the look of the editor, like background, gutter, selection and others.
10
10
  */
@@ -29,5 +29,5 @@ export interface Settings {
29
29
  /** Text color inside gutter. */
30
30
  gutterForeground: string;
31
31
  }
32
- declare const createTheme: ({ dark, settings, styles }: CreateThemeOptions) => Extension;
32
+ export declare const createTheme: ({ theme, settings, styles }: CreateThemeOptions) => Extension;
33
33
  export default createTheme;
package/cjs/index.js CHANGED
@@ -3,18 +3,18 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports["default"] = void 0;
6
+ exports["default"] = exports.createTheme = void 0;
7
7
 
8
8
  var _view = require("@codemirror/view");
9
9
 
10
10
  var _language = require("@codemirror/language");
11
11
 
12
12
  var createTheme = function createTheme(_ref) {
13
- var dark = _ref.dark,
13
+ var theme = _ref.theme,
14
14
  settings = _ref.settings,
15
15
  styles = _ref.styles;
16
16
 
17
- var theme = _view.EditorView.theme({
17
+ var themeExtension = _view.EditorView.theme({
18
18
  '&': {
19
19
  backgroundColor: settings.background,
20
20
  color: settings.foreground
@@ -25,7 +25,7 @@ var createTheme = function createTheme(_ref) {
25
25
  '.cm-cursor, .cm-dropCursor': {
26
26
  borderLeftColor: settings.caret
27
27
  },
28
- '&.cm-focused .cm-selectionBackgroundm .cm-selectionBackground, .cm-content ::selection': {
28
+ '&.cm-focused .cm-selectionBackground .cm-selectionBackground, & .cm-selectionLayer .cm-selectionBackground, ::selection': {
29
29
  backgroundColor: settings.selection
30
30
  },
31
31
  '.cm-activeLine': {
@@ -39,16 +39,16 @@ var createTheme = function createTheme(_ref) {
39
39
  backgroundColor: settings.lineHighlight
40
40
  }
41
41
  }, {
42
- dark: dark === 'dark'
42
+ dark: theme === 'dark'
43
43
  });
44
44
 
45
45
  var highlightStyle = _language.HighlightStyle.define(styles);
46
46
 
47
- var extension = [theme, (0, _language.syntaxHighlighting)(highlightStyle)];
47
+ var extension = [themeExtension, (0, _language.syntaxHighlighting)(highlightStyle)];
48
48
  return extension;
49
49
  };
50
50
 
51
+ exports.createTheme = createTheme;
51
52
  var _default = createTheme;
52
53
  exports["default"] = _default;
53
- module.exports = exports.default;
54
54
  //# sourceMappingURL=index.js.map
package/cjs/index.js.map CHANGED
@@ -2,10 +2,10 @@
2
2
  "version": 3,
3
3
  "names": [
4
4
  "createTheme",
5
- "dark",
5
+ "theme",
6
6
  "settings",
7
7
  "styles",
8
- "theme",
8
+ "themeExtension",
9
9
  "EditorView",
10
10
  "backgroundColor",
11
11
  "background",
@@ -18,6 +18,7 @@
18
18
  "lineHighlight",
19
19
  "gutterBackground",
20
20
  "gutterForeground",
21
+ "dark",
21
22
  "highlightStyle",
22
23
  "HighlightStyle",
23
24
  "define",
@@ -28,7 +29,7 @@
28
29
  "../src/index.tsx"
29
30
  ],
30
31
  "sourcesContent": [
31
- "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\nconst 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"
32
+ "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"
32
33
  ],
33
- "mappings": ";;;;;;;AAAA;;AAEA;;AAkCA,IAAMA,WAAW,GAAG,SAAdA,WAAc,OAA+D;EAAA,IAA5DC,IAA4D,QAA5DA,IAA4D;EAAA,IAAtDC,QAAsD,QAAtDA,QAAsD;EAAA,IAA5CC,MAA4C,QAA5CA,MAA4C;;EACjF,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,CApCD;;eAsCepB,W"
34
+ "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"
34
35
  }
package/esm/index.d.ts CHANGED
@@ -4,7 +4,7 @@ export interface CreateThemeOptions {
4
4
  /**
5
5
  * Theme inheritance. Determines which styles CodeMirror will apply by default.
6
6
  */
7
- dark: Theme;
7
+ theme: Theme;
8
8
  /**
9
9
  * Settings to customize the look of the editor, like background, gutter, selection and others.
10
10
  */
@@ -29,5 +29,5 @@ export interface Settings {
29
29
  /** Text color inside gutter. */
30
30
  gutterForeground: string;
31
31
  }
32
- declare const createTheme: ({ dark, settings, styles }: CreateThemeOptions) => Extension;
32
+ export declare const createTheme: ({ theme, settings, styles }: CreateThemeOptions) => Extension;
33
33
  export default createTheme;
package/esm/index.js CHANGED
@@ -1,13 +1,12 @@
1
1
  import { EditorView } from '@codemirror/view';
2
2
  import { HighlightStyle, syntaxHighlighting } from '@codemirror/language';
3
-
4
- var createTheme = _ref => {
3
+ export var createTheme = _ref => {
5
4
  var {
6
- dark,
5
+ theme,
7
6
  settings,
8
7
  styles
9
8
  } = _ref;
10
- var theme = EditorView.theme({
9
+ var themeExtension = EditorView.theme({
11
10
  '&': {
12
11
  backgroundColor: settings.background,
13
12
  color: settings.foreground
@@ -18,7 +17,7 @@ var createTheme = _ref => {
18
17
  '.cm-cursor, .cm-dropCursor': {
19
18
  borderLeftColor: settings.caret
20
19
  },
21
- '&.cm-focused .cm-selectionBackgroundm .cm-selectionBackground, .cm-content ::selection': {
20
+ '&.cm-focused .cm-selectionBackground .cm-selectionBackground, & .cm-selectionLayer .cm-selectionBackground, ::selection': {
22
21
  backgroundColor: settings.selection
23
22
  },
24
23
  '.cm-activeLine': {
@@ -32,12 +31,11 @@ var createTheme = _ref => {
32
31
  backgroundColor: settings.lineHighlight
33
32
  }
34
33
  }, {
35
- dark: dark === 'dark'
34
+ dark: theme === 'dark'
36
35
  });
37
36
  var highlightStyle = HighlightStyle.define(styles);
38
- var extension = [theme, syntaxHighlighting(highlightStyle)];
37
+ var extension = [themeExtension, syntaxHighlighting(highlightStyle)];
39
38
  return extension;
40
39
  };
41
-
42
40
  export default createTheme;
43
41
  //# sourceMappingURL=index.js.map
package/esm/index.js.map CHANGED
@@ -5,10 +5,10 @@
5
5
  "HighlightStyle",
6
6
  "syntaxHighlighting",
7
7
  "createTheme",
8
- "dark",
8
+ "theme",
9
9
  "settings",
10
10
  "styles",
11
- "theme",
11
+ "themeExtension",
12
12
  "backgroundColor",
13
13
  "background",
14
14
  "color",
@@ -20,6 +20,7 @@
20
20
  "lineHighlight",
21
21
  "gutterBackground",
22
22
  "gutterForeground",
23
+ "dark",
23
24
  "highlightStyle",
24
25
  "define",
25
26
  "extension"
@@ -28,7 +29,7 @@
28
29
  "../src/index.tsx"
29
30
  ],
30
31
  "sourcesContent": [
31
- "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\nconst 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"
32
+ "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"
32
33
  ],
33
- "mappings": "AAAA,SAASA,UAAT,QAA2B,kBAA3B;AAEA,SAASC,cAAT,EAAmCC,kBAAnC,QAA6D,sBAA7D;;AAkCA,IAAMC,WAAW,GAAG,QAA+D;EAAA,IAA9D;IAAEC,IAAF;IAAQC,QAAR;IAAkBC;EAAlB,CAA8D;EACjF,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,CApCD;;AAsCA,eAAelB,WAAf"
34
+ "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"
34
35
  }
package/package.json CHANGED
@@ -1,8 +1,8 @@
1
1
  {
2
2
  "name": "@uiw/codemirror-themes",
3
- "version": "4.8.1",
3
+ "version": "4.9.2",
4
4
  "description": "Themes for CodeMirror.",
5
- "homepage": "https://uiwjs.github.io/react-codemirror",
5
+ "homepage": "https://uiwjs.github.io/react-codemirror/#/theme/doc",
6
6
  "author": "kenny wong <wowohoo@qq.com>",
7
7
  "license": "MIT",
8
8
  "main": "./cjs/index.js",
@@ -20,13 +20,10 @@
20
20
  "esm",
21
21
  "cjs"
22
22
  ],
23
- "peerDependencies": {
24
- "@babel/runtime": ">=7.11.0"
25
- },
26
23
  "dependencies": {
27
24
  "@codemirror/language": "^6.0.0",
28
- "@codemirror/view": "^6.0.0",
29
- "@codemirror/state": "^6.0.0"
25
+ "@codemirror/state": "^6.0.0",
26
+ "@codemirror/view": "^6.0.0"
30
27
  },
31
28
  "keywords": [
32
29
  "codemirror",
package/src/index.tsx CHANGED
@@ -6,7 +6,7 @@ export interface CreateThemeOptions {
6
6
  /**
7
7
  * Theme inheritance. Determines which styles CodeMirror will apply by default.
8
8
  */
9
- dark: Theme;
9
+ theme: Theme;
10
10
  /**
11
11
  * Settings to customize the look of the editor, like background, gutter, selection and others.
12
12
  */
@@ -34,8 +34,8 @@ export interface Settings {
34
34
  gutterForeground: string;
35
35
  }
36
36
 
37
- const createTheme = ({ dark, settings, styles }: CreateThemeOptions): Extension => {
38
- const theme = EditorView.theme(
37
+ export const createTheme = ({ theme, settings, styles }: CreateThemeOptions): Extension => {
38
+ const themeExtension = EditorView.theme(
39
39
  {
40
40
  '&': {
41
41
  backgroundColor: settings.background,
@@ -47,9 +47,10 @@ const createTheme = ({ dark, settings, styles }: CreateThemeOptions): Extension
47
47
  '.cm-cursor, .cm-dropCursor': {
48
48
  borderLeftColor: settings.caret,
49
49
  },
50
- '&.cm-focused .cm-selectionBackgroundm .cm-selectionBackground, .cm-content ::selection': {
51
- backgroundColor: settings.selection,
52
- },
50
+ '&.cm-focused .cm-selectionBackground .cm-selectionBackground, & .cm-selectionLayer .cm-selectionBackground, ::selection':
51
+ {
52
+ backgroundColor: settings.selection,
53
+ },
53
54
  '.cm-activeLine': {
54
55
  backgroundColor: settings.lineHighlight,
55
56
  },
@@ -62,12 +63,12 @@ const createTheme = ({ dark, settings, styles }: CreateThemeOptions): Extension
62
63
  },
63
64
  },
64
65
  {
65
- dark: dark === 'dark',
66
+ dark: theme === 'dark',
66
67
  },
67
68
  );
68
69
 
69
70
  const highlightStyle = HighlightStyle.define(styles);
70
- const extension = [theme, syntaxHighlighting(highlightStyle)];
71
+ const extension = [themeExtension, syntaxHighlighting(highlightStyle)];
71
72
 
72
73
  return extension;
73
74
  };