How to change editor theme dinamically

v6
1

Hello, I applied a custom theme when creating a new EditorView. How can I do to change dinamically the theme of my editor, choosing from a list of possible themes? I tried with injectExtension from this example: CodeMirror Reconfiguration Example but it works only when no previous theme has been applied, and function deconfigure doesn’t work because “StateEffect.reconfigure is not a function”.
How can I do?
Thanks in advance.

2

See the part of that example that discusses compartments.

3

I tried with:

var theme = new Compartment;

function setTheme(view, tema) {
view.dispatch({
effects: theme.reconfigure(view.state.theme.of(tema))
})
}

But i get the error: Cannot read properties of undefined (reading ‘of’) at setTheme
Same error if i use EditorState instead of view.state

4

Yes, that’s because there’s no theme property on state objects. Maybe you were looking for EditorView.theme?

5

I tried with this:

var theme = new Compartment;

function setTheme(view, tema) {
view.dispatch({
effects: theme.reconfigure(view.theme.of(tema))
})
}

but i get the error: “Cannot read properties of undefined (reading ‘of’)”

6

I found the solution:

function setTheme(view, tema) {
view.dispatch({
effects: theme.reconfigure(tema)
})
}

where tema is a EditorView.theme object I created previously

2 Likes