Skip to content

Commit bf24245

Browse files
jaywcjlovejaywcjlove
committedAug 25, 2023
feat(theme): add basic theme.
·
v4.23.10v4.21.10
1 parent 29dccc3 commit bf24245

File tree

14 files changed

+482
-459
lines changed

14 files changed

+482
-459
lines changed
 

‎.github/workflows/ci.yml

+7-459
Large diffs are not rendered by default.

‎themes/all/README.md

+11
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,7 @@ export * from '@uiw/codemirror-theme-abcdef';
6363
export * from '@uiw/codemirror-theme-androidstudio';
6464
export * from '@uiw/codemirror-theme-atomone';
6565
export * from '@uiw/codemirror-theme-aura';
66+
export * from '@uiw/codemirror-theme-basic';
6667
export * from '@uiw/codemirror-theme-bbedit';
6768
export * from '@uiw/codemirror-theme-bespin';
6869
export * from '@uiw/codemirror-theme-darcula';
@@ -110,6 +111,16 @@ export * from '@uiw/codemirror-theme-xcode';
110111
<img width="436" alt="codemirror-theme-aura" src="https://user-images.githubusercontent.com/1680273/206092773-8140fc6b-119f-4271-a821-7dc6bcbc1c63.png">
111112
</a>
112113

114+
**basic**
115+
116+
<a href="https://uiwjs.github.io/react-codemirror/#/theme/data/basic/dark">
117+
<img width="436" alt="codemirror-theme-basic dark" src="https://github.com/uiwjs/react-codemirror/assets/1680273/977c1271-eca1-4f61-ad90-3a89f4ea4871">
118+
</a>
119+
120+
<a href="https://uiwjs.github.io/react-codemirror/#/theme/data/basic/light">
121+
<img width="436" alt="codemirror-theme-basic light" src="https://github.com/uiwjs/react-codemirror/assets/1680273/e5b43612-5190-4d5b-ab7a-0f5d369ad7e4">
122+
</a>
123+
113124
**bbedit**
114125

115126
<a href="https://uiwjs.github.io/react-codemirror/#/theme/data/bbedit">

‎themes/all/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@
2525
"@uiw/codemirror-theme-androidstudio": "4.21.9",
2626
"@uiw/codemirror-theme-atomone": "4.21.9",
2727
"@uiw/codemirror-theme-aura": "4.21.9",
28+
"@uiw/codemirror-theme-basic": "4.21.9",
2829
"@uiw/codemirror-theme-bbedit": "4.21.9",
2930
"@uiw/codemirror-theme-bespin": "4.21.9",
3031
"@uiw/codemirror-theme-darcula": "4.21.9",

‎themes/basic/README.md

+106
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
<!--rehype:ignore:start-->
2+
3+
# Basic Theme (dark/light)
4+
5+
<!--rehype:ignore:end-->
6+
7+
[![npm version](https://img.shields.io/npm/v/@uiw/codemirror-theme-basic.svg)](https://www.npmjs.com/package/@uiw/codemirror-theme-basic)
8+
9+
<a href="https://uiwjs.github.io/react-codemirror/#/theme/data/basic/dark">
10+
<img width="436" alt="codemirror-theme-basic dark" src="https://github.com/uiwjs/react-codemirror/assets/1680273/977c1271-eca1-4f61-ad90-3a89f4ea4871">
11+
</a>
12+
13+
<a href="https://uiwjs.github.io/react-codemirror/#/theme/data/basic/light">
14+
<img width="436" alt="codemirror-theme-basic light" src="https://github.com/uiwjs/react-codemirror/assets/1680273/e5b43612-5190-4d5b-ab7a-0f5d369ad7e4">
15+
</a>
16+
17+
## Install
18+
19+
```bash
20+
npm install @uiw/codemirror-theme-basic --save
21+
```
22+
23+
```jsx
24+
import { basicLight, basicLightInit, basicDark, basicDarkInit } from '@uiw/codemirror-theme-basic';
25+
// Or
26+
import { basicDark, basicDarkInit } from '@uiw/codemirror-theme-basic/dark';
27+
import { basicLight, basicLightInit } from '@uiw/codemirror-theme-basic/light';
28+
29+
<CodeMirror theme={basicLight} />
30+
<CodeMirror
31+
theme={basicLightInit({
32+
settings: {
33+
caret: '#c6c6c6',
34+
fontFamily: 'monospace',
35+
}
36+
})}
37+
/>
38+
```
39+
40+
## API
41+
42+
```tsx
43+
import { CreateThemeOptions } from '@uiw/codemirror-themes';
44+
export declare const defaultSettingsBasicLight: CreateThemeOptions['settings'];
45+
export declare const basicLightInit: (options?: Partial<CreateThemeOptions>) => import('@codemirror/state').Extension;
46+
export declare const basicLight: import('@codemirror/state').Extension;
47+
export declare const defaultSettingsBasicDark: CreateThemeOptions['settings'];
48+
export declare const basicDarkInit: (options?: Partial<CreateThemeOptions>) => import('@codemirror/state').Extension;
49+
export declare const basicDark: import('@codemirror/state').Extension;
50+
```
51+
52+
## Usage
53+
54+
```jsx
55+
import CodeMirror from '@uiw/react-codemirror';
56+
import { basicLight, basicDark } from '@uiw/codemirror-theme-basic';
57+
import { javascript } from '@codemirror/lang-javascript';
58+
59+
function App() {
60+
return (
61+
<CodeMirror
62+
value="console.log('hello world!');"
63+
height="200px"
64+
theme={basicLight}
65+
extensions={[javascript({ jsx: true })]}
66+
onChange={(value, viewUpdate) => {
67+
console.log('value:', value);
68+
}}
69+
/>
70+
);
71+
}
72+
export default App;
73+
```
74+
75+
```js
76+
import { EditorView } from '@codemirror/view';
77+
import { EditorState } from '@codemirror/state';
78+
import { javascript } from '@codemirror/lang-javascript';
79+
import { basicLight, basicDark } from '@uiw/codemirror-theme-basic';
80+
81+
const state = EditorState.create({
82+
doc: 'my source code',
83+
extensions: [basicDark, javascript({ jsx: true })],
84+
});
85+
86+
const view = new EditorView({
87+
parent: document.querySelector('#editor'),
88+
state,
89+
});
90+
```
91+
92+
## Contributors
93+
94+
As always, thanks to our amazing contributors!
95+
96+
<a href="https://github.com/uiwjs/react-codemirror/graphs/contributors">
97+
<img src="https://uiwjs.github.io/react-codemirror/CONTRIBUTORS.svg" />
98+
</a>
99+
100+
Made with [github-action-contributors](https://github.com/jaywcjlove/github-action-contributors).
101+
102+
## License
103+
104+
Licensed under the MIT License.
105+
106+
by Bram de Haan, adapted from DuoTone themes by Simurai (http://simurai.com/projects/2016/01/01/duotone-themes)

‎themes/basic/dark.d.ts

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
declare module '@uiw/codemirror-theme-basic/dark' {
2+
import { CreateThemeOptions } from '@uiw/codemirror-themes';
3+
export const defaultSettingsBasicDark: CreateThemeOptions['settings'];
4+
export const basicDarkInit: (options?: Partial<CreateThemeOptions>) => import('@codemirror/state').Extension;
5+
export const basicDark: import('@codemirror/state').Extension;
6+
}

‎themes/basic/light.d.ts

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
declare module '@uiw/codemirror-theme-basic/light' {
2+
import { CreateThemeOptions } from '@uiw/codemirror-themes';
3+
export const defaultSettingsBasicLight: CreateThemeOptions['settings'];
4+
export const basicLightInit: (options?: Partial<CreateThemeOptions>) => import('@codemirror/state').Extension;
5+
export const basicLight: import('@codemirror/state').Extension;
6+
}

‎themes/basic/package.json

+59
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
{
2+
"name": "@uiw/codemirror-theme-basic",
3+
"version": "4.21.9",
4+
"description": "Theme basic for CodeMirror.",
5+
"homepage": "https://uiwjs.github.io/react-codemirror/#/theme/data/basic/light",
6+
"author": "kenny wong <wowohoo@qq.com>",
7+
"license": "MIT",
8+
"main": "./cjs/index.js",
9+
"module": "./esm/index.js",
10+
"exports": {
11+
"./README.md": "./README.md",
12+
".": {
13+
"import": "./esm/index.js",
14+
"types": "./cjs/index.d.ts",
15+
"require": "./cjs/index.js"
16+
},
17+
"./light": {
18+
"import": "./esm/light.js",
19+
"types": "./cjs/light.d.ts",
20+
"require": "./cjs/light.js"
21+
},
22+
"./dark": {
23+
"import": "./esm/dark.js",
24+
"types": "./cjs/dark.d.ts",
25+
"require": "./cjs/dark.js"
26+
}
27+
},
28+
"scripts": {
29+
"watch": "tsbb watch src/*.ts --use-babel",
30+
"build": "tsbb build src/*.ts --use-babel"
31+
},
32+
"repository": {
33+
"type": "git",
34+
"url": "https://github.com/uiwjs/react-codemirror.git"
35+
},
36+
"files": [
37+
"src",
38+
"esm",
39+
"cjs"
40+
],
41+
"dependencies": {
42+
"@uiw/codemirror-themes": "4.21.9"
43+
},
44+
"keywords": [
45+
"codemirror",
46+
"codemirror6",
47+
"theme",
48+
"basic",
49+
"syntax",
50+
"ide",
51+
"code"
52+
],
53+
"jest": {
54+
"coverageReporters": [
55+
"lcov",
56+
"json-summary"
57+
]
58+
}
59+
}

‎themes/basic/src/dark.ts

+123
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
import { tags as t } from '@lezer/highlight';
2+
import { createTheme, CreateThemeOptions } from '@uiw/codemirror-themes';
3+
4+
export const defaultSettingsBasicDark: CreateThemeOptions['settings'] = {
5+
background: '#2E3235',
6+
foreground: '#DDDDDD',
7+
caret: '#DDDDDD',
8+
selection: '#202325',
9+
selectionMatch: '#B9D2FF30',
10+
gutterBackground: '#292d30',
11+
gutterForeground: '#808080',
12+
gutterBorder: '1px solid #ffffff10',
13+
lineHighlight: '#B9D2FF30',
14+
};
15+
16+
export const basicDarkInit = (options?: Partial<CreateThemeOptions>) => {
17+
const { theme = 'dark', settings = {}, styles = [] } = options || {};
18+
return createTheme({
19+
theme: theme,
20+
settings: {
21+
...defaultSettingsBasicDark,
22+
...settings,
23+
},
24+
styles: [
25+
{ tag: t.keyword, color: '#fda331' },
26+
{
27+
tag: [t.name, t.deleted, t.character, t.propertyName, t.macroName],
28+
color: '#b5bd68',
29+
},
30+
{ tag: [t.variableName], color: '#6fb3d2' },
31+
{ tag: [t.function(t.variableName)], color: '#fda331' },
32+
{ tag: [t.labelName], color: '#fc6d24' },
33+
{
34+
tag: [t.color, t.constant(t.name), t.standard(t.name)],
35+
color: '#fda331',
36+
},
37+
{ tag: [t.definition(t.name), t.separator], color: '#cc99cc' },
38+
{ tag: [t.brace], color: '#cc99cc' },
39+
{
40+
tag: [t.annotation],
41+
color: '#fc6d24',
42+
},
43+
{
44+
tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace],
45+
color: '#fda331',
46+
},
47+
{
48+
tag: [t.typeName, t.className],
49+
color: '#6fb3d2',
50+
},
51+
{
52+
tag: [t.operator, t.operatorKeyword],
53+
color: '#cc99cc',
54+
},
55+
{
56+
tag: [t.tagName],
57+
color: '#fda331',
58+
},
59+
{
60+
tag: [t.squareBracket],
61+
color: '#cc99cc',
62+
},
63+
{
64+
tag: [t.angleBracket],
65+
color: '#cc99cc',
66+
},
67+
{
68+
tag: [t.attributeName],
69+
color: '#6fb3d2',
70+
},
71+
{
72+
tag: [t.regexp],
73+
color: '#fda331',
74+
},
75+
{
76+
tag: [t.quote],
77+
color: '#DDDDDD',
78+
},
79+
{ tag: [t.string], color: '#b5bd68' },
80+
{
81+
tag: t.link,
82+
color: '#6987AF',
83+
textDecoration: 'underline',
84+
textUnderlinePosition: 'under',
85+
},
86+
{
87+
tag: [t.url, t.escape, t.special(t.string)],
88+
color: '#8abeb7',
89+
},
90+
{ tag: [t.meta], color: '#A54543' },
91+
{ tag: [t.comment], color: '#808080', fontStyle: 'italic' },
92+
{ tag: t.monospace, color: '#DDDDDD' },
93+
{ tag: t.strong, fontWeight: 'bold', color: '#fda331' },
94+
{ tag: t.emphasis, fontStyle: 'italic', color: '#6fb3d2' },
95+
{ tag: t.strikethrough, textDecoration: 'line-through' },
96+
{ tag: t.heading, fontWeight: 'bold', color: '#DDDDDD' },
97+
{ tag: t.special(t.heading1), fontWeight: 'bold', color: '#DDDDDD' },
98+
{ tag: t.heading1, fontWeight: 'bold', color: '#DDDDDD' },
99+
{
100+
tag: [t.heading2, t.heading3, t.heading4],
101+
fontWeight: 'bold',
102+
color: '#DDDDDD',
103+
},
104+
{
105+
tag: [t.heading5, t.heading6],
106+
color: '#DDDDDD',
107+
},
108+
{ tag: [t.atom, t.bool, t.special(t.variableName)], color: '#8abeb7' },
109+
{
110+
tag: [t.processingInstruction, t.inserted],
111+
color: '#8abeb7',
112+
},
113+
{
114+
tag: [t.contentSeparator],
115+
color: '#6fb3d2',
116+
},
117+
{ tag: t.invalid, color: '#B9D2FF', borderBottom: `1px dotted ${'#fc6d24'}` },
118+
...styles,
119+
],
120+
});
121+
};
122+
123+
export const basicDark = basicDarkInit();

‎themes/basic/src/index.ts

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export * from './dark';
2+
export * from './light';

‎themes/basic/src/light.ts

+122
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
import { tags as t } from '@lezer/highlight';
2+
import { createTheme, CreateThemeOptions } from '@uiw/codemirror-themes';
3+
4+
export const defaultSettingsBasicLight: CreateThemeOptions['settings'] = {
5+
background: '#ffffff',
6+
foreground: '#2e3440',
7+
caret: '#3b4252',
8+
selection: '#eceff4',
9+
selectionMatch: '#e5e9f0',
10+
gutterBackground: '#eceff4',
11+
gutterForeground: '#2e3440',
12+
gutterBorder: 'none',
13+
lineHighlight: '#eceff4',
14+
};
15+
16+
export const basicLightInit = (options?: Partial<CreateThemeOptions>) => {
17+
const { theme = 'light', settings = {}, styles = [] } = options || {};
18+
return createTheme({
19+
theme: theme,
20+
settings: {
21+
...defaultSettingsBasicLight,
22+
...settings,
23+
},
24+
styles: [
25+
{ tag: t.keyword, color: '#5e81ac' },
26+
{
27+
tag: [t.name, t.deleted, t.character, t.propertyName, t.macroName],
28+
color: '#d08770',
29+
},
30+
{ tag: [t.variableName], color: '#d08770' },
31+
{ tag: [t.function(t.variableName)], color: '#5e81ac' },
32+
{ tag: [t.labelName], color: '#81a1c1' },
33+
{
34+
tag: [t.color, t.constant(t.name), t.standard(t.name)],
35+
color: '#5e81ac',
36+
},
37+
{ tag: [t.definition(t.name), t.separator], color: '#a3be8c' },
38+
{ tag: [t.brace], color: '#8fbcbb' },
39+
{
40+
tag: [t.annotation],
41+
color: '#d30102',
42+
},
43+
{
44+
tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace],
45+
color: '#88c0d0',
46+
},
47+
{
48+
tag: [t.typeName, t.className],
49+
color: '#ebcb8b',
50+
},
51+
{
52+
tag: [t.operator, t.operatorKeyword],
53+
color: '#a3be8c',
54+
},
55+
{
56+
tag: [t.tagName],
57+
color: '#b48ead',
58+
},
59+
{
60+
tag: [t.squareBracket],
61+
color: '#bf616a',
62+
},
63+
{
64+
tag: [t.angleBracket],
65+
color: '#d08770',
66+
},
67+
{
68+
tag: [t.attributeName],
69+
color: '#ebcb8b',
70+
},
71+
{
72+
tag: [t.regexp],
73+
color: '#5e81ac',
74+
},
75+
{
76+
tag: [t.quote],
77+
color: '#3b4252',
78+
},
79+
{ tag: [t.string], color: '#d08770' },
80+
{
81+
tag: t.link,
82+
color: '#8fbcbb',
83+
textDecoration: 'underline',
84+
textUnderlinePosition: 'under',
85+
},
86+
{
87+
tag: [t.url, t.escape, t.special(t.string)],
88+
color: '#d08770',
89+
},
90+
{ tag: [t.meta], color: '#88c0d0' },
91+
{ tag: [t.comment], color: '#434c5e', fontStyle: 'italic' },
92+
{ tag: t.strong, fontWeight: 'bold', color: '#5e81ac' },
93+
{ tag: t.emphasis, fontStyle: 'italic', color: '#5e81ac' },
94+
{ tag: t.strikethrough, textDecoration: 'line-through' },
95+
{ tag: t.heading, fontWeight: 'bold', color: '#5e81ac' },
96+
{ tag: t.special(t.heading1), fontWeight: 'bold', color: '#5e81ac' },
97+
{ tag: t.heading1, fontWeight: 'bold', color: '#5e81ac' },
98+
{
99+
tag: [t.heading2, t.heading3, t.heading4],
100+
fontWeight: 'bold',
101+
color: '#5e81ac',
102+
},
103+
{
104+
tag: [t.heading5, t.heading6],
105+
color: '#5e81ac',
106+
},
107+
{ tag: [t.atom, t.bool, t.special(t.variableName)], color: '#d08770' },
108+
{
109+
tag: [t.processingInstruction, t.inserted],
110+
color: '#8fbcbb',
111+
},
112+
{
113+
tag: [t.contentSeparator],
114+
color: '#ebcb8b',
115+
},
116+
{ tag: t.invalid, color: '#434c5e', borderBottom: '1px dotted #d30102' },
117+
...styles,
118+
],
119+
});
120+
};
121+
122+
export const basicLight = basicLightInit();

‎themes/basic/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
@@ -48,6 +48,7 @@
4848
"@uiw/codemirror-theme-androidstudio": "4.21.9",
4949
"@uiw/codemirror-theme-atomone": "4.21.9",
5050
"@uiw/codemirror-theme-aura": "4.21.9",
51+
"@uiw/codemirror-theme-basic": "4.21.9",
5152
"@uiw/codemirror-theme-bbedit": "4.21.9",
5253
"@uiw/codemirror-theme-bespin": "4.21.9",
5354
"@uiw/codemirror-theme-darcula": "4.21.9",

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

+3
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { abcdef } from '@uiw/codemirror-theme-abcdef';
22
import { androidstudio } from '@uiw/codemirror-theme-androidstudio';
33
import { atomone } from '@uiw/codemirror-theme-atomone';
44
import { aura } from '@uiw/codemirror-theme-aura';
5+
import { basicLight, basicDark } from '@uiw/codemirror-theme-basic';
56
import { bbedit } from '@uiw/codemirror-theme-bbedit';
67
import { dracula } from '@uiw/codemirror-theme-dracula';
78
import { darcula } from '@uiw/codemirror-theme-darcula';
@@ -27,6 +28,8 @@ export const themeData = {
2728
androidstudio,
2829
atomone,
2930
aura,
31+
basicLight,
32+
basicDark,
3033
bbedit,
3134
bespin,
3235
darcula,

‎www/src/router.tsx

+26
Original file line numberDiff line numberDiff line change
@@ -237,6 +237,32 @@ export const routes: MenuRouteObject[] = [
237237
/>
238238
),
239239
},
240+
{
241+
path: 'data/basic',
242+
element: <Navigate to="light" replace />,
243+
},
244+
{
245+
path: 'data/basic/light',
246+
label: 'Basic Light',
247+
element: (
248+
<Preview
249+
mode="light"
250+
themePkg="@uiw/codemirror-theme-basic"
251+
path={() => import('@uiw/codemirror-theme-basic/README.md')}
252+
/>
253+
),
254+
},
255+
{
256+
path: 'data/basic/dark',
257+
label: 'Basic Dark',
258+
element: (
259+
<Preview
260+
mode="dark"
261+
themePkg="@uiw/codemirror-theme-basic"
262+
path={() => import('@uiw/codemirror-theme-basic/README.md')}
263+
/>
264+
),
265+
},
240266
{
241267
path: 'data/bespin',
242268
label: 'bespin',

0 commit comments

Comments
 (0)
Please sign in to comment.