Skip to content

Commit d6899db

Browse files
jaywcjlovejaywcjlove
committed
feat(theme): add solarized theme.
1 parent 18c1977 commit d6899db

File tree

13 files changed

+367
-2
lines changed

13 files changed

+367
-2
lines changed

‎core/README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,7 @@ npm install @uiw/react-codemirror --save
6767
| `@uiw/codemirror-theme-material` | [![npm version](https://img.shields.io/npm/v/@uiw/codemirror-theme-material.svg)](https://www.npmjs.com/package/@uiw/codemirror-theme-material) [![NPM Downloads](https://img.shields.io/npm/dm/@uiw/codemirror-theme-material.svg?style=flat)](https://www.npmjs.com/package/@uiw/codemirror-theme-material) | [`#preview`](https://uiwjs.github.io/react-codemirror/#/theme/data/material) |
6868
| `@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) |
6969
| `@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) |
70+
| `@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) |
7071
| `@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) |
7172
| `@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) |
7273
| `@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) |

‎themes/all/README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,7 @@ export * from '@uiw/codemirror-theme-gruvbox-dark';
7373
export * from '@uiw/codemirror-theme-material';
7474
export * from '@uiw/codemirror-theme-nord';
7575
export * from '@uiw/codemirror-theme-okaidia';
76+
export * from '@uiw/codemirror-theme-solarized';
7677
export * from '@uiw/codemirror-theme-sublime';
7778
export * from '@uiw/codemirror-theme-vscode';
7879
export * from '@uiw/codemirror-theme-xcode';

‎themes/all/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@
3535
"@uiw/codemirror-theme-material": "4.16.0",
3636
"@uiw/codemirror-theme-nord": "4.16.0",
3737
"@uiw/codemirror-theme-okaidia": "4.16.0",
38+
"@uiw/codemirror-theme-solarized": "4.16.0",
3839
"@uiw/codemirror-theme-sublime": "4.16.0",
3940
"@uiw/codemirror-theme-vscode": "4.16.0",
4041
"@uiw/codemirror-theme-xcode": "4.16.0",

‎themes/all/src/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ export * from '@uiw/codemirror-theme-gruvbox-dark';
1212
export * from '@uiw/codemirror-theme-material';
1313
export * from '@uiw/codemirror-theme-nord';
1414
export * from '@uiw/codemirror-theme-okaidia';
15+
export * from '@uiw/codemirror-theme-solarized';
1516
export * from '@uiw/codemirror-theme-sublime';
1617
export * from '@uiw/codemirror-theme-vscode';
1718
export * from '@uiw/codemirror-theme-xcode';

‎themes/material/README.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@
66

77
[![npm version](https://img.shields.io/npm/v/@uiw/codemirror-theme-material.svg)](https://www.npmjs.com/package/@uiw/codemirror-theme-material)
88

9+
This package implements the [Material](https://material.io/tools/color/) Dark theme for the CodeMirror code editor.
10+
911
<a href="https://uiwjs.github.io/react-codemirror/#/theme/data/material">
1012
<img width="436" alt="codemirror-theme-material" src="https://user-images.githubusercontent.com/1680273/205537793-79f9c99c-831a-4ce3-8189-78b42896656f.png">
1113
</a>

‎themes/nord/README.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@
66

77
[![npm version](https://img.shields.io/npm/v/@uiw/codemirror-theme-nord.svg)](https://www.npmjs.com/package/@uiw/codemirror-theme-nord)
88

9+
This package implements the [nord theme](https://www.nordtheme.com/) for the CodeMirror code editor.
10+
911
<a href="https://uiwjs.github.io/react-codemirror/#/theme/data/nord">
1012
<img width="436" alt="codemirror-theme-nord" src="https://user-images.githubusercontent.com/1680273/205498304-956bc719-1472-40f0-9c3f-21ac5b9f97a6.png">
1113
</a>

‎themes/solarized/README.md

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
<!--rehype:ignore:start-->
2+
3+
# Solarized Theme
4+
5+
<!--rehype:ignore:end-->
6+
7+
[![npm version](https://img.shields.io/npm/v/@uiw/codemirror-theme-solarized.svg)](https://www.npmjs.com/package/@uiw/codemirror-theme-solarized)
8+
9+
This package implements the [Solarized](https://ethanschoonover.com/solarized/) theme for the CodeMirror code editor.
10+
11+
<a href="https://uiwjs.github.io/react-codemirror/#/theme/data/solarized/light">
12+
<img width="436" alt="codemirror-theme-solarized" src="https://user-images.githubusercontent.com/1680273/205544435-a080d1d4-6da9-4f1d-aa10-5f2207d31176.png">
13+
</a>
14+
15+
<a href="https://uiwjs.github.io/react-codemirror/#/theme/data/solarized/dark">
16+
<img width="436" alt="codemirror-theme-solarized" src="https://user-images.githubusercontent.com/1680273/205547403-96db62c3-d061-4dee-88d0-c86ed17e7489.png">
17+
</a>
18+
19+
## Install
20+
21+
```bash
22+
npm install @uiw/codemirror-theme-solarized --save
23+
```
24+
25+
## Usage
26+
27+
```jsx
28+
import CodeMirror from '@uiw/react-codemirror';
29+
import { solarizedLight, solarizedDark } from '@uiw/codemirror-theme-solarized';
30+
import { javascript } from '@codemirror/lang-javascript';
31+
32+
function App() {
33+
return (
34+
<CodeMirror
35+
value="console.log('hello world!');"
36+
height="200px"
37+
theme={solarizedLight}
38+
extensions={[javascript({ jsx: true })]}
39+
/>
40+
);
41+
}
42+
export default App;
43+
```
44+
45+
```js
46+
import { EditorView } from '@codemirror/view';
47+
import { EditorState } from '@codemirror/state';
48+
import { javascript } from '@codemirror/lang-javascript';
49+
import { solarizedLight, solarizedDark } from '@uiw/codemirror-theme-solarized';
50+
51+
const state = EditorState.create({
52+
doc: 'my source code',
53+
extensions: [solarizedLight, javascript({ jsx: true })],
54+
});
55+
56+
const view = new EditorView({
57+
parent: document.querySelector('#editor'),
58+
state,
59+
});
60+
```
61+
62+
## Contributors
63+
64+
As always, thanks to our amazing contributors!
65+
66+
<a href="https://github.com/uiwjs/react-codemirror/graphs/contributors">
67+
<img src="https://uiwjs.github.io/react-codemirror/CONTRIBUTORS.svg" />
68+
</a>
69+
70+
Made with [github-action-contributors](https://github.com/jaywcjlove/github-action-contributors).
71+
72+
## License
73+
74+
Licensed under the MIT License.

‎themes/solarized/package.json

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
{
2+
"name": "@uiw/codemirror-theme-solarized",
3+
"version": "4.16.0",
4+
"description": "Theme solarized for CodeMirror.",
5+
"homepage": "https://uiwjs.github.io/react-codemirror/#/theme/data/solarized",
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.16.0"
25+
},
26+
"keywords": [
27+
"codemirror",
28+
"codemirror6",
29+
"theme",
30+
"solarized",
31+
"syntax",
32+
"ide",
33+
"code"
34+
],
35+
"jest": {
36+
"coverageReporters": [
37+
"lcov",
38+
"json-summary"
39+
]
40+
}
41+
}

‎themes/solarized/src/index.ts

Lines changed: 216 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,216 @@
1+
import { tags as t } from '@lezer/highlight';
2+
import { createTheme } from '@uiw/codemirror-themes';
3+
4+
export const solarizedLight = createTheme({
5+
theme: 'light',
6+
settings: {
7+
background: '#fdf6e3',
8+
foreground: '#657b83',
9+
caret: '#586e75',
10+
selection: '#dfd9c8',
11+
selectionMatch: '#dfd9c8',
12+
gutterBackground: '#00000010',
13+
gutterForeground: '#657b83',
14+
lineHighlight: '#dfd9c8',
15+
},
16+
styles: [
17+
{ tag: t.keyword, color: '#859900' },
18+
{
19+
tag: [t.name, t.deleted, t.character, t.propertyName, t.macroName],
20+
color: '#2aa198',
21+
},
22+
{ tag: [t.variableName], color: '#268bd2' },
23+
{ tag: [t.function(t.variableName)], color: '#268bd2' },
24+
{ tag: [t.labelName], color: '#d33682' },
25+
{
26+
tag: [t.color, t.constant(t.name), t.standard(t.name)],
27+
color: '#b58900',
28+
},
29+
{ tag: [t.definition(t.name), t.separator], color: '#2aa198' },
30+
{ tag: [t.brace], color: '#d33682' },
31+
{
32+
tag: [t.annotation],
33+
color: '#d30102',
34+
},
35+
{
36+
tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace],
37+
color: '#d33682',
38+
},
39+
{
40+
tag: [t.typeName, t.className],
41+
color: '#cb4b16',
42+
},
43+
{
44+
tag: [t.operator, t.operatorKeyword],
45+
color: '#6c71c4',
46+
},
47+
{
48+
tag: [t.tagName],
49+
color: '#268bd2',
50+
},
51+
{
52+
tag: [t.squareBracket],
53+
color: '#dc322f',
54+
},
55+
{
56+
tag: [t.angleBracket],
57+
color: '#073642',
58+
},
59+
{
60+
tag: [t.attributeName],
61+
color: '#93a1a1',
62+
},
63+
{
64+
tag: [t.regexp],
65+
color: '#d30102',
66+
},
67+
{
68+
tag: [t.quote],
69+
color: '#859900',
70+
},
71+
{ tag: [t.string], color: '#b58900' },
72+
{
73+
tag: t.link,
74+
color: '#2aa198',
75+
textDecoration: 'underline',
76+
textUnderlinePosition: 'under',
77+
},
78+
{
79+
tag: [t.url, t.escape, t.special(t.string)],
80+
color: '#b58900',
81+
},
82+
{ tag: [t.meta], color: '#dc322f' },
83+
{ tag: [t.comment], color: '#586e75', fontStyle: 'italic' },
84+
{ tag: t.strong, fontWeight: 'bold', color: '#586e75' },
85+
{ tag: t.emphasis, fontStyle: 'italic', color: '#859900' },
86+
{ tag: t.strikethrough, textDecoration: 'line-through' },
87+
{ tag: t.heading, fontWeight: 'bold', color: '#b58900' },
88+
{ tag: t.heading1, fontWeight: 'bold', color: '#002b36' },
89+
{
90+
tag: [t.heading2, t.heading3, t.heading4],
91+
fontWeight: 'bold',
92+
color: '#002b36',
93+
},
94+
{
95+
tag: [t.heading5, t.heading6],
96+
color: '#002b36',
97+
},
98+
{ tag: [t.atom, t.bool, t.special(t.variableName)], color: '#d33682' },
99+
{
100+
tag: [t.processingInstruction, t.inserted, t.contentSeparator],
101+
color: '#dc322f',
102+
},
103+
{
104+
tag: [t.contentSeparator],
105+
color: '#b58900',
106+
},
107+
{ tag: t.invalid, color: '#073642', borderBottom: `1px dotted #dc322f` },
108+
],
109+
});
110+
111+
export const solarizedDark = createTheme({
112+
theme: 'dark',
113+
settings: {
114+
background: '#002b36',
115+
foreground: '#93a1a1',
116+
caret: '#839496',
117+
selection: '#173541',
118+
selectionMatch: '#aafe661a',
119+
gutterBackground: '#00252f',
120+
gutterForeground: '#839496',
121+
lineHighlight: '#173541',
122+
},
123+
styles: [
124+
{ tag: t.keyword, color: '#859900' },
125+
{
126+
tag: [t.name, t.deleted, t.character, t.propertyName, t.macroName],
127+
color: '#2aa198',
128+
},
129+
{ tag: [t.variableName], color: '#93a1a1' },
130+
{ tag: [t.function(t.variableName)], color: '#268bd2' },
131+
{ tag: [t.labelName], color: '#d33682' },
132+
{
133+
tag: [t.color, t.constant(t.name), t.standard(t.name)],
134+
color: '#b58900',
135+
},
136+
{ tag: [t.definition(t.name), t.separator], color: '#2aa198' },
137+
{ tag: [t.brace], color: '#d33682' },
138+
{
139+
tag: [t.annotation],
140+
color: '#d30102',
141+
},
142+
{
143+
tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace],
144+
color: '#d33682',
145+
},
146+
{
147+
tag: [t.typeName, t.className],
148+
color: '#cb4b16',
149+
},
150+
{
151+
tag: [t.operator, t.operatorKeyword],
152+
color: '#6c71c4',
153+
},
154+
{
155+
tag: [t.tagName],
156+
color: '#268bd2',
157+
},
158+
{
159+
tag: [t.squareBracket],
160+
color: '#dc322f',
161+
},
162+
{
163+
tag: [t.angleBracket],
164+
color: '#586e75',
165+
},
166+
{
167+
tag: [t.attributeName],
168+
color: '#93a1a1',
169+
},
170+
{
171+
tag: [t.regexp],
172+
color: '#d30102',
173+
},
174+
{
175+
tag: [t.quote],
176+
color: '#859900',
177+
},
178+
{ tag: [t.string], color: '#b58900' },
179+
{
180+
tag: t.link,
181+
color: '#2aa198',
182+
textDecoration: 'underline',
183+
textUnderlinePosition: 'under',
184+
},
185+
{
186+
tag: [t.url, t.escape, t.special(t.string)],
187+
color: '#b58900',
188+
},
189+
{ tag: [t.meta], color: '#dc322f' },
190+
{ tag: [t.comment], color: '#586e75', fontStyle: 'italic' },
191+
{ tag: t.strong, fontWeight: 'bold', color: '#eee8d5' },
192+
{ tag: t.emphasis, fontStyle: 'italic', color: '#859900' },
193+
{ tag: t.strikethrough, textDecoration: 'line-through' },
194+
{ tag: t.heading, fontWeight: 'bold', color: '#b58900' },
195+
{ tag: t.heading1, fontWeight: 'bold', color: '#fdf6e3' },
196+
{
197+
tag: [t.heading2, t.heading3, t.heading4],
198+
fontWeight: 'bold',
199+
color: '#eee8d5',
200+
},
201+
{
202+
tag: [t.heading5, t.heading6],
203+
color: '#eee8d5',
204+
},
205+
{ tag: [t.atom, t.bool, t.special(t.variableName)], color: '#d33682' },
206+
{
207+
tag: [t.processingInstruction, t.inserted, t.contentSeparator],
208+
color: '#dc322f',
209+
},
210+
{
211+
tag: [t.contentSeparator],
212+
color: '#b58900',
213+
},
214+
{ tag: t.invalid, color: '#586e75', borderBottom: `1px dotted #dc322f` },
215+
],
216+
});

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

0 commit comments

Comments
 (0)