Skip to content

Commit 6f5a908

Browse files
jaywcjlovejaywcjlove
committed
feat(theme): add tokyoNightDay theme.
1 parent e67f5ee commit 6f5a908

File tree

16 files changed

+254
-11
lines changed

16 files changed

+254
-11
lines changed

‎core/README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,7 @@ npm install @uiw/react-codemirror --save
7676
| `@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) |
7777
| `@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) |
7878
| `@uiw/codemirror-theme-tokyo-night-storm` | [![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) [![NPM Downloads](https://img.shields.io/npm/dm/@uiw/codemirror-theme-tokyo-night-storm.svg?style=flat)](https://www.npmjs.com/package/@uiw/codemirror-theme-tokyo-night-storm) | [`#preview`](https://uiwjs.github.io/react-codemirror/#/theme/data/tokyo-night-storm) |
79+
| `@uiw/codemirror-theme-tokyo-night-day` | [![npm version](https://img.shields.io/npm/v/@uiw/codemirror-theme-tokyo-night-day.svg)](https://www.npmjs.com/package/@uiw/codemirror-theme-tokyo-night-day) [![NPM Downloads](https://img.shields.io/npm/dm/@uiw/codemirror-theme-tokyo-night-day.svg?style=flat)](https://www.npmjs.com/package/@uiw/codemirror-theme-tokyo-night-day) | [`#preview`](https://uiwjs.github.io/react-codemirror/#/theme/data/tokyo-night-day) |
7980
| `@uiw/codemirror-theme-vscode` | [![npm version](https://img.shields.io/npm/v/@uiw/codemirror-theme-vscode.svg)](https://www.npmjs.com/package/@uiw/codemirror-theme-vscode) [![NPM Downloads](https://img.shields.io/npm/dm/@uiw/codemirror-theme-vscode.svg?style=flat)](https://www.npmjs.com/package/@uiw/codemirror-theme-vscode) | [`#preview`](https://uiwjs.github.io/react-codemirror/#/theme/data/vscode) |
8081
| `@uiw/codemirror-theme-xcode` | [![npm version](https://img.shields.io/npm/v/@uiw/codemirror-theme-xcode.svg)](https://www.npmjs.com/package/@uiw/codemirror-theme-xcode) [![NPM Downloads](https://img.shields.io/npm/dm/@uiw/codemirror-theme-xcode.svg?style=flat)](https://www.npmjs.com/package/@uiw/codemirror-theme-xcode) | [`#preview`](https://uiwjs.github.io/react-codemirror/#/theme/data/xcode) |
8182

‎themes/all/README.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,8 @@ export * from '@uiw/codemirror-theme-okaidia';
7878
export * from '@uiw/codemirror-theme-solarized';
7979
export * from '@uiw/codemirror-theme-sublime';
8080
export * from '@uiw/codemirror-theme-tokyo-night';
81+
export * from '@uiw/codemirror-theme-tokyo-night-storm';
82+
export * from '@uiw/codemirror-theme-tokyo-night-day';
8183
export * from '@uiw/codemirror-theme-vscode';
8284
export * from '@uiw/codemirror-theme-xcode';
8385
```

‎themes/all/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@
4141
"@uiw/codemirror-theme-sublime": "4.18.2",
4242
"@uiw/codemirror-theme-tokyo-night": "4.18.2",
4343
"@uiw/codemirror-theme-tokyo-night-storm": "4.18.2",
44+
"@uiw/codemirror-theme-tokyo-night-day": "4.18.2",
4445
"@uiw/codemirror-theme-vscode": "4.18.2",
4546
"@uiw/codemirror-theme-xcode": "4.18.2",
4647
"@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
@@ -18,5 +18,6 @@ export * from '@uiw/codemirror-theme-solarized';
1818
export * from '@uiw/codemirror-theme-sublime';
1919
export * from '@uiw/codemirror-theme-tokyo-night';
2020
export * from '@uiw/codemirror-theme-tokyo-night-storm';
21+
export * from '@uiw/codemirror-theme-tokyo-night-day';
2122
export * from '@uiw/codemirror-theme-vscode';
2223
export * from '@uiw/codemirror-theme-xcode';

‎themes/theme/README.md

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -244,6 +244,18 @@ export default App;
244244
<img width="436" alt="codemirror-theme-tokyo-night" src="https://user-images.githubusercontent.com/1680273/206094521-c3a51de1-8cb7-4f01-a9bd-6cfd04a3aa0d.png">
245245
</a>
246246

247+
**tokyo-night-day**
248+
249+
<a href="https://uiwjs.github.io/react-codemirror/#/theme/data/tokyo-night-day">
250+
<img width="436" alt="codemirror-theme-tokyo-night-day" src="https://user-images.githubusercontent.com/1680273/206104544-ca4db2e0-caac-4804-9321-c269fe660245.png">
251+
</a>
252+
253+
**tokyo-night-storm**
254+
255+
<a href="https://uiwjs.github.io/react-codemirror/#/theme/data/tokyo-night-storm">
256+
<img width="436" alt="codemirror-theme-tokyo-night-storm" src="https://user-images.githubusercontent.com/1680273/206097179-8a490b97-87da-4285-a9bc-b0c9f510e7ed.png">
257+
</a>
258+
247259
**vscode**
248260

249261
<a href="https://uiwjs.github.io/react-codemirror/#/theme/data/vscode/dark">

‎themes/tokyo-night-day/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+
# TokyoNightDay Theme
4+
5+
<!--rehype:ignore:end-->
6+
7+
[![npm version](https://img.shields.io/npm/v/@uiw/codemirror-theme-tokyo-night-day.svg)](https://www.npmjs.com/package/@uiw/codemirror-theme-tokyo-night-day)
8+
9+
<a href="https://uiwjs.github.io/react-codemirror/#/theme/data/tokyo-night-day">
10+
<img width="436" alt="codemirror-theme-tokyo-night-day" src="https://user-images.githubusercontent.com/1680273/206104544-ca4db2e0-caac-4804-9321-c269fe660245.png">
11+
</a>
12+
13+
## Install
14+
15+
```bash
16+
npm install @uiw/codemirror-theme-tokyo-night-day --save
17+
```
18+
19+
```jsx
20+
import { tags as t } from '@lezer/highlight';
21+
import { tokyoNightDay, tokyoNightDayInit } from '@uiw/codemirror-theme-tokyo-night-day';
22+
23+
<CodeMirror theme={tokyoNightDay} />
24+
<CodeMirror
25+
theme={tokyoNightDayInit({
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 tokyoNightDayInit: (options?: CreateThemeOptions) => import('@codemirror/state').Extension;
42+
export declare const tokyoNightDay: import('@codemirror/state').Extension;
43+
```
44+
45+
## Usage
46+
47+
```jsx
48+
import CodeMirror from '@uiw/react-codemirror';
49+
import { tokyoNightDay } from '@uiw/codemirror-theme-tokyo-night-day';
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={tokyoNightDay}
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 { tokyoNightDay } from '@uiw/codemirror-theme-tokyo-night-day';
73+
74+
const state = EditorState.create({
75+
doc: 'my source code',
76+
extensions: [tokyoNightDay, 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-day/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-day",
3+
"version": "4.18.2",
4+
"description": "Theme tokyo-night-day for CodeMirror.",
5+
"homepage": "https://uiwjs.github.io/react-codemirror/#/theme/data/tokyo-night-day",
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-day",
32+
"syntax",
33+
"ide",
34+
"code"
35+
],
36+
"jest": {
37+
"coverageReporters": [
38+
"lcov",
39+
"json-summary"
40+
]
41+
}
42+
}

‎themes/tokyo-night-day/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 tokyoNightDayInit = (options?: CreateThemeOptions) => {
5+
const { theme = 'light', settings = {}, styles = [] } = options || {};
6+
return createTheme({
7+
theme: theme,
8+
settings: {
9+
background: '#e1e2e7',
10+
foreground: '#3760bf',
11+
caret: '#3760bf',
12+
selection: '#99a7df',
13+
selectionMatch: '#99a7df',
14+
gutterBackground: '#e1e2e7',
15+
gutterForeground: '#3760bf',
16+
gutterBorder: 'transparent',
17+
lineHighlight: '#5f5faf11',
18+
...settings,
19+
},
20+
styles: [
21+
{ tag: t.keyword, color: '#007197' },
22+
{ tag: [t.name, t.deleted, t.character, t.macroName], color: '#3760bf' },
23+
{ tag: [t.propertyName], color: '#3760bf' },
24+
{ tag: [t.processingInstruction, t.string, t.inserted, t.special(t.string)], color: '#587539' },
25+
{ tag: [t.function(t.variableName), t.labelName], color: '#3760bf' },
26+
{ tag: [t.color, t.constant(t.name), t.standard(t.name)], color: '#3760bf' },
27+
{ tag: [t.definition(t.name), t.separator], color: '#3760bf' },
28+
{ tag: [t.className], color: '#3760bf' },
29+
{ tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace], color: '#b15c00' },
30+
{ tag: [t.typeName], color: '#007197', fontStyle: '#007197' },
31+
{ tag: [t.operator, t.operatorKeyword], color: '#007197' },
32+
{ tag: [t.url, t.escape, t.regexp, t.link], color: '#587539' },
33+
{ tag: [t.meta, t.comment], color: '#848cb5' },
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: '#b15c00' },
38+
{ tag: [t.atom, t.bool, t.special(t.variableName)], color: '#3760bf' },
39+
{ tag: t.invalid, color: '#f52a65' },
40+
{ tag: t.strikethrough, textDecoration: 'line-through' },
41+
...styles,
42+
],
43+
});
44+
};
45+
46+
export const tokyoNightDay = tokyoNightDayInit();

‎themes/tokyo-night-day/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+
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
[![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)
88

99
<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">
10+
<img width="436" alt="codemirror-theme-tokyo-night-storm" src="https://user-images.githubusercontent.com/1680273/206097179-8a490b97-87da-4285-a9bc-b0c9f510e7ed.png">
1111
</a>
1212

1313
## Install

0 commit comments

Comments
 (0)