Closed curran closed 1 year ago
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.
https://github.com/uiwjs/react-codemirror/tree/master
npm install @uiw/codemirror-themes
@ejfox
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.
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
Maybe pick from these https://visualstudiomagazine.com/articles/2021/07/07/vs-code-themes.aspx