@uiw/codemirror-themes 4.9.3 → 4.9.6

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 +66 -22
  2. package/cjs/index.d.ts +2 -0
  3. package/cjs/index.js +16 -6
  4. package/cjs/index.js.map +7 -5
  5. package/esm/index.d.ts +2 -0
  6. package/esm/index.js +16 -5
  7. package/esm/index.js.map +6 -4
  8. package/package.json +1 -1
  9. package/src/index.tsx +38 -29
package/README.md CHANGED
@@ -26,6 +26,7 @@ const myTheme = createTheme({
26
26
  foreground: '#75baff',
27
27
  caret: '#5d00ff',
28
28
  selection: '#036dd626',
29
+ selectionMatch: '#036dd626',
29
30
  lineHighlight: '#8a91991a',
30
31
  gutterBackground: '#fff',
31
32
  gutterForeground: '#8a919966',
@@ -72,6 +73,7 @@ const myTheme = createTheme({
72
73
  foreground: '#75baff',
73
74
  caret: '#5d00ff',
74
75
  selection: '#036dd626',
76
+ selectionMatch: '#036dd626',
75
77
  lineHighlight: '#8a91991a',
76
78
  gutterBackground: '#fff',
77
79
  gutterForeground: '#8a919966',
@@ -110,6 +112,60 @@ function App() {
110
112
  export default App;
111
113
  ```
112
114
 
115
+ ## Themes
116
+
117
+ **abcdef**
118
+
119
+ <a href="https://uiwjs.github.io/react-codemirror/#/theme/data/abcdef">
120
+ <img width="436" alt="codemirror-theme-abcdef" src="https://user-images.githubusercontent.com/1680273/176573508-705562ad-16ec-4b16-994e-f235a9331a3f.png">
121
+ </a>
122
+
123
+ **bespin**
124
+
125
+ <a href="https://uiwjs.github.io/react-codemirror/#/theme/data/bespin">
126
+ <img width="436" alt="codemirror-theme-bespin" src="https://user-images.githubusercontent.com/1680273/176573408-0fd54981-471a-4ef8-91d4-8ad4b159c1e0.png">
127
+ </a>
128
+
129
+ **darcula**
130
+
131
+ <a href="https://uiwjs.github.io/react-codemirror/#/theme/data/darcula">
132
+ <img width="436" alt="codemirror-theme-darcula" src="https://user-images.githubusercontent.com/1680273/176573321-3015b1b4-3455-497f-ad16-dd2090d7848d.png">
133
+ </a>
134
+
135
+ **dracula**
136
+
137
+ <a href="https://uiwjs.github.io/react-codemirror/#/theme/data/dracula">
138
+ <img width="436" alt="codemirror-theme-dracula" src="https://user-images.githubusercontent.com/1680273/176573236-43928ba2-0eb1-4b59-9495-d39b6e3df81c.png">
139
+ </a>
140
+
141
+ **duotone**
142
+
143
+ <a href="https://uiwjs.github.io/react-codemirror/#/theme/data/duotone/dark">
144
+ <img width="436" alt="codemirror-theme-duotone" src="https://user-images.githubusercontent.com/1680273/176572959-adfc1284-4c70-48df-8aeb-9a47ff76b2f2.png">
145
+ </a>
146
+
147
+ <a href="https://uiwjs.github.io/react-codemirror/#/theme/data/duotone/light">
148
+ <img width="436" alt="codemirror-theme-duotone" src="https://user-images.githubusercontent.com/1680273/176573139-5c22ed62-6000-40da-b080-59c83e6181e2.png">
149
+ </a>
150
+
151
+ **eclipse**
152
+
153
+ <a href="https://uiwjs.github.io/react-codemirror/#/theme/data/eclipse">
154
+ <img width="436" alt="codemirror-theme-eclipse" src="https://user-images.githubusercontent.com/1680273/176572785-4f56f11a-018b-4f86-9088-e6f71f745cfb.png">
155
+ </a>
156
+
157
+ **okaidia**
158
+
159
+ <a href="https://uiwjs.github.io/react-codemirror/#/theme/data/okaidia">
160
+ <img width="436" alt="codemirror-theme-okaidia" src="https://user-images.githubusercontent.com/1680273/176572694-b9aface9-9646-4e0e-a211-a8aa92dabc31.png">
161
+ </a>
162
+
163
+ **sublime**
164
+
165
+ <a href="https://uiwjs.github.io/react-codemirror/#/theme/data/sublime">
166
+ <img width="436" alt="codemirror-theme-sublime" src="https://user-images.githubusercontent.com/1680273/176572314-cc296f81-0763-485c-8fa2-7d61b24ad09b.png">
167
+ </a>
168
+
113
169
  ## Props
114
170
 
115
171
  ```ts
@@ -130,34 +186,22 @@ export interface CreateThemeOptions {
130
186
  styles: TagStyle[];
131
187
  }
132
188
  declare type Theme = 'light' | 'dark';
133
- interface Settings {
134
- /**
135
- * Editor background.
136
- */
189
+ export interface Settings {
190
+ /** Editor background. */
137
191
  background: string;
138
- /**
139
- * Default text color.
140
- */
192
+ /** Default text color. */
141
193
  foreground: string;
142
- /**
143
- * Caret color.
144
- */
194
+ /** Caret color. */
145
195
  caret: string;
146
- /**
147
- * Selection background.
148
- */
196
+ /** Selection background. */
149
197
  selection: string;
150
- /**
151
- * Background of highlighted lines.
152
- */
198
+ /** Selection match background. */
199
+ selectionMatch?: string;
200
+ /** Background of highlighted lines. */
153
201
  lineHighlight: string;
154
- /**
155
- * Gutter background.
156
- */
202
+ /** Gutter background. */
157
203
  gutterBackground: string;
158
- /**
159
- * Text color inside gutter.
160
- */
204
+ /** Text color inside gutter. */
161
205
  gutterForeground: string;
162
206
  }
163
207
  declare const createTheme: ({ dark, settings, styles }: CreateThemeOptions) => Extension;
package/cjs/index.d.ts CHANGED
@@ -22,6 +22,8 @@ export interface Settings {
22
22
  caret: string;
23
23
  /** Selection background. */
24
24
  selection: string;
25
+ /** Selection match background. */
26
+ selectionMatch?: string;
25
27
  /** Background of highlighted lines. */
26
28
  lineHighlight: string;
27
29
  /** Gutter background. */
package/cjs/index.js CHANGED
@@ -13,8 +13,7 @@ var createTheme = function createTheme(_ref) {
13
13
  var theme = _ref.theme,
14
14
  settings = _ref.settings,
15
15
  styles = _ref.styles;
16
-
17
- var themeExtension = _view.EditorView.theme({
16
+ var themeOptions = {
18
17
  '&': {
19
18
  backgroundColor: settings.background,
20
19
  color: settings.foreground
@@ -25,9 +24,6 @@ var createTheme = function createTheme(_ref) {
25
24
  '.cm-cursor, .cm-dropCursor': {
26
25
  borderLeftColor: settings.caret
27
26
  },
28
- '&.cm-focused .cm-selectionBackground .cm-selectionBackground, & .cm-selectionLayer .cm-selectionBackground, ::selection': {
29
- backgroundColor: settings.selection
30
- },
31
27
  '.cm-activeLine': {
32
28
  backgroundColor: settings.lineHighlight
33
29
  },
@@ -38,7 +34,21 @@ var createTheme = function createTheme(_ref) {
38
34
  '.cm-activeLineGutter': {
39
35
  backgroundColor: settings.lineHighlight
40
36
  }
41
- }, {
37
+ };
38
+
39
+ if (settings.selection) {
40
+ themeOptions['&.cm-focused .cm-selectionBackground .cm-selectionBackground, & .cm-selectionLayer .cm-selectionBackground, ::selection'] = {
41
+ backgroundColor: settings.selection
42
+ };
43
+ }
44
+
45
+ if (settings.selectionMatch) {
46
+ themeOptions['& .cm-selectionMatch'] = {
47
+ backgroundColor: settings.selectionMatch
48
+ };
49
+ }
50
+
51
+ var themeExtension = _view.EditorView.theme(themeOptions, {
42
52
  dark: theme === 'dark'
43
53
  });
44
54
 
package/cjs/index.js.map CHANGED
@@ -5,8 +5,7 @@
5
5
  "theme",
6
6
  "settings",
7
7
  "styles",
8
- "themeExtension",
9
- "EditorView",
8
+ "themeOptions",
10
9
  "backgroundColor",
11
10
  "background",
12
11
  "color",
@@ -14,10 +13,13 @@
14
13
  "caretColor",
15
14
  "caret",
16
15
  "borderLeftColor",
17
- "selection",
18
16
  "lineHighlight",
19
17
  "gutterBackground",
20
18
  "gutterForeground",
19
+ "selection",
20
+ "selectionMatch",
21
+ "themeExtension",
22
+ "EditorView",
21
23
  "dark",
22
24
  "highlightStyle",
23
25
  "HighlightStyle",
@@ -29,7 +31,7 @@
29
31
  "../src/index.tsx"
30
32
  ],
31
33
  "sourcesContent": [
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"
34
+ "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"
33
35
  ],
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"
36
+ "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"
35
37
  }
package/esm/index.d.ts CHANGED
@@ -22,6 +22,8 @@ export interface Settings {
22
22
  caret: string;
23
23
  /** Selection background. */
24
24
  selection: string;
25
+ /** Selection match background. */
26
+ selectionMatch?: string;
25
27
  /** Background of highlighted lines. */
26
28
  lineHighlight: string;
27
29
  /** Gutter background. */
package/esm/index.js CHANGED
@@ -6,7 +6,7 @@ export var createTheme = _ref => {
6
6
  settings,
7
7
  styles
8
8
  } = _ref;
9
- var themeExtension = EditorView.theme({
9
+ var themeOptions = {
10
10
  '&': {
11
11
  backgroundColor: settings.background,
12
12
  color: settings.foreground
@@ -17,9 +17,6 @@ export var createTheme = _ref => {
17
17
  '.cm-cursor, .cm-dropCursor': {
18
18
  borderLeftColor: settings.caret
19
19
  },
20
- '&.cm-focused .cm-selectionBackground .cm-selectionBackground, & .cm-selectionLayer .cm-selectionBackground, ::selection': {
21
- backgroundColor: settings.selection
22
- },
23
20
  '.cm-activeLine': {
24
21
  backgroundColor: settings.lineHighlight
25
22
  },
@@ -30,7 +27,21 @@ export var createTheme = _ref => {
30
27
  '.cm-activeLineGutter': {
31
28
  backgroundColor: settings.lineHighlight
32
29
  }
33
- }, {
30
+ };
31
+
32
+ if (settings.selection) {
33
+ themeOptions['&.cm-focused .cm-selectionBackground .cm-selectionBackground, & .cm-selectionLayer .cm-selectionBackground, ::selection'] = {
34
+ backgroundColor: settings.selection
35
+ };
36
+ }
37
+
38
+ if (settings.selectionMatch) {
39
+ themeOptions['& .cm-selectionMatch'] = {
40
+ backgroundColor: settings.selectionMatch
41
+ };
42
+ }
43
+
44
+ var themeExtension = EditorView.theme(themeOptions, {
34
45
  dark: theme === 'dark'
35
46
  });
36
47
  var highlightStyle = HighlightStyle.define(styles);
package/esm/index.js.map CHANGED
@@ -8,7 +8,7 @@
8
8
  "theme",
9
9
  "settings",
10
10
  "styles",
11
- "themeExtension",
11
+ "themeOptions",
12
12
  "backgroundColor",
13
13
  "background",
14
14
  "color",
@@ -16,10 +16,12 @@
16
16
  "caretColor",
17
17
  "caret",
18
18
  "borderLeftColor",
19
- "selection",
20
19
  "lineHighlight",
21
20
  "gutterBackground",
22
21
  "gutterForeground",
22
+ "selection",
23
+ "selectionMatch",
24
+ "themeExtension",
23
25
  "dark",
24
26
  "highlightStyle",
25
27
  "define",
@@ -29,7 +31,7 @@
29
31
  "../src/index.tsx"
30
32
  ],
31
33
  "sourcesContent": [
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"
34
+ "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"
33
35
  ],
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"
36
+ "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"
35
37
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@uiw/codemirror-themes",
3
- "version": "4.9.3",
3
+ "version": "4.9.6",
4
4
  "description": "Themes for CodeMirror.",
5
5
  "homepage": "https://uiwjs.github.io/react-codemirror/#/theme/doc",
6
6
  "author": "kenny wong <wowohoo@qq.com>",
package/src/index.tsx CHANGED
@@ -1,6 +1,7 @@
1
1
  import { EditorView } from '@codemirror/view';
2
2
  import { Extension } from '@codemirror/state';
3
3
  import { HighlightStyle, TagStyle, syntaxHighlighting } from '@codemirror/language';
4
+ import { StyleSpec } from 'style-mod';
4
5
 
5
6
  export interface CreateThemeOptions {
6
7
  /**
@@ -26,6 +27,8 @@ export interface Settings {
26
27
  caret: string;
27
28
  /** Selection background. */
28
29
  selection: string;
30
+ /** Selection match background. */
31
+ selectionMatch?: string;
29
32
  /** Background of highlighted lines. */
30
33
  lineHighlight: string;
31
34
  /** Gutter background. */
@@ -35,37 +38,43 @@ export interface Settings {
35
38
  }
36
39
 
37
40
  export const createTheme = ({ theme, settings, styles }: CreateThemeOptions): Extension => {
38
- const themeExtension = EditorView.theme(
39
- {
40
- '&': {
41
- backgroundColor: settings.background,
42
- color: settings.foreground,
43
- },
44
- '.cm-content': {
45
- caretColor: settings.caret,
46
- },
47
- '.cm-cursor, .cm-dropCursor': {
48
- borderLeftColor: settings.caret,
49
- },
50
- '&.cm-focused .cm-selectionBackground .cm-selectionBackground, & .cm-selectionLayer .cm-selectionBackground, ::selection':
51
- {
52
- backgroundColor: settings.selection,
53
- },
54
- '.cm-activeLine': {
55
- backgroundColor: settings.lineHighlight,
56
- },
57
- '.cm-gutters': {
58
- backgroundColor: settings.gutterBackground,
59
- color: settings.gutterForeground,
60
- },
61
- '.cm-activeLineGutter': {
62
- backgroundColor: settings.lineHighlight,
63
- },
41
+ const themeOptions: Record<string, StyleSpec> = {
42
+ '&': {
43
+ backgroundColor: settings.background,
44
+ color: settings.foreground,
64
45
  },
65
- {
66
- dark: theme === 'dark',
46
+ '.cm-content': {
47
+ caretColor: settings.caret,
67
48
  },
68
- );
49
+ '.cm-cursor, .cm-dropCursor': {
50
+ borderLeftColor: settings.caret,
51
+ },
52
+ '.cm-activeLine': {
53
+ backgroundColor: settings.lineHighlight,
54
+ },
55
+ '.cm-gutters': {
56
+ backgroundColor: settings.gutterBackground,
57
+ color: settings.gutterForeground,
58
+ },
59
+ '.cm-activeLineGutter': {
60
+ backgroundColor: settings.lineHighlight,
61
+ },
62
+ };
63
+ if (settings.selection) {
64
+ themeOptions[
65
+ '&.cm-focused .cm-selectionBackground .cm-selectionBackground, & .cm-selectionLayer .cm-selectionBackground, ::selection'
66
+ ] = {
67
+ backgroundColor: settings.selection,
68
+ };
69
+ }
70
+ if (settings.selectionMatch) {
71
+ themeOptions['& .cm-selectionMatch'] = {
72
+ backgroundColor: settings.selectionMatch,
73
+ };
74
+ }
75
+ const themeExtension = EditorView.theme(themeOptions, {
76
+ dark: theme === 'dark',
77
+ });
69
78
 
70
79
  const highlightStyle = HighlightStyle.define(styles);
71
80
  const extension = [themeExtension, syntaxHighlighting(highlightStyle)];