basic theme switcher

packages/react/src/components/CodeMirror6.jsx

@@ -79,9 +79,17 @@ const highlightField = StateField.define({
   provide: (f) => EditorView.decorations.from(f),
 });
 
-const extensions = [javascript(), strudelTheme, highlightField, flashField];
+const extensions = [javascript(), highlightField, flashField];
 
-export default function CodeMirror({ value, onChange, onViewChanged, onSelectionChange, options, editorDidMount }) {
+export default function CodeMirror({
+  value,
+  onChange,
+  onViewChanged,
+  onSelectionChange,
+  theme,
+  options,
+  editorDidMount,
+}) {
   const handleOnChange = useCallback(
     (value) => {
       onChange?.(value);
@@ -106,6 +114,7 @@ export default function CodeMirror({ value, onChange, onViewChanged, onSelection
     <>
       <_CodeMirror
         value={value}
+        theme={theme || strudelTheme}
         onChange={handleOnChange}
         onCreateEditor={handleOnCreateEditor}
         onUpdate={handleOnUpdate}

packages/react/src/components/style.css

@@ -1,14 +1,18 @@
 .cm-editor {
-  background-color: transparent !important;
+  /* background-color: transparent !important; */
   height: 100%;
   z-index: 11;
   font-size: 18px;
 }
 
+.cm-theme {
+  width: 100%;
+}
+
 .cm-theme-light {
   width: 100%;
 }
 
 .cm-line > * {
-  background: #00000095;
+  /* background: #00000095; */
 }