Skip to content

Commit 9dcbacc

Browse files
committedAug 26, 2023
feat(theme): add monokai theme.
1 parent 25fd7e9 commit 9dcbacc

File tree

23 files changed

+744
-5
lines changed

23 files changed

+744
-5
lines changed
 

‎.github/workflows/ci.yml

+7
Original file line numberDiff line numberDiff line change
@@ -246,6 +246,13 @@ jobs:
246246
env:
247247
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
248248

249+
- name: 📦 @uiw/codemirror-theme-monokai publish to NPM
250+
run: npm publish --access public
251+
working-directory: ./themes/monokai/
252+
continue-on-error: true
253+
env:
254+
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
255+
249256
- name: 📦 @uiw/codemirror-theme-noctis-lilac publish to NPM
250257
run: npm publish --access public
251258
working-directory: ./themes/noctis-lilac/

‎core/README.md

+1
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,7 @@ npm install @uiw/react-codemirror --save
7373
| `@uiw/codemirror-theme-kimbie` | [![npm version](https://img.shields.io/npm/v/@uiw/codemirror-theme-kimbie.svg)](https://www.npmjs.com/package/@uiw/codemirror-theme-kimbie) [![NPM Downloads](https://img.shields.io/npm/dm/@uiw/codemirror-theme-kimbie.svg?style=flat)](https://www.npmjs.com/package/@uiw/codemirror-theme-kimbie) | [`#preview`](https://uiwjs.github.io/react-codemirror/#/theme/data/kimbie/dark) |
7474
| `@uiw/codemirror-theme-kimbie` | [![npm version](https://img.shields.io/npm/v/@uiw/codemirror-theme-kimbie.svg)](https://www.npmjs.com/package/@uiw/codemirror-theme-kimbie) [![NPM Downloads](https://img.shields.io/npm/dm/@uiw/codemirror-theme-kimbie.svg?style=flat)](https://www.npmjs.com/package/@uiw/codemirror-theme-kimbie) | [`#preview`](https://uiwjs.github.io/react-codemirror/#/theme/data/kimbie/dark) |
7575
| `@uiw/codemirror-theme-material` | [![npm version](https://img.shields.io/npm/v/@uiw/codemirror-theme-material.svg)](https://www.npmjs.com/package/@uiw/codemirror-theme-material) [![NPM Downloads](https://img.shields.io/npm/dm/@uiw/codemirror-theme-material.svg?style=flat)](https://www.npmjs.com/package/@uiw/codemirror-theme-material) | [`#preview`](https://uiwjs.github.io/react-codemirror/#/theme/data/material/dark) |
76+
| `@uiw/codemirror-theme-monokai` | [![npm version](https://img.shields.io/npm/v/@uiw/codemirror-theme-monokai.svg)](https://www.npmjs.com/package/@uiw/codemirror-theme-monokai) [![NPM Downloads](https://img.shields.io/npm/dm/@uiw/codemirror-theme-monokai.svg?style=flat)](https://www.npmjs.com/package/@uiw/codemirror-theme-monokai) | [`#preview`](https://uiwjs.github.io/react-codemirror/#/theme/data/monokai) |
7677
| `@uiw/codemirror-theme-noctis-lilac` | [![npm version](https://img.shields.io/npm/v/@uiw/codemirror-theme-noctis-lilac.svg)](https://www.npmjs.com/package/@uiw/codemirror-theme-noctis-lilac) [![NPM Downloads](https://img.shields.io/npm/dm/@uiw/codemirror-theme-noctis-lilac.svg?style=flat)](https://www.npmjs.com/package/@uiw/codemirror-theme-noctis-lilac) | [`#preview`](https://uiwjs.github.io/react-codemirror/#/theme/data/noctis-lilac) |
7778
| `@uiw/codemirror-theme-nord` | [![npm version](https://img.shields.io/npm/v/@uiw/codemirror-theme-nord.svg)](https://www.npmjs.com/package/@uiw/codemirror-theme-nord) [![NPM Downloads](https://img.shields.io/npm/dm/@uiw/codemirror-theme-nord.svg?style=flat)](https://www.npmjs.com/package/@uiw/codemirror-theme-nord) | [`#preview`](https://uiwjs.github.io/react-codemirror/#/theme/data/nord) |
7879
| `@uiw/codemirror-theme-okaidia` | [![npm version](https://img.shields.io/npm/v/@uiw/codemirror-theme-okaidia.svg)](https://www.npmjs.com/package/@uiw/codemirror-theme-okaidia) [![NPM Downloads](https://img.shields.io/npm/dm/@uiw/codemirror-theme-okaidia.svg?style=flat)](https://www.npmjs.com/package/@uiw/codemirror-theme-okaidia) | [`#preview`](https://uiwjs.github.io/react-codemirror/#/theme/data/okaidia) |

‎themes/_scripts/data/monokai.json

+476
Large diffs are not rendered by default.

‎themes/_scripts/main.mjs

+11-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@ import FS from 'node:fs/promises';
44
const require = createRequire(import.meta.url);
55

66
const includes = (data, ...arg) => {
7-
const isInclude = !![data.scope||[]].flat().find(elm => arg.includes(elm));
7+
const scope = typeof data.scope === 'string' ? data.scope.split(' ').filter(Boolean) : data.scope || [];
8+
const isInclude = !![scope||[]].flat().find(elm => arg.includes(elm));
89
return isInclude ? getForeground(data.settings.foreground) : undefined;
910
}
1011
const getForeground = (str) => typeof str === 'string' ? str : null;
@@ -37,6 +38,7 @@ function format(data = {}, dark = false) {
3738
heading: null,
3839
invalid: null,
3940
regexp: null,
41+
tag: null,
4042
};
4143
tokenColors.forEach((item) => {
4244
const keys = Object.keys(item).length;
@@ -47,6 +49,9 @@ function format(data = {}, dark = false) {
4749
if (includes(item, "keyword")) {
4850
conf.keyword = getForeground(item.settings.foreground);
4951
}
52+
if (includes(item, "entity.name.tag")) {
53+
conf.tag = getForeground(item.settings.foreground);
54+
}
5055
if (includes(item, "storage", "keyword")) {
5156
conf.storage = getForeground(item.settings.foreground);
5257
}
@@ -112,6 +117,11 @@ const getString = (obj) => `export const config = ${JSON.stringify(obj, null, 2)
112117
themePath = '../kimbie/src/color.ts';
113118
await FS.writeFile(themePath, getString(themeKimbie));
114119
console.log(`🎉 File \x1b[32;1m${themePath}\x1b[0m created.`);
120+
121+
const monokai = format(require('./data/monokai.json'));
122+
themePath = '../monokai/src/color.ts';
123+
await FS.writeFile(themePath, getString(monokai));
124+
console.log(`🎉 File \x1b[32;1m${themePath}\x1b[0m created.`);
115125

116126
// const themeSolarizedDark = format(require('./data/solarized.dark.json'), true)
117127
// console.log('~~~::', themeSolarizedDark);

‎themes/abyss/src/color.ts

+1
Original file line numberDiff line numberDiff line change
@@ -20,4 +20,5 @@ export const config = {
2020
heading: '#6688cc',
2121
invalid: '#A22D44',
2222
regexp: '#22aa44',
23+
tag: '#225588',
2324
};

‎themes/abyss/src/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ export const abyssInit = (options?: Partial<CreateThemeOptions>) => {
3535
{ tag: [t.operator, t.operatorKeyword], color: config.keyword },
3636
{ tag: [t.url, t.escape, t.regexp, t.link], color: config.regexp },
3737
{ tag: [t.meta, t.comment], color: config.comment },
38+
{ tag: t.tagName, color: config.tag },
3839
{ tag: t.strong, fontWeight: 'bold' },
3940
{ tag: t.emphasis, fontStyle: 'italic' },
4041
{ tag: t.link, textDecoration: 'underline' },

‎themes/all/README.md

+6
Original file line numberDiff line numberDiff line change
@@ -205,6 +205,12 @@ export * from '@uiw/codemirror-theme-xcode';
205205
<img width="436" alt="codemirror-theme-material" src="https://user-images.githubusercontent.com/1680273/206124615-b3896e2c-d299-4609-b1d9-523ea1cf9f5b.png">
206206
</a>
207207

208+
**monokai**
209+
210+
<a href="https://uiwjs.github.io/react-codemirror/#/theme/data/monokai">
211+
<img width="436" alt="codemirror-theme-monokai" src="https://github.com/uiwjs/react-codemirror/assets/1680273/07df9125-6d96-413b-b863-1eef945b99e3">
212+
</a>
213+
208214
**noctis-lilac**
209215

210216
<a href="https://uiwjs.github.io/react-codemirror/#/theme/data/noctis-lilac">

‎themes/all/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@
3737
"@uiw/codemirror-theme-gruvbox-dark": "4.21.10",
3838
"@uiw/codemirror-theme-kimbie": "4.21.10",
3939
"@uiw/codemirror-theme-material": "4.21.10",
40+
"@uiw/codemirror-theme-monokai": "4.21.10",
4041
"@uiw/codemirror-theme-noctis-lilac": "4.21.10",
4142
"@uiw/codemirror-theme-nord": "4.21.10",
4243
"@uiw/codemirror-theme-okaidia": "4.21.10",

‎themes/all/src/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ export * from '@uiw/codemirror-theme-github';
1313
export * from '@uiw/codemirror-theme-gruvbox-dark';
1414
export * from '@uiw/codemirror-theme-kimbie';
1515
export * from '@uiw/codemirror-theme-material';
16+
export * from '@uiw/codemirror-theme-monokai';
1617
export * from '@uiw/codemirror-theme-noctis-lilac';
1718
export * from '@uiw/codemirror-theme-nord';
1819
export * from '@uiw/codemirror-theme-okaidia';

‎themes/kimbie/src/color.ts

+1
Original file line numberDiff line numberDiff line change
@@ -20,4 +20,5 @@ export const config = {
2020
heading: '#8ab1b0',
2121
invalid: '#dc3958',
2222
regexp: '#7e602c',
23+
tag: '#dc3958',
2324
};

‎themes/kimbie/src/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ export const kimbieInit = (options?: Partial<CreateThemeOptions>) => {
3535
{ tag: [t.operator, t.operatorKeyword], color: config.keyword },
3636
{ tag: [t.url, t.escape, t.regexp, t.link], color: config.regexp },
3737
{ tag: [t.meta, t.comment], color: config.comment },
38+
{ tag: t.tagName, color: config.tag },
3839
{ tag: t.strong, fontWeight: 'bold' },
3940
{ tag: t.emphasis, fontStyle: 'italic' },
4041
{ tag: t.link, textDecoration: 'underline' },

‎themes/monokai/README.md

+96
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
<!--rehype:ignore:start-->
2+
3+
# Monokai Theme
4+
5+
<!--rehype:ignore:end-->
6+
7+
[![npm version](https://img.shields.io/npm/v/@uiw/codemirror-theme-monokai.svg)](https://www.npmjs.com/package/@uiw/codemirror-theme-monokai)
8+
9+
Monokai theme for cm6, generated from [vscode themes](https://github.com/microsoft/vscode/blob/main/extensions/theme-monokai/themes/monokai-color-theme.json).
10+
11+
<a href="https://uiwjs.github.io/react-codemirror/#/theme/data/monokai">
12+
<img width="436" alt="codemirror-theme-monokai" src="https://github.com/uiwjs/react-codemirror/assets/1680273/07df9125-6d96-413b-b863-1eef945b99e3">
13+
</a>
14+
15+
## Install
16+
17+
```bash
18+
npm install @uiw/codemirror-theme-monokai --save
19+
```
20+
21+
```jsx
22+
import { monokai, monokaiInit } from '@uiw/codemirror-theme-monokai';
23+
24+
<CodeMirror theme={monokai} />
25+
<CodeMirror
26+
theme={monokaiInit({
27+
settings: {
28+
caret: '#c6c6c6',
29+
fontFamily: 'monospace',
30+
}
31+
})}
32+
/>
33+
```
34+
35+
## API
36+
37+
```tsx
38+
import { CreateThemeOptions } from '@uiw/codemirror-themes';
39+
export declare const defaultSettingsQuietlight: CreateThemeOptions['settings'];
40+
export declare const monokaiInit: (options?: Partial<CreateThemeOptions>) => import('@codemirror/state').Extension;
41+
export declare const monokai: import('@codemirror/state').Extension;
42+
```
43+
44+
## Usage
45+
46+
```jsx
47+
import CodeMirror from '@uiw/react-codemirror';
48+
import { monokai } from '@uiw/codemirror-theme-monokai';
49+
import { javascript } from '@codemirror/lang-javascript';
50+
51+
function App() {
52+
return (
53+
<CodeMirror
54+
value="console.log('hello world!');"
55+
height="200px"
56+
theme={monokai}
57+
extensions={[javascript({ jsx: true })]}
58+
onChange={(value, viewUpdate) => {
59+
console.log('value:', value);
60+
}}
61+
/>
62+
);
63+
}
64+
export default App;
65+
```
66+
67+
```js
68+
import { EditorView } from '@codemirror/view';
69+
import { EditorState } from '@codemirror/state';
70+
import { javascript } from '@codemirror/lang-javascript';
71+
import { monokai } from '@uiw/codemirror-theme-monokai';
72+
73+
const state = EditorState.create({
74+
doc: 'my source code',
75+
extensions: [monokai, javascript({ jsx: true })],
76+
});
77+
78+
const view = new EditorView({
79+
parent: document.querySelector('#editor'),
80+
state,
81+
});
82+
```
83+
84+
## Contributors
85+
86+
As always, thanks to our amazing contributors!
87+
88+
<a href="https://github.com/uiwjs/react-codemirror/graphs/contributors">
89+
<img src="https://uiwjs.github.io/react-codemirror/CONTRIBUTORS.svg" />
90+
</a>
91+
92+
Made with [github-action-contributors](https://github.com/jaywcjlove/github-action-contributors).
93+
94+
## License
95+
96+
Licensed under the MIT License.

‎themes/monokai/package.json

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
{
2+
"name": "@uiw/codemirror-theme-monokai",
3+
"version": "4.21.10",
4+
"description": "Theme monokai for CodeMirror.",
5+
"homepage": "https://uiwjs.github.io/react-codemirror/#/theme/data/monokai",
6+
"author": "kenny wong <wowohoo@qq.com>",
7+
"license": "MIT",
8+
"main": "./cjs/index.js",
9+
"module": "./esm/index.js",
10+
"scripts": {
11+
"watch": "tsbb watch src/*.ts --use-babel",
12+
"build": "tsbb build src/*.ts --use-babel"
13+
},
14+
"repository": {
15+
"type": "git",
16+
"url": "https://github.com/uiwjs/react-codemirror.git"
17+
},
18+
"files": [
19+
"src",
20+
"esm",
21+
"cjs"
22+
],
23+
"dependencies": {
24+
"@uiw/codemirror-themes": "4.21.10"
25+
},
26+
"keywords": [
27+
"codemirror",
28+
"codemirror-theme",
29+
"codemirror6",
30+
"theme",
31+
"monokai",
32+
"syntax",
33+
"ide",
34+
"code"
35+
]
36+
}

‎themes/monokai/src/color.ts

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
export const config = {
2+
background: '#272822',
3+
foreground: '#f8f8f2',
4+
selection: '#878b9180',
5+
cursor: '#f8f8f0',
6+
dropdownBackground: '#414339',
7+
activeLine: '#3e3d32',
8+
matchingBracket: '#3e3d32',
9+
keyword: '#F92672',
10+
storage: '#F92672',
11+
variable: '#FD971F',
12+
parameter: '#FD971F',
13+
function: '#66D9EF',
14+
string: '#E6DB74',
15+
constant: null,
16+
type: null,
17+
class: '#A6E22E',
18+
number: '#AE81FF',
19+
comment: '#88846f',
20+
heading: '#A6E22E',
21+
invalid: '#F44747',
22+
regexp: '#E6DB74',
23+
tag: '#F92672',
24+
};

‎themes/monokai/src/index.ts

+51
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import { tags as t } from '@lezer/highlight';
2+
import { createTheme, CreateThemeOptions } from '@uiw/codemirror-themes';
3+
import { config } from './color';
4+
5+
export const defaultSettingsMonokai: CreateThemeOptions['settings'] = {
6+
background: config.background,
7+
foreground: config.foreground,
8+
caret: config.cursor,
9+
selection: config.selection,
10+
selectionMatch: config.selection,
11+
gutterBackground: config.background,
12+
gutterForeground: config.foreground,
13+
lineHighlight: config.activeLine,
14+
};
15+
16+
export const monokaiInit = (options?: Partial<CreateThemeOptions>) => {
17+
const { theme = 'dark', settings = {}, styles = [] } = options || {};
18+
return createTheme({
19+
theme: theme,
20+
settings: {
21+
...defaultSettingsMonokai,
22+
...settings,
23+
},
24+
styles: [
25+
{ tag: t.keyword, color: config.keyword },
26+
{ tag: [t.name, t.deleted, t.character, t.macroName], color: config.variable },
27+
{ tag: [t.propertyName], color: config.function },
28+
{ tag: [t.processingInstruction, t.string, t.inserted, t.special(t.string)], color: config.string },
29+
{ tag: [t.function(t.variableName), t.labelName], color: config.function },
30+
{ tag: [t.color, t.constant(t.name), t.standard(t.name)], color: config.constant },
31+
{ tag: [t.definition(t.name), t.separator], color: config.variable },
32+
{ tag: [t.className], color: config.class },
33+
{ tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace], color: config.number },
34+
{ tag: [t.typeName], color: config.type, fontStyle: config.type },
35+
{ tag: [t.operator, t.operatorKeyword], color: config.keyword },
36+
{ tag: [t.url, t.escape, t.regexp, t.link], color: config.regexp },
37+
{ tag: [t.meta, t.comment], color: config.comment },
38+
{ tag: t.tagName, color: config.tag },
39+
{ tag: t.strong, fontWeight: 'bold' },
40+
{ tag: t.emphasis, fontStyle: 'italic' },
41+
{ tag: t.link, textDecoration: 'underline' },
42+
{ tag: t.heading, fontWeight: 'bold', color: config.heading },
43+
{ tag: [t.atom, t.bool, t.special(t.variableName)], color: config.variable },
44+
{ tag: t.invalid, color: config.invalid },
45+
{ tag: t.strikethrough, textDecoration: 'line-through' },
46+
...styles,
47+
],
48+
});
49+
};
50+
51+
export const monokai = monokaiInit();

‎themes/monokai/tsconfig.json

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"extends": "../../tsconfig",
3+
"include": ["src"],
4+
"compilerOptions": {
5+
"outDir": "./cjs",
6+
"baseUrl": ".",
7+
"noEmit": false
8+
}
9+
}

‎themes/quietlight/src/color.ts

+1
Original file line numberDiff line numberDiff line change
@@ -20,4 +20,5 @@ export const config = {
2020
heading: '#AA3731',
2121
invalid: '#cd3131',
2222
regexp: '#4B69C6',
23+
tag: '#4B69C6',
2324
};

‎themes/quietlight/src/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ export const quietlightInit = (options?: Partial<CreateThemeOptions>) => {
3636
{ tag: [t.operator, t.operatorKeyword], color: config.keyword },
3737
{ tag: [t.url, t.escape, t.regexp, t.link], color: config.regexp },
3838
{ tag: [t.meta, t.comment], color: config.comment },
39+
{ tag: t.tagName, color: config.tag },
3940
{ tag: t.strong, fontWeight: 'bold' },
4041
{ tag: t.emphasis, fontStyle: 'italic' },
4142
{ tag: t.link, textDecoration: 'underline' },

‎themes/red/src/color.ts

+5-4
Original file line numberDiff line numberDiff line change
@@ -8,16 +8,17 @@ export const config = {
88
matchingBracket: '#ff000033',
99
keyword: '#f12727ff',
1010
storage: '#ff6262ff',
11-
variable: '#fb9a4bff',
12-
parameter: '#fb9a4bff',
11+
variable: '#edef7dff',
12+
parameter: '#edef7dff',
1313
function: '#ffb454ff',
14-
string: '#cd8d8dff',
14+
string: '#edef7dff',
1515
constant: '#ec0d1e',
1616
type: '#9df39fff',
1717
class: '#fec758ff',
1818
number: '#994646ff',
1919
comment: '#e7c0c0ff',
2020
heading: '#fec758ff',
2121
invalid: '#ffffffff',
22-
regexp: '#ffb454ff',
22+
regexp: '#edef7dff',
23+
tag: '#aa5507ff',
2324
};

‎themes/red/src/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ export const redInit = (options?: Partial<CreateThemeOptions>) => {
3535
{ tag: [t.operator, t.operatorKeyword], color: config.keyword },
3636
{ tag: [t.url, t.escape, t.regexp, t.link], color: config.regexp },
3737
{ tag: [t.meta, t.comment], color: config.comment },
38+
{ tag: t.tagName, color: config.tag },
3839
{ tag: t.strong, fontWeight: 'bold' },
3940
{ tag: t.emphasis, fontStyle: 'italic' },
4041
{ tag: t.link, textDecoration: 'underline' },

‎www/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,7 @@
6060
"@uiw/codemirror-theme-gruvbox-dark": "4.21.10",
6161
"@uiw/codemirror-theme-kimbie": "4.21.10",
6262
"@uiw/codemirror-theme-material": "4.21.10",
63+
"@uiw/codemirror-theme-monokai": "4.21.10",
6364
"@uiw/codemirror-theme-noctis-lilac": "4.21.10",
6465
"@uiw/codemirror-theme-nord": "4.21.10",
6566
"@uiw/codemirror-theme-okaidia": "4.21.10",

‎www/src/pages/theme/themes/Datas.ts

+2
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import { darcula } from '@uiw/codemirror-theme-darcula';
1010
import { eclipse } from '@uiw/codemirror-theme-eclipse';
1111
import { bespin } from '@uiw/codemirror-theme-bespin';
1212
import { materialLight, materialDark } from '@uiw/codemirror-theme-material';
13+
import { monokai } from '@uiw/codemirror-theme-monokai';
1314
import { noctisLilac } from '@uiw/codemirror-theme-noctis-lilac';
1415
import { vscodeDark } from '@uiw/codemirror-theme-vscode';
1516
import { duotoneLight, duotoneDark } from '@uiw/codemirror-theme-duotone';
@@ -49,6 +50,7 @@ export const themeData = {
4950
kimbie,
5051
materialLight,
5152
materialDark,
53+
monokai,
5254
noctisLilac,
5355
nord,
5456
okaidia,

‎www/src/router.tsx

+10
Original file line numberDiff line numberDiff line change
@@ -409,6 +409,16 @@ export const routes: MenuRouteObject[] = [
409409
/>
410410
),
411411
},
412+
{
413+
path: 'data/monokai',
414+
label: 'Monokai',
415+
element: (
416+
<Preview
417+
themePkg="@uiw/codemirror-theme-monokai"
418+
path={() => import('@uiw/codemirror-theme-monokai/README.md')}
419+
/>
420+
),
421+
},
412422
{
413423
path: 'data/kimbie',
414424
element: <Navigate to="dark" replace />,

0 commit comments

Comments
 (0)
Please sign in to comment.