basic theme switcher

website/src/repl/Repl.jsx

@@ -22,6 +22,7 @@ import { Header } from './Header';
 import { prebake } from './prebake.mjs';
 import * as tunes from './tunes.mjs';
 import PlayCircleIcon from '@heroicons/react/20/solid/PlayCircleIcon';
+import strudelTheme from '@strudel.cycles/react/src/themes/strudel-theme';
 
 initAudioOnFirstClick();
 
@@ -109,6 +110,7 @@ export const ReplContext = createContext(null);
 export function Repl({ embedded = false }) {
   const isEmbedded = embedded || window.location !== window.parent.location;
   const [view, setView] = useState(); // codemirror view
+  const [theme, setTheme] = useState(strudelTheme);
   const [lastShared, setLastShared] = useState();
   const [activeFooter, setActiveFooter] = useState('');
   const [isZen, setIsZen] = useState(false);
@@ -255,6 +257,8 @@ export function Repl({ embedded = false }) {
     handleShare,
     isZen,
     setIsZen,
+    theme,
+    setTheme,
   };
   return (
     // bg-gradient-to-t from-blue-900 to-slate-900
@@ -269,6 +273,7 @@ export function Repl({ embedded = false }) {
         <Header context={context} />
         <section className="grow flex text-gray-100 relative overflow-auto cursor-text pb-0" id="code">
           <CodeMirror
+            theme={theme}
             value={code}
             onChange={handleChangeCode}
             onViewChanged={setView}