Skip to content

Commit e67f5ee

Browse files
jaywcjlovejaywcjlove
committed
feat(theme): add TokyoNightStorm theme.
1 parent 4af4add commit e67f5ee

File tree

10 files changed

+297
-24
lines changed

10 files changed

+297
-24
lines changed

‎.github/workflows/ci.yml

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -136,6 +136,12 @@ jobs:
136136
token: ${{ secrets.NPM_TOKEN }}
137137
package: ./themes/atomone/package.json
138138

139+
- name: 📦 @uiw/codemirror-theme-aura publish to NPM
140+
uses: JS-DevTools/npm-publish@v1
141+
with:
142+
token: ${{ secrets.NPM_TOKEN }}
143+
package: ./themes/aura/package.json
144+
139145
- name: 📦 @uiw/codemirror-theme-bbedit publish to NPM
140146
uses: JS-DevTools/npm-publish@v1
141147
with:
@@ -178,6 +184,12 @@ jobs:
178184
token: ${{ secrets.NPM_TOKEN }}
179185
package: ./themes/material/package.json
180186

187+
- name: 📦 @uiw/codemirror-theme-noctis-lilac publish to NPM
188+
uses: JS-DevTools/npm-publish@v1
189+
with:
190+
token: ${{ secrets.NPM_TOKEN }}
191+
package: ./themes/noctis-lilac/package.json
192+
181193
- name: 📦 @uiw/codemirror-theme-nord publish to NPM
182194
uses: JS-DevTools/npm-publish@v1
183195
with:
@@ -202,6 +214,18 @@ jobs:
202214
token: ${{ secrets.NPM_TOKEN }}
203215
package: ./themes/sublime/package.json
204216

217+
- name: 📦 @uiw/codemirror-theme-tokyo-night publish to NPM
218+
uses: JS-DevTools/npm-publish@v1
219+
with:
220+
token: ${{ secrets.NPM_TOKEN }}
221+
package: ./themes/tokyo-night/package.json
222+
223+
- name: 📦 @uiw/codemirror-theme-tokyo-night-storm publish to NPM
224+
uses: JS-DevTools/npm-publish@v1
225+
with:
226+
token: ${{ secrets.NPM_TOKEN }}
227+
package: ./themes/tokyo-night-storm/package.json
228+
205229
- name: 📦 @uiw/codemirror-theme-vscode publish to NPM
206230
uses: JS-DevTools/npm-publish@v1
207231
with:
@@ -356,6 +380,19 @@ jobs:
356380
NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}}
357381

358382

383+
- name: Modify @uiw/codemirror-theme-aura => @uiwjs/codemirror-theme-aura
384+
uses: jaywcjlove/github-action-package@main
385+
with:
386+
path: themes/aura/package.json
387+
rename: "@uiwjs/codemirror-theme-aura"
388+
389+
- run: npm publish
390+
working-directory: themes/aura
391+
continue-on-error: true
392+
env:
393+
NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}}
394+
395+
359396
- name: Modify @uiw/codemirror-theme-bbedit => @uiwjs/codemirror-theme-bbedit
360397
uses: jaywcjlove/github-action-package@main
361398
with:
@@ -468,6 +505,18 @@ jobs:
468505
env:
469506
NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}}
470507

508+
- name: Modify @uiw/codemirror-theme-noctis-lilac => @uiwjs/codemirror-theme-noctis-lilac
509+
uses: jaywcjlove/github-action-package@main
510+
with:
511+
path: themes/noctis-lilac/package.json
512+
rename: '@uiwjs/codemirror-theme-noctis-lilac'
513+
514+
- run: npm publish
515+
working-directory: themes/noctis-lilac
516+
continue-on-error: true
517+
env:
518+
NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}}
519+
471520
- name: Modify @uiw/codemirror-theme-nord => @uiwjs/codemirror-theme-nord
472521
uses: jaywcjlove/github-action-package@main
473522
with:
@@ -516,6 +565,30 @@ jobs:
516565
env:
517566
NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}}
518567

568+
- name: Modify @uiw/codemirror-theme-tokyo-night => @uiwjs/codemirror-theme-tokyo-night
569+
uses: jaywcjlove/github-action-package@main
570+
with:
571+
path: themes/tokyo-night/package.json
572+
rename: "@uiwjs/codemirror-theme-tokyo-night"
573+
574+
- run: npm publish
575+
working-directory: themes/tokyo-night
576+
continue-on-error: true
577+
env:
578+
NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}}
579+
580+
- name: Modify @uiw/codemirror-theme-tokyo-night-storm => @uiwjs/codemirror-theme-tokyo-night-storm
581+
uses: jaywcjlove/github-action-package@main
582+
with:
583+
path: themes/tokyo-night-storm/package.json
584+
rename: "@uiwjs/codemirror-theme-tokyo-night-storm"
585+
586+
- run: npm publish
587+
working-directory: themes/tokyo-night-storm
588+
continue-on-error: true
589+
env:
590+
NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}}
591+
519592
- name: Modify @uiw/codemirror-theme-vscode => @uiwjs/codemirror-theme-vscode
520593
uses: jaywcjlove/github-action-package@main
521594
with:

‎core/README.md

Lines changed: 25 additions & 24 deletions
Large diffs are not rendered by default.

‎themes/all/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@
4040
"@uiw/codemirror-theme-solarized": "4.18.2",
4141
"@uiw/codemirror-theme-sublime": "4.18.2",
4242
"@uiw/codemirror-theme-tokyo-night": "4.18.2",
43+
"@uiw/codemirror-theme-tokyo-night-storm": "4.18.2",
4344
"@uiw/codemirror-theme-vscode": "4.18.2",
4445
"@uiw/codemirror-theme-xcode": "4.18.2",
4546
"@uiw/codemirror-themes": "4.18.2"

‎themes/all/src/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,5 +17,6 @@ export * from '@uiw/codemirror-theme-okaidia';
1717
export * from '@uiw/codemirror-theme-solarized';
1818
export * from '@uiw/codemirror-theme-sublime';
1919
export * from '@uiw/codemirror-theme-tokyo-night';
20+
export * from '@uiw/codemirror-theme-tokyo-night-storm';
2021
export * from '@uiw/codemirror-theme-vscode';
2122
export * from '@uiw/codemirror-theme-xcode';

‎themes/tokyo-night-storm/README.md

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

‎themes/tokyo-night-storm/package.json

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
{
2+
"name": "@uiw/codemirror-theme-tokyo-night-storm",
3+
"version": "4.18.2",
4+
"description": "Theme tokyo-night-storm for CodeMirror.",
5+
"homepage": "https://uiwjs.github.io/react-codemirror/#/theme/data/tokyo-night-storm",
6+
"author": "kenny wong <[email protected]>",
7+
"license": "MIT",
8+
"main": "./cjs/index.js",
9+
"module": "./esm/index.js",
10+
"scripts": {
11+
"watch": "tsbb watch",
12+
"build": "tsbb build"
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.18.2"
25+
},
26+
"keywords": [
27+
"codemirror",
28+
"codemirror6",
29+
"theme",
30+
"tokyo-night",
31+
"tokyo-night-storm",
32+
"syntax",
33+
"ide",
34+
"code"
35+
],
36+
"jest": {
37+
"coverageReporters": [
38+
"lcov",
39+
"json-summary"
40+
]
41+
}
42+
}

‎themes/tokyo-night-storm/src/index.ts

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import { tags as t } from '@lezer/highlight';
2+
import { createTheme, CreateThemeOptions } from '@uiw/codemirror-themes';
3+
4+
export const tokyoNightStormInit = (options?: CreateThemeOptions) => {
5+
const { theme = 'dark', settings = {}, styles = [] } = options || {};
6+
return createTheme({
7+
theme: theme,
8+
settings: {
9+
background: '#24283b',
10+
foreground: '#7982a9',
11+
caret: '#c0caf5',
12+
selection: '#6f7bb630',
13+
selectionMatch: '#1f2335',
14+
gutterBackground: '#24283b',
15+
gutterForeground: '#7982a9',
16+
gutterBorder: 'transparent',
17+
lineHighlight: '#292e42',
18+
...settings,
19+
},
20+
styles: [
21+
{ tag: t.keyword, color: '#bb9af7' },
22+
{ tag: [t.name, t.deleted, t.character, t.macroName], color: '#c0caf5' },
23+
{ tag: [t.propertyName], color: '#7aa2f7' },
24+
{ tag: [t.processingInstruction, t.string, t.inserted, t.special(t.string)], color: '#9ece6a' },
25+
{ tag: [t.function(t.variableName), t.labelName], color: '#7aa2f7' },
26+
{ tag: [t.color, t.constant(t.name), t.standard(t.name)], color: '#bb9af7' },
27+
{ tag: [t.definition(t.name), t.separator], color: '#c0caf5' },
28+
{ tag: [t.className], color: '#c0caf5' },
29+
{ tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace], color: '#ff9e64' },
30+
{ tag: [t.typeName], color: '#2ac3de', fontStyle: '#2ac3de' },
31+
{ tag: [t.operator, t.operatorKeyword], color: '#bb9af7' },
32+
{ tag: [t.url, t.escape, t.regexp, t.link], color: '#b4f9f8' },
33+
{ tag: [t.meta, t.comment], color: '#565f89' },
34+
{ tag: t.strong, fontWeight: 'bold' },
35+
{ tag: t.emphasis, fontStyle: 'italic' },
36+
{ tag: t.link, textDecoration: 'underline' },
37+
{ tag: t.heading, fontWeight: 'bold', color: '#89ddff' },
38+
{ tag: [t.atom, t.bool, t.special(t.variableName)], color: '#c0caf5' },
39+
{ tag: t.invalid, color: '#ff5370' },
40+
{ tag: t.strikethrough, textDecoration: 'line-through' },
41+
...styles,
42+
],
43+
});
44+
};
45+
46+
export const tokyoNightStorm = tokyoNightStormInit();

‎themes/tokyo-night-storm/tsconfig.json

Lines changed: 9 additions & 0 deletions
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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,7 @@
6262
"@uiw/codemirror-theme-solarized": "4.18.2",
6363
"@uiw/codemirror-theme-sublime": "4.18.2",
6464
"@uiw/codemirror-theme-tokyo-night": "4.18.2",
65+
"@uiw/codemirror-theme-tokyo-night-storm": "4.18.2",
6566
"@uiw/codemirror-theme-vscode": "4.18.2",
6667
"@uiw/codemirror-theme-xcode": "4.18.2",
6768
"@uiw/codemirror-themes": "4.18.2",

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ import { okaidia } from '@uiw/codemirror-theme-okaidia';
4040
import { solarizedLight, solarizedDark } from '@uiw/codemirror-theme-solarized';
4141
import { sublime } from '@uiw/codemirror-theme-sublime';
4242
import { tokyoNight } from '@uiw/codemirror-theme-tokyo-night';
43+
import { tokyoNightStorm } from '@uiw/codemirror-theme-tokyo-night-storm';
4344
import { xcodeLight, xcodeDark } from '@uiw/codemirror-theme-xcode';
4445

4546
export const mdSource = {
@@ -95,6 +96,7 @@ export const themeData = {
9596
solarizedDark,
9697
sublime,
9798
tokyoNight,
99+
tokyoNightStorm,
98100
vscodeDark,
99101
xcodeLight,
100102
xcodeDark,

0 commit comments

Comments
 (0)