basic theme switcher

website/src/repl/Footer.jsx

@@ -5,11 +5,12 @@ import { nanoid } from 'nanoid';
 import React, { useContext, useCallback, useLayoutEffect, useRef, useState } from 'react';
 import { useEvent, loadedSamples, ReplContext } from './Repl';
 import { Reference } from './Reference';
+import * as themes from './themes.mjs';
 
 export function Footer({ context }) {
   // const [activeFooter, setActiveFooter] = useState('console');
   // const { activeFooter, setActiveFooter, isZen } = useContext?.(ReplContext);
-  const { activeFooter, setActiveFooter, isZen } = context;
+  const { activeFooter, setActiveFooter, isZen, setTheme } = context;
   const footerContent = useRef();
   const [log, setLog] = useState([]);
 
@@ -69,11 +70,12 @@ export function Footer({ context }) {
   return (
     <footer className="bg-footer z-[20]">
       <div className="flex justify-between px-2">
-        <div className={cx('flex select-none', activeFooter && 'pb-2')}>
+        <div className={cx('flex select-none max-w-full overflow-auto', activeFooter && 'pb-2')}>
           <FooterTab name="intro" label="welcome" />
           <FooterTab name="samples" />
           <FooterTab name="console" />
           <FooterTab name="reference" />
+          <FooterTab name="settings" />
         </div>
         {activeFooter !== '' && (
           <button onClick={() => setActiveFooter('')} className="text-white" aria-label="Close Panel">
@@ -164,6 +166,21 @@ export function Footer({ context }) {
               ))}
             </div>
           )}
+          {activeFooter === 'settings' && (
+            <div>
+              {Object.entries(themes).map(([k, t]) => (
+                <li key={k}>
+                  <a
+                    onClick={() => {
+                      setTheme(t);
+                    }}
+                  >
+                    {k}
+                  </a>
+                </li>
+              ))}
+            </div>
+          )}
           {activeFooter === 'reference' && <Reference />}
         </div>
       )}

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}

website/src/repl/themes.mjs

@@ -0,0 +1,31 @@
+export {
+  abcdef,
+  androidstudio,
+  atomone,
+  aura,
+  bespin,
+  darcula,
+  dracula,
+  duotoneDark,
+  eclipse,
+  githubDark,
+  gruvboxDark,
+  materialDark,
+  nord,
+  okaidia,
+  solarizedDark,
+  sublime,
+  tokyoNight,
+  tokyoNightStorm,
+  vscodeDark,
+  xcodeDark,
+  bbedit,
+  duotoneLight,
+  githubLight,
+  gruvboxLight,
+  materialLight,
+  noctisLilac,
+  solarizedLight,
+  tokyoNightDay,
+  xcodeLight,
+} from '@uiw/codemirror-themes-all';