dynamic highlight color

+ refactor hooks

website/src/docs/MiniRepl.jsx

@@ -2,7 +2,7 @@ import { evalScope, controls } from '@strudel.cycles/core';
 import { initAudioOnFirstClick } from '@strudel.cycles/webaudio';
 import { useEffect, useState } from 'react';
 import { prebake } from '../repl/prebake';
-import { themes } from '../repl/themes.mjs';
+import { themes, settings } from '../repl/themes.mjs';
 import './MiniRepl.css';
 
 const theme = localStorage.getItem('strudel-theme') || 'strudelTheme';
@@ -36,6 +36,7 @@ export function MiniRepl({ tune, drawTime, punchcard, canvasHeight = 100 }) {
       .then(([res]) => setRepl(() => res.MiniRepl))
       .catch((err) => console.error(err));
   }, []);
+  // const { settings } = useTheme();
   return Repl ? (
     <div className="mb-4">
       <Repl
@@ -45,6 +46,7 @@ export function MiniRepl({ tune, drawTime, punchcard, canvasHeight = 100 }) {
         punchcard={punchcard}
         canvasHeight={canvasHeight}
         theme={themes[theme]}
+        highlightColor={settings[theme]?.foreground}
       />
     </div>
   ) : (