File tree Expand file tree Collapse file tree 1 file changed +23
-1
lines changed Expand file tree Collapse file tree 1 file changed +23
-1
lines changed Original file line number Diff line number Diff line change @@ -164,14 +164,36 @@ export default function App() {
164
164
}
165
165
```
166
166
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
+
167
189
## Props
168
190
169
191
<!-- rehype:style=background-color: #ffe564; display: inline-block; border-bottom: 0; padding: 3px 12px;-->
170
192
171
193
- ` value?: string ` value of the auto created model in the editor.
172
194
- ` width?: string ` width of editor. Defaults to ` auto ` .
173
195
- ` height?: string ` height of editor. Defaults to ` auto ` .
174
- - ` theme? ` : ` light ` / ` dark ` Defaults to ` light ` .
196
+ - ` theme? ` : ` ' light' ` / ` ' dark' ` / ` Extension ` Defaults to ` ' light' ` .
175
197
176
198
``` ts
177
199
import React from ' react' ;
You can’t perform that action at this time.
0 commit comments