Skip to content

Commit fbb07e1

Browse files
committedAug 26, 2023
feat(theme): add red theme.
1 parent 6cd63b5 commit fbb07e1

File tree

15 files changed

+253
-4
lines changed

15 files changed

+253
-4
lines changed
 

‎.github/workflows/ci.yml

+8
Original file line numberDiff line numberDiff line change
@@ -131,6 +131,14 @@ jobs:
131131
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
132132

133133

134+
- name: 📦 @uiw/codemirror-theme-red publish to NPM
135+
run: npm publish --access public
136+
working-directory: ./themes/red/
137+
continue-on-error: true
138+
env:
139+
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
140+
141+
134142
- name: 📦 @uiw/codemirror-theme-solarized publish to NPM
135143
run: npm publish --access public
136144
working-directory: ./themes/solarized/

‎core/README.md

+1
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,7 @@ npm install @uiw/react-codemirror --save
7474
| `@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) |
7575
| `@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) |
7676
| `@uiw/codemirror-theme-quietlight` | [![npm version](https://img.shields.io/npm/v/@uiw/codemirror-theme-quietlight.svg)](https://www.npmjs.com/package/@uiw/codemirror-theme-quietlight) [![NPM Downloads](https://img.shields.io/npm/dm/@uiw/codemirror-theme-quietlight.svg?style=flat)](https://www.npmjs.com/package/@uiw/codemirror-theme-quietlight) | [`#preview`](https://uiwjs.github.io/react-codemirror/#/theme/data/quietlight) |
77+
| `@uiw/codemirror-theme-red` | [![npm version](https://img.shields.io/npm/v/@uiw/codemirror-theme-red.svg)](https://www.npmjs.com/package/@uiw/codemirror-theme-red) [![NPM Downloads](https://img.shields.io/npm/dm/@uiw/codemirror-theme-red.svg?style=flat)](https://www.npmjs.com/package/@uiw/codemirror-theme-red) | [`#preview`](https://uiwjs.github.io/react-codemirror/#/theme/data/red) |
7778
| `@uiw/codemirror-theme-solarized` | [![npm version](https://img.shields.io/npm/v/@uiw/codemirror-theme-solarized.svg)](https://www.npmjs.com/package/@uiw/codemirror-theme-solarized) [![NPM Downloads](https://img.shields.io/npm/dm/@uiw/codemirror-theme-solarized.svg?style=flat)](https://www.npmjs.com/package/@uiw/codemirror-theme-solarized) | [`#preview`](https://uiwjs.github.io/react-codemirror/#/theme/data/solarized/dark) |
7879
| `@uiw/codemirror-theme-sublime` | [![npm version](https://img.shields.io/npm/v/@uiw/codemirror-theme-sublime.svg)](https://www.npmjs.com/package/@uiw/codemirror-theme-sublime) [![NPM Downloads](https://img.shields.io/npm/dm/@uiw/codemirror-theme-sublime.svg?style=flat)](https://www.npmjs.com/package/@uiw/codemirror-theme-sublime) | [`#preview`](https://uiwjs.github.io/react-codemirror/#/theme/data/sublime) |
7980
| `@uiw/codemirror-theme-tokyo-night` | [![npm version](https://img.shields.io/npm/v/@uiw/codemirror-theme-tokyo-night.svg)](https://www.npmjs.com/package/@uiw/codemirror-theme-tokyo-night) [![NPM Downloads](https://img.shields.io/npm/dm/@uiw/codemirror-theme-tokyo-night.svg?style=flat)](https://www.npmjs.com/package/@uiw/codemirror-theme-tokyo-night) | [`#preview`](https://uiwjs.github.io/react-codemirror/#/theme/data/tokyo-night) |

‎themes/_scripts/main.mjs

+6-3
Original file line numberDiff line numberDiff line change
@@ -93,14 +93,17 @@ function format(data = {}, dark = false) {
9393
const getString = (obj) => `export const config = ${JSON.stringify(obj, null, 2)};`;
9494

9595
;(async () => {
96-
const themeQuietlight = format(require('./data/quietlight.json'))
96+
const themeQuietlight = format(require('./data/quietlight.json'));
9797
let themePath = '../quietlight/src/color.ts';
9898
await FS.writeFile(themePath, getString(themeQuietlight));
9999
console.log(`🎉 File \x1b[32;1m${themePath}\x1b[0m created.`);
100100

101+
const themeRed = format(require('./data/red.json'));
102+
themePath = '../red/src/color.ts';
103+
await FS.writeFile(themePath, getString(themeRed));
104+
console.log(`🎉 File \x1b[32;1m${themePath}\x1b[0m created.`);
105+
101106

102-
const themeRed = format(require('./data/red.json'), true)
103-
console.log('~~~::', themeRed);
104107
const themeSolarizedDark = format(require('./data/solarized.dark.json'), true)
105108
console.log('~~~::', themeSolarizedDark);
106109
const themeSolarizedLight = format(require('./data/solarized.light.json'))

‎themes/all/README.md

+7
Original file line numberDiff line numberDiff line change
@@ -77,6 +77,7 @@ export * from '@uiw/codemirror-theme-noctis-lilac';
7777
export * from '@uiw/codemirror-theme-nord';
7878
export * from '@uiw/codemirror-theme-okaidia';
7979
export * from '@uiw/codemirror-theme-quietlight';
80+
export * from '@uiw/codemirror-theme-red';
8081
export * from '@uiw/codemirror-theme-solarized';
8182
export * from '@uiw/codemirror-theme-sublime';
8283
export * from '@uiw/codemirror-theme-tokyo-night';
@@ -216,6 +217,12 @@ export * from '@uiw/codemirror-theme-xcode';
216217
<img width="436" alt="codemirror-theme-okaidia" src="https://github.com/uiwjs/react-codemirror/assets/1680273/3137facb-8db7-4805-bd5c-9818d5ff49ae">
217218
</a>
218219

220+
**red**
221+
222+
<a href="https://uiwjs.github.io/react-codemirror/#/theme/data/red">
223+
<img width="436" alt="codemirror-theme-red" src="https://github.com/uiwjs/react-codemirror/assets/1680273/aef0a618-8c74-4466-9a04-35e368f582a7">
224+
</a>
225+
219226
**solarized**
220227

221228
<a href="https://uiwjs.github.io/react-codemirror/#/theme/data/solarized/light">

‎themes/all/src/index.ts

+2
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,8 @@ export * from '@uiw/codemirror-theme-material';
1414
export * from '@uiw/codemirror-theme-noctis-lilac';
1515
export * from '@uiw/codemirror-theme-nord';
1616
export * from '@uiw/codemirror-theme-okaidia';
17+
export * from '@uiw/codemirror-theme-quietlight';
18+
export * from '@uiw/codemirror-theme-red';
1719
export * from '@uiw/codemirror-theme-solarized';
1820
export * from '@uiw/codemirror-theme-sublime';
1921
export * from '@uiw/codemirror-theme-tokyo-night';

‎themes/quietlight/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
"cjs"
2222
],
2323
"dependencies": {
24-
"@uiw/codemirror-themes": "4.21.9"
24+
"@uiw/codemirror-themes": "4.21.10"
2525
},
2626
"keywords": [
2727
"codemirror",

‎themes/quietlight/src/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ export const defaultSettingsQuietlight: CreateThemeOptions['settings'] = {
1010
selectionMatch: config.selection,
1111
gutterBackground: config.background,
1212
gutterForeground: config.foreground,
13+
gutterBorder: 'transparent',
1314
lineHighlight: config.activeLine,
1415
};
1516

‎themes/red/README.md

+96
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
<!--rehype:ignore:start-->
2+
3+
# Red Theme
4+
5+
<!--rehype:ignore:end-->
6+
7+
[![npm version](https://img.shields.io/npm/v/@uiw/codemirror-theme-red.svg)](https://www.npmjs.com/package/@uiw/codemirror-theme-red)
8+
9+
Red theme for cm6, generated from [vscode themes](https://github.com/microsoft/vscode/blob/main/extensions/theme-red/themes/Red-color-theme.json).
10+
11+
<a href="https://uiwjs.github.io/react-codemirror/#/theme/data/red">
12+
<img width="436" alt="codemirror-theme-red" src="https://github.com/uiwjs/react-codemirror/assets/1680273/aef0a618-8c74-4466-9a04-35e368f582a7">
13+
</a>
14+
15+
## Install
16+
17+
```bash
18+
npm install @uiw/codemirror-theme-red --save
19+
```
20+
21+
```jsx
22+
import { red, redInit } from '@uiw/codemirror-theme-red';
23+
24+
<CodeMirror theme={red} />
25+
<CodeMirror
26+
theme={redInit({
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 redInit: (options?: Partial<CreateThemeOptions>) => import('@codemirror/state').Extension;
41+
export declare const red: import('@codemirror/state').Extension;
42+
```
43+
44+
## Usage
45+
46+
```jsx
47+
import CodeMirror from '@uiw/react-codemirror';
48+
import { red } from '@uiw/codemirror-theme-red';
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={red}
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 { red } from '@uiw/codemirror-theme-red';
72+
73+
const state = EditorState.create({
74+
doc: 'my source code',
75+
extensions: [red, 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/red/package.json

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
{
2+
"name": "@uiw/codemirror-theme-red",
3+
"version": "4.21.10",
4+
"description": "Theme red for CodeMirror.",
5+
"homepage": "https://uiwjs.github.io/react-codemirror/#/theme/data/red",
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+
"red",
32+
"syntax",
33+
"ide",
34+
"code"
35+
]
36+
}

‎themes/red/src/color.ts

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
export const config = {
2+
background: '#390000',
3+
foreground: '#F8F8F8',
4+
selection: '#750000',
5+
cursor: '#970000',
6+
dropdownBackground: '#580000',
7+
activeLine: '#ff000033',
8+
matchingBracket: '#ff000033',
9+
keyword: '#f12727ff',
10+
storage: '#ff6262ff',
11+
variable: '#fb9a4bff',
12+
parameter: '#fb9a4bff',
13+
function: '#ffb454ff',
14+
string: '#cd8d8dff',
15+
constant: '#ec0d1e',
16+
type: '#9df39fff',
17+
class: '#fec758ff',
18+
number: '#994646ff',
19+
comment: '#e7c0c0ff',
20+
heading: '#fec758ff',
21+
invalid: '#ffffffff',
22+
regexp: '#ffb454ff',
23+
};

‎themes/red/src/index.ts

+50
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
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 defaultSettingsRed: 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 redInit = (options?: Partial<CreateThemeOptions>) => {
17+
const { theme = 'dark', settings = {}, styles = [] } = options || {};
18+
return createTheme({
19+
theme: theme,
20+
settings: {
21+
...defaultSettingsRed,
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.strong, fontWeight: 'bold' },
39+
{ tag: t.emphasis, fontStyle: 'italic' },
40+
{ tag: t.link, textDecoration: 'underline' },
41+
{ tag: t.heading, fontWeight: 'bold', color: config.heading },
42+
{ tag: [t.atom, t.bool, t.special(t.variableName)], color: config.variable },
43+
{ tag: t.invalid, color: config.invalid },
44+
{ tag: t.strikethrough, textDecoration: 'line-through' },
45+
...styles,
46+
],
47+
});
48+
};
49+
50+
export const red = redInit();

‎themes/red/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+
}

‎www/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,7 @@
6262
"@uiw/codemirror-theme-nord": "4.21.10",
6363
"@uiw/codemirror-theme-okaidia": "4.21.10",
6464
"@uiw/codemirror-theme-quietlight": "4.21.10",
65+
"@uiw/codemirror-theme-red": "4.21.10",
6566
"@uiw/codemirror-theme-solarized": "4.21.10",
6667
"@uiw/codemirror-theme-sublime": "4.21.10",
6768
"@uiw/codemirror-theme-tokyo-night": "4.21.10",

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

+2
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import { githubLight, githubDark } from '@uiw/codemirror-theme-github';
1616
import { gruvboxDark, gruvboxLight } from '@uiw/codemirror-theme-gruvbox-dark';
1717
import { nord } from '@uiw/codemirror-theme-nord';
1818
import { okaidia } from '@uiw/codemirror-theme-okaidia';
19+
import { red } from '@uiw/codemirror-theme-red';
1920
import { quietlight } from '@uiw/codemirror-theme-quietlight';
2021
import { solarizedLight, solarizedDark } from '@uiw/codemirror-theme-solarized';
2122
import { sublime } from '@uiw/codemirror-theme-sublime';
@@ -47,6 +48,7 @@ export const themeData = {
4748
noctisLilac,
4849
nord,
4950
okaidia,
51+
red,
5052
quietlight,
5153
solarizedLight,
5254
solarizedDark,

‎www/src/router.tsx

+10
Original file line numberDiff line numberDiff line change
@@ -439,6 +439,16 @@ export const routes: MenuRouteObject[] = [
439439
/>
440440
),
441441
},
442+
{
443+
path: 'data/red',
444+
label: 'red',
445+
element: (
446+
<Preview
447+
themePkg="@uiw/codemirror-theme-red"
448+
path={() => import('@uiw/codemirror-theme-red/README.md')}
449+
/>
450+
),
451+
},
442452
{
443453
path: 'data/solarized/light',
444454
label: 'solarized light',

0 commit comments

Comments
 (0)
Please sign in to comment.