Could Someone Give me Advice on CodeMirror for Dynamic Theme Switching in a Web App?

Hello there, :wave:

I am working on a web application where I have integrated CodeMirror as the main code editor. The app supports both light and dark themes, and I would like to enable dynamic theme switching for CodeMirror without requiring a page refresh.

I am using CodeMirror 6 and have set up two themes codemirror/theme-light and codemirror/theme-darkin my configuration.

I have added a toggle switch that updates the app’s overall theme. When the user switches themes, I attempt to update the CodeMirror theme dynamically by calling dispatch with a new EditorState configuration.

The issue I am encountering is that while the rest of the UI updates seamlessly; the CodeMirror editor occasionally flickers or does not update the theme reliably. Additionally, I have noticed that any unsaved changes in the editor state can get disrupted during the theme update process, which is not ideal for the user experience.

Also, I have gone through this post; https://discuss.codemirror.net/t/cm6-dynamically-switching-syntax-theme-w-reconfigure-machine-learning which definitely helped me out a lot.

Is there a recommended approach for applying dynamic theme changes to CodeMirror 6 without reinitializing the editor or disrupting the current state? :thinking: Should I be handling the theme updates at the ViewPlugin level or is there a better alternative?

Thanks in advance for your help and assistance. :innocent:

I think just wrapping your theme in a compartment and reconfiguring only that compartment (as in this example) will do what you’re looking for.