Reconfiguring Theme

v6
1

I’m using version 6 of codemirror in a react app and I’m attempting to allow the theme of the editor to be reconfigured when the overall theme of the site is changed.

Currently here is what I’m trying to do:

  const { theme } = useTheme();
  const editorTheme = new Compartment();

  const doc = [''];
  const extensions = [
    basicSetup,
    markdown({ base: markdownLanguage, codeLanguages: languages }),
    EditorState.tabSize.of(2),
    editorTheme.of([]),
    keymap.of([indentWithTab]),
  ];

  const { editorRef, editorView } = useCodeMirror({ doc, extensions });

  useEffect(() => {
    if (editorView === null) {
      return;
    }

    if (theme === 'dark') {
      editorView.dispatch({
        effects: editorTheme.reconfigure([darkTheme]),
      });
    }
  }, [theme, editorView]);

But despite the useEffect running when the theme is changed the editor’s theme does not seem to be being reconfigured.

I know I’m missing something, but I can’t see to figure it out.

I’ve also tried just wiring up a simple button on the page that when clicked dispatches the effect and that isn’t doing it either.

Any advice would be appreciated.

2

I don’t spot anything wrong in that code. Did you double-check that your darkTheme works, when used directly as part of an initial configuration?