diff --git a/packages/codemirror/codemirror.mjs b/packages/codemirror/codemirror.mjs
index 43b74ef8..92dd6214 100644
--- a/packages/codemirror/codemirror.mjs
+++ b/packages/codemirror/codemirror.mjs
@@ -10,7 +10,7 @@ import { Pattern, Drawer, repl, cleanupDraw } from '@strudel.cycles/core';
import { flash, isFlashEnabled } from './flash.mjs';
import { highlightMiniLocations, isPatternHighlightingEnabled, updateMiniLocations } from './highlight.mjs';
import { keybindings } from './keybindings.mjs';
-import { theme } from './themes.mjs';
+import { initTheme, activateTheme, theme } from './themes.mjs';
import { updateWidgets, sliderPlugin } from './slider.mjs';
const extensions = {
@@ -30,6 +30,7 @@ export function initEditor({ initialCode = '', onChange, onEvaluate, onStop, set
const initialSettings = Object.keys(compartments).map((key) =>
compartments[key].of(extensions[key](parseBooleans(settings[key]))),
);
+ initTheme(settings.theme);
let state = EditorState.create({
doc: initialCode,
extensions: [
@@ -213,6 +214,9 @@ export class StrudelMirror {
this.editor.dispatch({
effects: compartments[key].reconfigure(newValue),
});
+ if (key === 'theme') {
+ activateTheme(value);
+ }
}
setLineWrappingEnabled(enabled) {
this.reconfigureExtension('isLineWrappingEnabled', enabled);
diff --git a/website/src/pages/vanilla/mini.astro b/website/src/pages/vanilla/mini.astro
index 2f8e8599..b68e141b 100644
--- a/website/src/pages/vanilla/mini.astro
+++ b/website/src/pages/vanilla/mini.astro
@@ -6,19 +6,6 @@ import HeadCommonNew from '../../components/HeadCommonNew.astro';
-
Strudel Vanilla REPL
diff --git a/website/src/repl/vanilla/vanilla.mjs b/website/src/repl/vanilla/vanilla.mjs
index 721b745c..3c2a54a5 100644
--- a/website/src/repl/vanilla/vanilla.mjs
+++ b/website/src/repl/vanilla/vanilla.mjs
@@ -1,5 +1,4 @@
import { hash2code, logger } from '@strudel.cycles/core';
-import { activateTheme, initTheme } from '@strudel/codemirror';
import './vanilla.css';
let editor;
@@ -16,7 +15,6 @@ const initialSettings = {
fontFamily: 'monospace',
fontSize: 18,
};
-initTheme(initialSettings.theme);
async function run() {
const repl = document.getElementById('editor');
@@ -129,6 +127,4 @@ setFormValues(form, initialSettings);
form.addEventListener('change', () => {
const values = getFormValues(form, initialSettings);
editor?.updateSettings(values);
- // TODO: only activateTheme when it changes
- activateTheme(values.theme);
});