Skip to content

Commit 8385eaf

Browse files
authored
doc: Custom theme docs (#233)
* feature: allow custom themes * docs: custom theme
1 parent f781a56 commit 8385eaf

File tree

1 file changed

+23
-1
lines changed

1 file changed

+23
-1
lines changed

README.md

Lines changed: 23 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -164,14 +164,36 @@ export default function App() {
164164
}
165165
```
166166

167+
## Using custom theme
168+
169+
```jsx
170+
import { oneDarkTheme } from '@codemirror/theme-one-dark';
171+
import CodeMirror from '@uiw/react-codemirror';
172+
import { javascript } from '@codemirror/lang-javascript';
173+
174+
export default function App() {
175+
return (
176+
<CodeMirror
177+
value="console.log('hello world!');"
178+
height="100%"
179+
theme={oneDarkTheme}
180+
extensions={[javascript({ jsx: true })]}
181+
onChange={(value, viewUpdate) => {
182+
console.log('value:', value);
183+
}}
184+
/>
185+
);
186+
}
187+
```
188+
167189
## Props
168190

169191
<!--rehype:style=background-color: #ffe564; display: inline-block; border-bottom: 0; padding: 3px 12px;-->
170192

171193
- `value?: string` value of the auto created model in the editor.
172194
- `width?: string` width of editor. Defaults to `auto`.
173195
- `height?: string` height of editor. Defaults to `auto`.
174-
- `theme?`: `light` / `dark` Defaults to `light`.
196+
- `theme?`: `'light'` / `'dark'` / `Extension` Defaults to `'light'`.
175197

176198
```ts
177199
import React from 'react';

0 commit comments

Comments
 (0)