uiwjs / react-monacoeditor

Monaco Editor component for React.

Home Page:https://uiwjs.github.io/react-monacoeditor/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

HOW TO USE CUSTOM THEMES?

SMKH-PRO opened this issue · comments

HOW DO I WRITE CUSTOM RULES AND CUSTOM THEMES?

https://microsoft.github.io/monaco-editor/playground.html#customizing-the-appearence-exposed-colors

Like in the following example

monaco.editor.defineTheme('myTheme', {
    base: 'vs-dark',
    inherit: true,
    rules: [{ background: 'EDF9FA' }],
    colors: {
        'editor.foreground': '#000000',
        'editor.background': '#EDF9FA',
        'editorCursor.foreground': '#8B0000',
        'editor.lineHighlightBackground': '#0000FF20',
        'editorLineNumber.foreground': '#008800',
        'editor.selectionBackground': '#88000030',
        'editor.inactiveSelectionBackground': '#88000015'
    }
});

I want to change the background colour of the editor.

@SMKH-PRO

<MonacoEditor
  language="html"
  height="500px"
+  editorDidMount={(editor, monaco) => {
+      console.log("editor:@:", monaco.editor.defineTheme);
+  }}
  value="<h1>I ♥ react-monacoeditor</h1>"
  options={{
    theme: "vs-dark"
  }}
/>

https://github.com/jaywcjlove/react-monacoeditor/blob/17ab3c6064e738d7cf99854f256666ca83867039/src/Editor.js#L37