@fsegurai/codemirror-theme-cobalt2 6.0.2 → 6.0.4
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.
- package/LICENSE +21 -0
- package/README.md +51 -47
- package/dist/index.cjs +8 -5
- package/dist/index.js +8 -5
- package/package.json +7 -7
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 fsegurai
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<p align="center">
|
|
2
|
-
<img alt="CodeMirror 6 Themes Logo" src="https://raw.githubusercontent.com/fsegurai/codemirror-themes/main/demo/public/codemirror-themes.
|
|
2
|
+
<img alt="CodeMirror 6 Themes Logo" src="https://raw.githubusercontent.com/fsegurai/codemirror-themes/main/demo/public/codemirror-themes.svg">
|
|
3
3
|
</p>
|
|
4
4
|
|
|
5
5
|
<p align="center">
|
|
@@ -24,14 +24,14 @@
|
|
|
24
24
|
|
|
25
25
|
**A library of custom themes for CodeMirror 6.**
|
|
26
26
|
|
|
27
|
-
`@fsegurai/codemirror-theme-cobalt2` is a theme for CodeMirror 6 editor, making it visually engaging and adaptable
|
|
28
|
-
to different coding styles and user preferences.
|
|
27
|
+
`@fsegurai/codemirror-theme-cobalt2` is a theme for CodeMirror 6 editor, making it visually engaging and adaptable to different coding styles and user preferences.
|
|
29
28
|
|
|
30
29
|
### Table of contents
|
|
31
30
|
|
|
32
31
|
- [Installation](#installation)
|
|
33
|
-
- [@fsegurai/codemirror-theme-cobalt2](
|
|
32
|
+
- [@fsegurai/codemirror-theme-cobalt2](#@fsegurai/codemirror-theme-cobalt2)
|
|
34
33
|
- [Using Theme](#using-theme)
|
|
34
|
+
- [More Resources](#more-resources)
|
|
35
35
|
- [Available Themes](#available-themes)
|
|
36
36
|
- [Demo Application](#demo-application)
|
|
37
37
|
- [License](#license)
|
|
@@ -40,30 +40,29 @@ to different coding styles and user preferences.
|
|
|
40
40
|
|
|
41
41
|
### @fsegurai/codemirror-theme-cobalt2
|
|
42
42
|
|
|
43
|
-
To add `@fsegurai/codemirror-theme-cobalt2` along with CodeMirror 6 to your `package.json` use the following
|
|
44
|
-
commands.
|
|
43
|
+
To add `@fsegurai/codemirror-theme-cobalt2` along with CodeMirror 6 to your `package.json` use the following commands.
|
|
45
44
|
|
|
46
45
|
```bash
|
|
47
|
-
|
|
46
|
+
bun install @fsegurai/codemirror-theme-cobalt2 codemirror@^6.0.0 --save
|
|
48
47
|
```
|
|
49
48
|
|
|
50
|
-
|
|
49
|
+
## Using Theme
|
|
51
50
|
|
|
52
51
|
Import the respective theme from the package and apply it to your CodeMirror instance as shown below.
|
|
53
52
|
|
|
54
53
|
```javascript
|
|
55
54
|
import { EditorView, basicSetup } from 'codemirror'
|
|
56
55
|
import { markdown } from '@codemirror/lang-markdown'
|
|
57
|
-
import { cobalt2 } from '@fsegurai/codemirror-theme-
|
|
56
|
+
import { cobalt2 } from '@fsegurai/codemirror-theme-cobalt2'
|
|
58
57
|
|
|
59
58
|
let editor = new EditorView({
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
59
|
+
doc: '# Hello World',
|
|
60
|
+
extensions: [
|
|
61
|
+
basicSetup,
|
|
62
|
+
markdown(),
|
|
63
|
+
cobalt2
|
|
64
|
+
],
|
|
65
|
+
parent: document.body
|
|
67
66
|
})
|
|
68
67
|
```
|
|
69
68
|
|
|
@@ -71,35 +70,40 @@ Read the [CodeMirror documentation](https://codemirror.net/6/examples/styling/)
|
|
|
71
70
|
|
|
72
71
|
### Available Themes
|
|
73
72
|
|
|
74
|
-
| Theme
|
|
75
|
-
|
|
76
|
-
| All - Bundle
|
|
77
|
-
| Abcdef
|
|
78
|
-
| Abyss
|
|
79
|
-
| Android Studio
|
|
80
|
-
| Andromeda
|
|
81
|
-
| Basic
|
|
82
|
-
| Basic
|
|
83
|
-
|
|
|
84
|
-
|
|
|
85
|
-
|
|
|
86
|
-
| GitHub Dark
|
|
87
|
-
|
|
|
88
|
-
| Gruvbox Dark
|
|
89
|
-
|
|
|
90
|
-
|
|
|
91
|
-
|
|
|
92
|
-
|
|
|
93
|
-
|
|
|
94
|
-
|
|
|
95
|
-
|
|
|
96
|
-
|
|
|
97
|
-
|
|
|
98
|
-
|
|
|
99
|
-
|
|
|
100
|
-
|
|
|
101
|
-
|
|
102
|
-
|
|
73
|
+
| Theme | Package | Version |
|
|
74
|
+
|---------------------|--------------------------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------|
|
|
75
|
+
| All - Bundle | [@fsegurai/codemirror-theme-bundle](https://www.npmjs.com/package/@fsegurai/codemirror-theme-bundle) |  |
|
|
76
|
+
| Abcdef | [@fsegurai/codemirror-theme-abcdef](https://www.npmjs.com/package/@fsegurai/codemirror-theme-abcdef) |  |
|
|
77
|
+
| Abyss | [@fsegurai/codemirror-theme-abyss](https://www.npmjs.com/package/@fsegurai/codemirror-theme-abyss) |  |
|
|
78
|
+
| Android Studio | [@fsegurai/codemirror-theme-android-studio](https://www.npmjs.com/package/@fsegurai/codemirror-theme-android-studio) |  |
|
|
79
|
+
| Andromeda | [@fsegurai/codemirror-theme-andromeda](https://www.npmjs.com/package/@fsegurai/codemirror-theme-andromeda) |  |
|
|
80
|
+
| Basic Dark | [@fsegurai/codemirror-theme-basic-dark](https://www.npmjs.com/package/@fsegurai/codemirror-theme-basic-dark) |  |
|
|
81
|
+
| Basic Light | [@fsegurai/codemirror-theme-basic-light](https://www.npmjs.com/package/@fsegurai/codemirror-theme-basic-light) |  |
|
|
82
|
+
| Catppuccin Mocha | [@fsegurai/codemirror-theme-catppuccin-mocha](https://www.npmjs.com/package/@fsegurai/codemirror-theme-catppuccin-mocha) |  |
|
|
83
|
+
| Cobalt2 | [@fsegurai/codemirror-theme-cobalt](https://www.npmjs.com/package/@fsegurai/codemirror-theme-cobalt2) |  |
|
|
84
|
+
| Forest | [@fsegurai/codemirror-theme-forest](https://www.npmjs.com/package/@fsegurai/codemirror-theme-forest) |  |
|
|
85
|
+
| GitHub Dark | [@fsegurai/codemirror-theme-github-dark](https://www.npmjs.com/package/@fsegurai/codemirror-theme-github-dark) |  |
|
|
86
|
+
| GitHub Light | [@fsegurai/codemirror-theme-github-light](https://www.npmjs.com/package/@fsegurai/codemirror-theme-github-light) |  |
|
|
87
|
+
| Gruvbox Dark | [@fsegurai/codemirror-theme-gruvbox-dark](https://www.npmjs.com/package/@fsegurai/codemirror-theme-gruvbox-dark) |  |
|
|
88
|
+
| Gruvbox Light | [@fsegurai/codemirror-theme-gruvbox-light](https://www.npmjs.com/package/@fsegurai/codemirror-theme-gruvbox-light) |  |
|
|
89
|
+
| High Contrast Dark | [@fsegurai/codemirror-theme-high-contrast-dark](https://www.npmjs.com/package/@fsegurai/codemirror-theme-high-contrast-dark) |  |
|
|
90
|
+
| High Contrast Light | [@fsegurai/codemirror-theme-high-contrast-light](https://www.npmjs.com/package/@fsegurai/codemirror-theme-high-contrast-light) |  |
|
|
91
|
+
| Material Dark | [@fsegurai/codemirror-theme-material-dark](https://www.npmjs.com/package/@fsegurai/codemirror-theme-material-dark) |  |
|
|
92
|
+
| Material Light | [@fsegurai/codemirror-theme-material-light](https://www.npmjs.com/package/@fsegurai/codemirror-theme-material-light) |  |
|
|
93
|
+
| Material Ocean | [@fsegurai/codemirror-theme-material-ocean](https://www.npmjs.com/package/@fsegurai/codemirror-theme-material-ocean) |  |
|
|
94
|
+
| Monokai | [@fsegurai/codemirror-theme-monokai](https://www.npmjs.com/package/@fsegurai/codemirror-theme-monokai) |  |
|
|
95
|
+
| Nord | [@fsegurai/codemirror-theme-nord](https://www.npmjs.com/package/@fsegurai/codemirror-theme-nord) |  |
|
|
96
|
+
| Palenight | [@fsegurai/codemirror-theme-palenight](https://www.npmjs.com/package/@fsegurai/codemirror-theme-palenight) |  |
|
|
97
|
+
| Solarized Dark | [@fsegurai/codemirror-theme-solarized-dark](https://www.npmjs.com/package/@fsegurai/codemirror-theme-solarized-dark) |  |
|
|
98
|
+
| Solarized Light | [@fsegurai/codemirror-theme-solarized-light](https://www.npmjs.com/package/@fsegurai/codemirror-theme-solarized-light) |  |
|
|
99
|
+
| Synthwave 84 | [@fsegurai/codemirror-theme-synthwave-84](https://www.npmjs.com/package/@fsegurai/codemirror-theme-synthwave-84) |  |
|
|
100
|
+
| Tokyo Night Day | [@fsegurai/codemirror-theme-tokyo-night-day](https://www.npmjs.com/package/@fsegurai/codemirror-theme-tokyo-night-day) |  |
|
|
101
|
+
| Tokyo Night Storm | [@fsegurai/codemirror-theme-tokyo-night-storm](https://www.npmjs.com/package/@fsegurai/codemirror-theme-tokyo-night-storm) |  |
|
|
102
|
+
| Volcano | [@fsegurai/codemirror-theme-volcano](https://www.npmjs.com/package/@fsegurai/codemirror-theme-volcano) |  |
|
|
103
|
+
| VS Code Light | [@fsegurai/codemirror-theme-vscode-light](https://www.npmjs.com/package/@fsegurai/codemirror-theme-vscode-light) |  |
|
|
104
|
+
| VS Code Dark | [@fsegurai/codemirror-theme-vscode-dark](https://www.npmjs.com/package/@fsegurai/codemirror-theme-vscode-dark) |  |
|
|
105
|
+
|
|
106
|
+
## Demo Application
|
|
103
107
|
|
|
104
108
|
To see all themes in action, check out the
|
|
105
109
|
demo: [https://fsegurai.github.io/codemirror-themes](https://fsegurai.github.io/codemirror-themes).
|
|
@@ -108,8 +112,8 @@ To set up the demo locally:
|
|
|
108
112
|
|
|
109
113
|
```bash
|
|
110
114
|
git clone https://github.com/fsegurai/codemirror-themes.git
|
|
111
|
-
|
|
112
|
-
|
|
115
|
+
bun install
|
|
116
|
+
bun start
|
|
113
117
|
```
|
|
114
118
|
|
|
115
119
|
This will serve the application locally at [http://[::1]:8000](http://[::1]:8000).
|
package/dist/index.cjs
CHANGED
|
@@ -17,12 +17,13 @@ const generalDiff = {
|
|
|
17
17
|
insertedTextDecoration: 'none',
|
|
18
18
|
deletedTextDecoration: 'line-through',
|
|
19
19
|
insertedLinePadding: '1px 3px',
|
|
20
|
-
|
|
20
|
+
borderRadius: '3px'};
|
|
21
21
|
const generalGutter = {
|
|
22
22
|
border: 'none',
|
|
23
23
|
paddingRight: '8px',
|
|
24
24
|
fontSize: '0.9em',
|
|
25
25
|
fontWeight: '500',
|
|
26
|
+
lineHeight: '1.78', // Adjusted to compensate for 0.9em fontSize (1.6 / 0.9 ≈ 1.78)
|
|
26
27
|
};
|
|
27
28
|
const generalPanel = {
|
|
28
29
|
borderRadius: '4px',
|
|
@@ -263,10 +264,12 @@ const cobalt2Theme = view.EditorView.theme({
|
|
|
263
264
|
},
|
|
264
265
|
'.cm-lineNumbers': {
|
|
265
266
|
fontSize: generalGutter.fontSize,
|
|
267
|
+
lineHeight: generalGutter.lineHeight,
|
|
266
268
|
color: gray,
|
|
267
269
|
},
|
|
268
270
|
'.cm-foldGutter': {
|
|
269
271
|
fontSize: generalGutter.fontSize,
|
|
272
|
+
lineHeight: generalGutter.lineHeight,
|
|
270
273
|
},
|
|
271
274
|
'.cm-foldGutter .cm-gutterElement': {
|
|
272
275
|
color: gray,
|
|
@@ -282,14 +285,14 @@ const cobalt2Theme = view.EditorView.theme({
|
|
|
282
285
|
backgroundColor: addedBackground,
|
|
283
286
|
color: addedText,
|
|
284
287
|
padding: generalDiff.insertedLinePadding,
|
|
285
|
-
borderRadius: generalDiff.
|
|
288
|
+
borderRadius: generalDiff.borderRadius,
|
|
286
289
|
},
|
|
287
290
|
'ins.cm-insertedLine, ins.cm-insertedLine:not(:has(.cm-changedText))': {
|
|
288
291
|
textDecoration: generalDiff.insertedTextDecoration,
|
|
289
292
|
backgroundColor: `${addedBackground} !important`,
|
|
290
293
|
color: addedText,
|
|
291
294
|
padding: generalDiff.insertedLinePadding,
|
|
292
|
-
borderRadius: generalDiff.
|
|
295
|
+
borderRadius: generalDiff.borderRadius,
|
|
293
296
|
border: `1px solid ${addedText}30`,
|
|
294
297
|
},
|
|
295
298
|
'ins.cm-insertedLine .cm-changedText': {
|
|
@@ -301,14 +304,14 @@ const cobalt2Theme = view.EditorView.theme({
|
|
|
301
304
|
backgroundColor: removedBackground,
|
|
302
305
|
color: removedText,
|
|
303
306
|
padding: generalDiff.insertedLinePadding,
|
|
304
|
-
borderRadius: generalDiff.
|
|
307
|
+
borderRadius: generalDiff.borderRadius,
|
|
305
308
|
},
|
|
306
309
|
'del.cm-deletedLine, del, del:not(:has(.cm-deletedText))': {
|
|
307
310
|
textDecoration: generalDiff.deletedTextDecoration,
|
|
308
311
|
backgroundColor: `${removedBackground} !important`,
|
|
309
312
|
color: removedText,
|
|
310
313
|
padding: generalDiff.insertedLinePadding,
|
|
311
|
-
borderRadius: generalDiff.
|
|
314
|
+
borderRadius: generalDiff.borderRadius,
|
|
312
315
|
border: `1px solid ${removedText}30`,
|
|
313
316
|
},
|
|
314
317
|
'del .cm-deletedText, del .cm-changedText': {
|
package/dist/index.js
CHANGED
|
@@ -15,12 +15,13 @@ const generalDiff = {
|
|
|
15
15
|
insertedTextDecoration: 'none',
|
|
16
16
|
deletedTextDecoration: 'line-through',
|
|
17
17
|
insertedLinePadding: '1px 3px',
|
|
18
|
-
|
|
18
|
+
borderRadius: '3px'};
|
|
19
19
|
const generalGutter = {
|
|
20
20
|
border: 'none',
|
|
21
21
|
paddingRight: '8px',
|
|
22
22
|
fontSize: '0.9em',
|
|
23
23
|
fontWeight: '500',
|
|
24
|
+
lineHeight: '1.78', // Adjusted to compensate for 0.9em fontSize (1.6 / 0.9 ≈ 1.78)
|
|
24
25
|
};
|
|
25
26
|
const generalPanel = {
|
|
26
27
|
borderRadius: '4px',
|
|
@@ -261,10 +262,12 @@ const cobalt2Theme = /*@__PURE__*/EditorView.theme({
|
|
|
261
262
|
},
|
|
262
263
|
'.cm-lineNumbers': {
|
|
263
264
|
fontSize: generalGutter.fontSize,
|
|
265
|
+
lineHeight: generalGutter.lineHeight,
|
|
264
266
|
color: gray,
|
|
265
267
|
},
|
|
266
268
|
'.cm-foldGutter': {
|
|
267
269
|
fontSize: generalGutter.fontSize,
|
|
270
|
+
lineHeight: generalGutter.lineHeight,
|
|
268
271
|
},
|
|
269
272
|
'.cm-foldGutter .cm-gutterElement': {
|
|
270
273
|
color: gray,
|
|
@@ -280,14 +283,14 @@ const cobalt2Theme = /*@__PURE__*/EditorView.theme({
|
|
|
280
283
|
backgroundColor: addedBackground,
|
|
281
284
|
color: addedText,
|
|
282
285
|
padding: generalDiff.insertedLinePadding,
|
|
283
|
-
borderRadius: generalDiff.
|
|
286
|
+
borderRadius: generalDiff.borderRadius,
|
|
284
287
|
},
|
|
285
288
|
'ins.cm-insertedLine, ins.cm-insertedLine:not(:has(.cm-changedText))': {
|
|
286
289
|
textDecoration: generalDiff.insertedTextDecoration,
|
|
287
290
|
backgroundColor: `${addedBackground} !important`,
|
|
288
291
|
color: addedText,
|
|
289
292
|
padding: generalDiff.insertedLinePadding,
|
|
290
|
-
borderRadius: generalDiff.
|
|
293
|
+
borderRadius: generalDiff.borderRadius,
|
|
291
294
|
border: `1px solid ${addedText}30`,
|
|
292
295
|
},
|
|
293
296
|
'ins.cm-insertedLine .cm-changedText': {
|
|
@@ -299,14 +302,14 @@ const cobalt2Theme = /*@__PURE__*/EditorView.theme({
|
|
|
299
302
|
backgroundColor: removedBackground,
|
|
300
303
|
color: removedText,
|
|
301
304
|
padding: generalDiff.insertedLinePadding,
|
|
302
|
-
borderRadius: generalDiff.
|
|
305
|
+
borderRadius: generalDiff.borderRadius,
|
|
303
306
|
},
|
|
304
307
|
'del.cm-deletedLine, del, del:not(:has(.cm-deletedText))': {
|
|
305
308
|
textDecoration: generalDiff.deletedTextDecoration,
|
|
306
309
|
backgroundColor: `${removedBackground} !important`,
|
|
307
310
|
color: removedText,
|
|
308
311
|
padding: generalDiff.insertedLinePadding,
|
|
309
|
-
borderRadius: generalDiff.
|
|
312
|
+
borderRadius: generalDiff.borderRadius,
|
|
310
313
|
border: `1px solid ${removedText}30`,
|
|
311
314
|
},
|
|
312
315
|
'del .cm-deletedText, del .cm-changedText': {
|
package/package.json
CHANGED
|
@@ -1,20 +1,16 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fsegurai/codemirror-theme-cobalt2",
|
|
3
|
+
"version": "6.0.4",
|
|
3
4
|
"description": "Cobalt2 theme for the CodeMirror editor",
|
|
4
|
-
"version": "6.0.2",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.cjs",
|
|
7
|
+
"module": "dist/index.js",
|
|
8
|
+
"types": "dist/index.d.ts",
|
|
7
9
|
"exports": {
|
|
8
10
|
"import": "./dist/index.js",
|
|
9
11
|
"require": "./dist/index.cjs"
|
|
10
12
|
},
|
|
11
|
-
"types": "dist/index.d.ts",
|
|
12
|
-
"module": "dist/index.js",
|
|
13
13
|
"sideEffects": false,
|
|
14
|
-
"scripts": {
|
|
15
|
-
"test": "cm-runtests",
|
|
16
|
-
"prepare": "cm-buildhelper src/index.ts"
|
|
17
|
-
},
|
|
18
14
|
"keywords": [
|
|
19
15
|
"editor",
|
|
20
16
|
"diff",
|
|
@@ -32,6 +28,10 @@
|
|
|
32
28
|
"url": "https://www.fsegurai.com/"
|
|
33
29
|
},
|
|
34
30
|
"license": "MIT",
|
|
31
|
+
"scripts": {
|
|
32
|
+
"pkg:build": "cm-buildhelper src/index.ts",
|
|
33
|
+
"pkg:test": "cm-runtests"
|
|
34
|
+
},
|
|
35
35
|
"peerDependencies": {
|
|
36
36
|
"@lezer/highlight": "^1.0.0",
|
|
37
37
|
"@codemirror/language": "^6.0.0",
|