Add Custom theme to react-codemirror2?

Question

I dropped the theme into the react-codemirror2 folder inside the node modules folder, but the theme could not be found when building, because when I copy the new packages, the file disappears.

How to create a custom theme?

Answer 1

Hello Abbos Rakhmono,

react-codemirror2 has quite a useful number of theme options to use that must surely be similar to what you want.

You can find an example in the demo here

---

Here is also an example of me using the "material" theme in the options prop.

Note: You have to also import the specific CSS stylesheet for each theme you wish to use to enable proper linting

import 'codemirror/theme/material.css'

  import 'codemirror/theme/material.css'


  <ControlledEditor
    onBeforeChange={handleChange}
    value={value}
    className="code-mirror-wrapper"
    options={{
      lineWrapping: true,
      lint: true,
      mode: xml,
      lineNumbers: true,
      theme: 'material'
      
    }}
  />

Hope this helps. You can reply to this post if you need further assistance.