Skip to content

Commit 6f5a908

Browse files
jaywcjlovejaywcjlove
committedDec 7, 2022
feat(theme): add tokyoNightDay theme.
·
v4.23.10v4.19.0
1 parent e67f5ee commit 6f5a908

File tree

16 files changed

+254
-11
lines changed

16 files changed

+254
-11
lines changed
 

‎core/README.md

+1
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

+2
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

+1
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

+1
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

+12
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

+97
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

+42
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 <wowohoo@qq.com>",
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

+46
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

+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/tokyo-night-storm/README.md

+1-1
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

‎www/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,7 @@
6363
"@uiw/codemirror-theme-sublime": "4.18.2",
6464
"@uiw/codemirror-theme-tokyo-night": "4.18.2",
6565
"@uiw/codemirror-theme-tokyo-night-storm": "4.18.2",
66+
"@uiw/codemirror-theme-tokyo-night-day": "4.18.2",
6667
"@uiw/codemirror-theme-vscode": "4.18.2",
6768
"@uiw/codemirror-theme-xcode": "4.18.2",
6869
"@uiw/codemirror-themes": "4.18.2",

‎www/src/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@ root.render(
7575
<Route index element={<ThemesHome />} />
7676
<Route path="data" element={<Navigate to="sublime" replace />} />
7777
<Route path="data/:name" element={<ThemeOkaidia />} />
78-
<Route path="data/:name/:lightOrDark" element={<ThemeOkaidia />} />
78+
<Route path="data/:name/*" element={<ThemeOkaidia />} />
7979
<Route path="editor" element={<Navigate to="single" replace />} />
8080
<Route path="editor/:type" element={<ThemeEditor />} />
8181
<Route path="doc" element={<ThemeDoc />} />

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

+6
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,8 @@ import eclipseMd from '@uiw/codemirror-theme-eclipse/README.md';
1717
import bespinMd from '@uiw/codemirror-theme-bespin/README.md';
1818
import sublimeMd from '@uiw/codemirror-theme-sublime/README.md';
1919
import tokyoNightMd from '@uiw/codemirror-theme-tokyo-night/README.md';
20+
import tokyoNightStormMd from '@uiw/codemirror-theme-tokyo-night-storm/README.md';
21+
import tokyoNightDayMd from '@uiw/codemirror-theme-tokyo-night-day/README.md';
2022
import vscodeMd from '@uiw/codemirror-theme-vscode/README.md';
2123
import xcodeMd from '@uiw/codemirror-theme-xcode/README.md';
2224

@@ -41,6 +43,7 @@ import { solarizedLight, solarizedDark } from '@uiw/codemirror-theme-solarized';
4143
import { sublime } from '@uiw/codemirror-theme-sublime';
4244
import { tokyoNight } from '@uiw/codemirror-theme-tokyo-night';
4345
import { tokyoNightStorm } from '@uiw/codemirror-theme-tokyo-night-storm';
46+
import { tokyoNightDay } from '@uiw/codemirror-theme-tokyo-night-day';
4447
import { xcodeLight, xcodeDark } from '@uiw/codemirror-theme-xcode';
4548

4649
export const mdSource = {
@@ -67,6 +70,8 @@ export const mdSource = {
6770
solarizedDark: solarizedMd.source,
6871
sublime: sublimeMd.source,
6972
tokyoNight: tokyoNightMd.source,
73+
tokyoNightStorm: tokyoNightStormMd.source,
74+
tokyoNightDay: tokyoNightDayMd.source,
7075
vscodeDark: vscodeMd.source,
7176
xcodeLight: xcodeMd.source,
7277
xcodeDark: xcodeMd.source,
@@ -97,6 +102,7 @@ export const themeData = {
97102
sublime,
98103
tokyoNight,
99104
tokyoNightStorm,
105+
tokyoNightDay,
100106
vscodeDark,
101107
xcodeLight,
102108
xcodeDark,

‎www/src/pages/theme/themes/Document.tsx

+8-2
Original file line numberDiff line numberDiff line change
@@ -48,12 +48,18 @@ export const Document: FC<PropsWithChildren<DocumentProps>> = ({ children, theme
4848
}
4949
}, [themeName]);
5050

51-
const [_name] = toSnakeCase(themeName) || [];
51+
let pkgName: string | undefined = themeName;
52+
if (/(gruvbox)/i.test(themeName || '')) {
53+
pkgName = themeName?.replace(/\s+?(dark|light)/gi, ' dark');
54+
} else {
55+
pkgName = themeName?.replace(/\s+?(dark|light)/gi, '');
56+
}
57+
const _name = toSnakeCase(pkgName || '') || [];
5258
return (
5359
<Warpper>
5460
<Header>
5561
<Title>{themeName} Theme</Title>
56-
<PreCode value={`npm install @uiw/codemirror-theme-${_name} --save`} />
62+
<PreCode value={`npm install @uiw/codemirror-theme-${_name.join('-')} --save`} />
5763
<div>
5864
<Button onClick={() => setPreviewDoc(!previewDoc)}>
5965
{previewDoc ? 'Preview Theme' : 'Preview Document'}

‎www/src/pages/theme/themes/SiderMenus.tsx

+10-3
Original file line numberDiff line numberDiff line change
@@ -27,10 +27,17 @@ export function SiderMenus() {
2727
<Sider>
2828
<MenuItem to={`/theme/`}>Home</MenuItem>
2929
{Object.keys(themeData).map((name, key) => {
30-
const [_name, _theme] = toSnakeCase(name) || [];
30+
const [_name, _theme, ...other] = toSnakeCase(name) || [];
31+
const title = [_name, _theme, ...other]
32+
.filter(Boolean)
33+
.map((item) => item?.slice(0, 1).toUpperCase() + item?.slice(1).toLowerCase())
34+
.join(' ');
3135
return (
32-
<MenuItem key={key} to={`/theme/data/${_name}${_theme ? `/${_theme}` : ''}`}>
33-
{_name} {_theme}
36+
<MenuItem
37+
key={key}
38+
to={`/theme/data/${_name}${_theme ? `/${_theme}` : ''}${other ? `/${other.join('/')}` : ''}`}
39+
>
40+
{title}
3441
</MenuItem>
3542
);
3643
})}

‎www/src/pages/theme/themes/index.tsx

+16-4
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,26 @@ import { Sample } from './Sample';
55
import { themeData } from './Datas';
66
import { SiderMenus } from './SiderMenus';
77

8+
export const toCamelCase = (str: string = '') => {
9+
const s =
10+
str
11+
.match(/[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g)
12+
?.map((x) => x.slice(0, 1).toUpperCase() + x.slice(1).toLowerCase())
13+
.join('') || '';
14+
return s.slice(0, 1).toLowerCase() + s.slice(1);
15+
};
16+
817
export const ThemeOkaidia = () => {
9-
const { name = '', lightOrDark = '' } = useParams();
10-
const text = name + lightOrDark.replace(lightOrDark[0], (lightOrDark[0] || '').toLocaleUpperCase());
11-
const theme = themeData[text as keyof typeof themeData];
18+
const { name = '', ...other } = useParams();
19+
const textName = (name + '/' + (other['*'] || ''))
20+
.split('/')
21+
.filter(Boolean)
22+
.map((item) => item?.slice(0, 1).toUpperCase() + item?.slice(1).toLowerCase());
23+
const theme = themeData[toCamelCase(textName.join(' ')) as keyof typeof themeData];
1224
return (
1325
<Fragment>
1426
<SiderMenus />
15-
<Document themeName={text}>
27+
<Document themeName={textName.join(' ')}>
1628
<Sample theme={theme} />
1729
</Document>
1830
</Fragment>

0 commit comments

Comments
 (0)
Please sign in to comment.