Skip to content

Commit 2df3352

Browse files
jaywcjlovejaywcjlove
committedDec 4, 2022
feat(theme): add gruvbox light theme.
·
v4.23.10v4.16.0
1 parent 2717cdd commit 2df3352

File tree

4 files changed

+121
-2
lines changed

4 files changed

+121
-2
lines changed
 

‎themes/gruvbox/README.md

+5-1
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,10 @@
1010
<img width="436" alt="codemirror-theme-eclipse" src="https://user-images.githubusercontent.com/1680273/201111051-c38a73ca-a449-4c01-a4ff-4a675886ca9d.png">
1111
</a>
1212

13+
<a href="https://uiwjs.github.io/react-codemirror/#/theme/data/gruvbox/light">
14+
<img width="436" alt="codemirror-theme-eclipse" src="https://user-images.githubusercontent.com/1680273/205499803-e1e2e214-dc3e-488a-9037-ba979e5ce199.png">
15+
</a>
16+
1317
## Install
1418

1519
```bash
@@ -20,7 +24,7 @@ npm install @uiw/codemirror-theme-gruvbox-dark --save
2024

2125
```jsx
2226
import CodeMirror from '@uiw/react-codemirror';
23-
import { gruvboxDark } from '@uiw/codemirror-theme-gruvbox-dark';
27+
import { gruvboxDark, gruvboxLight } from '@uiw/codemirror-theme-gruvbox-dark';
2428
import { javascript } from '@codemirror/lang-javascript';
2529

2630
function App() {

‎themes/gruvbox/src/index.ts

+109
Original file line numberDiff line numberDiff line change
@@ -36,3 +36,112 @@ export const gruvboxDark = createTheme({
3636
{ tag: t.attributeName, color: '#8ec07c' },
3737
],
3838
});
39+
40+
export const gruvboxLight = createTheme({
41+
theme: 'light',
42+
settings: {
43+
background: '#fbf1c7',
44+
foreground: '#3c3836',
45+
caret: '#af3a03',
46+
selection: '#ebdbb2',
47+
selectionMatch: '#bdae93',
48+
lineHighlight: '#ebdbb2',
49+
gutterBackground: '#ebdbb2',
50+
gutterForeground: '#665c54',
51+
gutterBorder: 'transparent',
52+
},
53+
styles: [
54+
{ tag: t.keyword, color: '#9d0006' },
55+
{
56+
tag: [t.name, t.deleted, t.character, t.propertyName, t.macroName],
57+
color: '#427b58',
58+
},
59+
{ tag: [t.variableName], color: '#076678' },
60+
{ tag: [t.function(t.variableName)], color: '#79740e', fontStyle: 'bold' },
61+
{ tag: [t.labelName], color: '#3c3836' },
62+
{
63+
tag: [t.color, t.constant(t.name), t.standard(t.name)],
64+
color: '#8f3f71',
65+
},
66+
{ tag: [t.definition(t.name), t.separator], color: '#3c3836' },
67+
{ tag: [t.brace], color: '#3c3836' },
68+
{
69+
tag: [t.annotation],
70+
color: '#9d0006',
71+
},
72+
{
73+
tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace],
74+
color: '#8f3f71',
75+
},
76+
{
77+
tag: [t.typeName, t.className],
78+
color: '#b57614',
79+
},
80+
{
81+
tag: [t.operator, t.operatorKeyword],
82+
color: '#9d0006',
83+
},
84+
{
85+
tag: [t.tagName],
86+
color: '#427b58',
87+
fontStyle: 'bold',
88+
},
89+
{
90+
tag: [t.squareBracket],
91+
color: '#af3a03',
92+
},
93+
{
94+
tag: [t.angleBracket],
95+
color: '#076678',
96+
},
97+
{
98+
tag: [t.attributeName],
99+
color: '#427b58',
100+
},
101+
{
102+
tag: [t.regexp],
103+
color: '#427b58',
104+
},
105+
{
106+
tag: [t.quote],
107+
color: '#928374',
108+
},
109+
{ tag: [t.string], color: '#3c3836' },
110+
{
111+
tag: t.link,
112+
color: '#7c6f64',
113+
textDecoration: 'underline',
114+
textUnderlinePosition: 'under',
115+
},
116+
{
117+
tag: [t.url, t.escape, t.special(t.string)],
118+
color: '#8f3f71',
119+
},
120+
{ tag: [t.meta], color: '#b57614' },
121+
{ tag: [t.comment], color: '#928374', fontStyle: 'italic' },
122+
{ tag: t.strong, fontWeight: 'bold', color: '#af3a03' },
123+
{ tag: t.emphasis, fontStyle: 'italic', color: '#79740e' },
124+
{ tag: t.strikethrough, textDecoration: 'line-through' },
125+
{ tag: t.heading, fontWeight: 'bold', color: '#79740e' },
126+
{ tag: [t.heading1, t.heading2], fontWeight: 'bold', color: '#79740e' },
127+
{
128+
tag: [t.heading3, t.heading4],
129+
fontWeight: 'bold',
130+
color: '#b57614',
131+
},
132+
{
133+
tag: [t.heading5, t.heading6],
134+
color: '#b57614',
135+
},
136+
{ tag: [t.atom, t.bool, t.special(t.variableName)], color: '#8f3f71' },
137+
{
138+
tag: [t.processingInstruction, t.inserted],
139+
color: '#076678',
140+
},
141+
{
142+
tag: [t.contentSeparator],
143+
color: '#9d0006',
144+
},
145+
{ tag: t.invalid, color: '#af3a03', borderBottom: `1px dotted #9d0006` },
146+
],
147+
});

‎themes/theme/README.md

+4
Original file line numberDiff line numberDiff line change
@@ -188,6 +188,10 @@ export default App;
188188
<img width="436" alt="codemirror-theme-gruvbox-dark" src="https://user-images.githubusercontent.com/1680273/201111051-c38a73ca-a449-4c01-a4ff-4a675886ca9d.png">
189189
</a>
190190

191+
<a href="https://uiwjs.github.io/react-codemirror/#/theme/data/gruvbox/light">
192+
<img width="436" alt="codemirror-theme-eclipse" src="https://user-images.githubusercontent.com/1680273/205499803-e1e2e214-dc3e-488a-9037-ba979e5ce199.png">
193+
</a>
194+
191195
**nord**
192196

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

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

+3-1
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ import { bespin } from '@uiw/codemirror-theme-bespin';
2727
import { vscodeDark } from '@uiw/codemirror-theme-vscode';
2828
import { duotoneLight, duotoneDark } from '@uiw/codemirror-theme-duotone';
2929
import { githubLight, githubDark } from '@uiw/codemirror-theme-github';
30-
import { gruvboxDark } from '@uiw/codemirror-theme-gruvbox-dark';
30+
import { gruvboxDark, gruvboxLight } from '@uiw/codemirror-theme-gruvbox-dark';
3131
import { nord } from '@uiw/codemirror-theme-nord';
3232
import { sublime } from '@uiw/codemirror-theme-sublime';
3333
import { xcodeLight, xcodeDark } from '@uiw/codemirror-theme-xcode';
@@ -46,6 +46,7 @@ export const mdSource = {
4646
githubLight: githubMd.source,
4747
githubDark: githubMd.source,
4848
gruvboxDark: gruvboxDarkMd.source,
49+
gruvboxLight: gruvboxDarkMd.source,
4950
nord: nordMd.source,
5051
okaidia: okaidiaMd.source,
5152
sublime: sublimeMd.source,
@@ -68,6 +69,7 @@ export const themeData = {
6869
githubLight,
6970
githubDark,
7071
gruvboxDark,
72+
gruvboxLight,
7173
nord,
7274
okaidia,
7375
sublime,

0 commit comments

Comments
 (0)
Please sign in to comment.