Skip to content

Commit 23c896c

Browse files
committed
feat(darcula): add darculaInit method to darcula theme.
1 parent 8c4e397 commit 23c896c

File tree

2 files changed

+58
-25
lines changed

2 files changed

+58
-25
lines changed

themes/darcula/README.md

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,32 @@
1616
npm install @uiw/codemirror-theme-darcula --save
1717
```
1818

19+
```jsx
20+
import { tags as t } from '@lezer/highlight';
21+
import { darcula, darculaInit } from '@uiw/codemirror-theme-darcula';
22+
23+
<CodeMirror theme={darcula} />
24+
<CodeMirror
25+
theme={darculaInit({
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 darculaInit: (options?: CreateThemeOptions) => import('@codemirror/state').Extension;
42+
export declare const darcula: import('@codemirror/state').Extension;
43+
```
44+
1945
## Usage
2046

2147
```jsx

themes/darcula/src/index.ts

Lines changed: 32 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -5,29 +5,36 @@
55
* From IntelliJ IDEA by JetBrains
66
*/
77
import { tags as t } from '@lezer/highlight';
8-
import { createTheme } from '@uiw/codemirror-themes';
8+
import { createTheme, CreateThemeOptions } from '@uiw/codemirror-themes';
99

10-
export const darcula = createTheme({
11-
theme: 'dark',
12-
settings: {
13-
background: '#2B2B2B',
14-
foreground: '#f8f8f2',
15-
caret: '#FFFFFF',
16-
selection: 'rgba(255, 255, 255, 0.1)',
17-
selectionMatch: 'rgba(255, 255, 255, 0.2)',
18-
gutterBackground: 'rgba(255, 255, 255, 0.1)',
19-
gutterForeground: '#999',
20-
lineHighlight: 'rgba(255, 255, 255, 0.1)',
21-
},
22-
styles: [
23-
{ tag: [t.atom, t.number], color: '#bd93f9' },
24-
{ tag: [t.comment], color: '#61A151' },
25-
{ tag: [t.string], color: '#6A8759' },
26-
{ tag: [t.variableName, t.operator], color: '#A9B7C6' },
27-
{ tag: [t.meta, t.className], color: '#A9B7C6' },
28-
{ tag: [t.propertyName], color: '#FFC66D' },
29-
{ tag: [t.keyword], color: '#CC7832' },
30-
{ tag: [t.tagName], color: '#ff79c6' },
31-
{ tag: [t.typeName], color: '#ffb86c' },
32-
],
33-
});
10+
export const darculaInit = (options?: CreateThemeOptions) => {
11+
const { theme = 'light', settings = {}, styles = [] } = options || {};
12+
return createTheme({
13+
theme: theme,
14+
settings: {
15+
background: '#2B2B2B',
16+
foreground: '#f8f8f2',
17+
caret: '#FFFFFF',
18+
selection: 'rgba(255, 255, 255, 0.1)',
19+
selectionMatch: 'rgba(255, 255, 255, 0.2)',
20+
gutterBackground: 'rgba(255, 255, 255, 0.1)',
21+
gutterForeground: '#999',
22+
lineHighlight: 'rgba(255, 255, 255, 0.1)',
23+
...settings,
24+
},
25+
styles: [
26+
{ tag: [t.atom, t.number], color: '#bd93f9' },
27+
{ tag: [t.comment], color: '#61A151' },
28+
{ tag: [t.string], color: '#6A8759' },
29+
{ tag: [t.variableName, t.operator], color: '#A9B7C6' },
30+
{ tag: [t.meta, t.className], color: '#A9B7C6' },
31+
{ tag: [t.propertyName], color: '#FFC66D' },
32+
{ tag: [t.keyword], color: '#CC7832' },
33+
{ tag: [t.tagName], color: '#ff79c6' },
34+
{ tag: [t.typeName], color: '#ffb86c' },
35+
...styles,
36+
],
37+
});
38+
};
39+
40+
export const darcula = darculaInit();

0 commit comments

Comments
 (0)