Ability to switch between color themes

[curran]

Maybe pick from these https://visualstudiomagazine.com/articles/2021/07/07/vs-code-themes.aspx

[curran]

Current status: we have a settings section for choosing a theme!

Next steps: research which color themes are there for CodeMirror 6.

This old work of mine may be relevant: https://github.com/vizhub-core/vizhub/tree/main/prototypes/vizhub-v2-false-start/packages/frontend/src/themes

I got this exact feature working with CodeMirror 6 about 2 years ago, but the API probably has changed a lot since then.

Probably the best way to go about this is to develop JavaScript CodeMirror plugins for each theme, just like https://github.com/codemirror/theme-one-dark#readme

Although, there may be a remote possibility that we can develop just a single theme, then use dynamic CSS to change the theme without interfacing with CodeMirror at all. Not sure if that's possible, but worth investigating as that would be conceptually and technically a lot simpler.

[curran]

https://github.com/codemirror/theme-one-dark/blob/main/src/one-dark.ts

[curran]

https://github.com/uiwjs/react-codemirror/tree/master

npm install @uiw/codemirror-themes

[curran]

@ejfox

[curran]

https://uiwjs.github.io/react-codemirror/#/extensions/themes-all

There is a live demo here of switching between themes that maybe we could draw from.

[curran]

Bingo https://github.com/uiwjs/react-codemirror/blob/master/www/src/pages/extensions/themes/example.tsx#L26

[curran]

Interesting...

  useEffect(() => {
    if (view) {
      view.dispatch({ effects: StateEffect.reconfigure.of(getExtensions) });
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [
    theme,
    extensions,
    height,
    minHeight,
    maxHeight,
    width,
    minWidth,
    maxWidth,
    placeholderStr,
    editable,
    readOnly,
    defaultIndentWithTab,
    defaultBasicSetup,
    onChange,
    onUpdate,
  ]);

in https://github.com/uiwjs/react-codemirror/blob/master/core/src/useCodeMirror.ts#L137

[curran]

Another example https://github.com/craftzdog/cm6-themes/blob/main/example/index.ts