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>
   ) : (

website/src/repl/Footer.jsx

@@ -1,9 +1,10 @@
 import XMarkIcon from '@heroicons/react/20/solid/XMarkIcon';
 import { logger } from '@strudel.cycles/core';
-import { cx } from '@strudel.cycles/react';
+import { useEvent, cx } from '@strudel.cycles/react';
+// import { cx } from '@strudel.cycles/react';
 import { nanoid } from 'nanoid';
 import React, { useCallback, useLayoutEffect, useRef, useState } from 'react';
-import { useEvent, loadedSamples } from './Repl';
+import { loadedSamples } from './Repl';
 import { Reference } from './Reference';
 import { themes, themeColors } from './themes.mjs';
 
@@ -172,7 +173,7 @@ export function Footer({ context }) {
               {Object.entries(themes).map(([k, t]) => (
                 <div
                   key={k}
-                  className={classNames(
+                  className={cx(
                     'border-2 border-transparent cursor-pointer p-4 bg-background bg-opacity-25 rounded-md',
                     theme === k ? '!border-foreground' : '',
                   )}
@@ -225,24 +226,3 @@ function linkify(inputText) {
 
   return replacedText;
 }
-
-function classNames(...classes) {
-  return classes.filter(Boolean).join(' ');
-}
-
-/* export function useTheme() {
-  const [theme, setTheme] = useState(localStorage.getItem('strudel-theme'));
-  useEvent('strudel-theme', (e) => {
-    console.log(e.detail);
-    setTheme(e.detail);
-  });
-  const themeSettings = settings[theme || 'strudelTheme'];
-  return {
-    theme,
-    setTheme,
-    settings: themeSettings,
-    isDark: !themeSettings.light,
-    isLight: !!themeSettings.light,
-  };
-}
- */

website/src/repl/Repl.jsx

@@ -5,7 +5,7 @@ This program is free software: you can redistribute it and/or modify it under th
 */
 
 import { cleanupDraw, cleanupUi, controls, evalScope, getDrawContext, logger } from '@strudel.cycles/core';
-import { CodeMirror, cx, flash, useHighlighting, useStrudel } from '@strudel.cycles/react';
+import { CodeMirror, cx, flash, useHighlighting, useStrudel, useKeydown } from '@strudel.cycles/react';
 import {
   getAudioContext,
   getLoadedSamples,
@@ -23,6 +23,7 @@ import { prebake } from './prebake.mjs';
 import * as tunes from './tunes.mjs';
 import PlayCircleIcon from '@heroicons/react/20/solid/PlayCircleIcon';
 import { themes } from './themes.mjs';
+import useTheme from '../useTheme';
 
 const initialTheme = localStorage.getItem('strudel-theme') || 'strudelTheme';
 
@@ -171,12 +172,15 @@ export function Repl({ embedded = false }) {
     ),
   );
 
+  const { settings } = useTheme();
+
   // highlighting
   useHighlighting({
     view,
     pattern,
     active: started && !activeCode?.includes('strudel disable-highlighting'),
     getTime: () => scheduler.now(),
+    color: settings?.foreground,
   });
 
   //
@@ -299,15 +303,3 @@ export function Repl({ embedded = false }) {
     </ReplContext.Provider>
   );
 }
-
-export function useEvent(name, onTrigger, useCapture = false) {
-  useEffect(() => {
-    document.addEventListener(name, onTrigger, useCapture);
-    return () => {
-      document.removeEventListener(name, onTrigger, useCapture);
-    };
-  }, [onTrigger]);
-}
-function useKeydown(onTrigger) {
-  useEvent('keydown', onTrigger, true);
-}

website/src/useTheme.jsx

@@ -0,0 +1,27 @@
+import { useState } from 'react';
+import { settings } from './repl/themes.mjs';
+import { useEffect } from 'react';
+
+function useTheme() {
+  const [theme, setTheme] = useState(localStorage.getItem('strudel-theme'));
+  useEvent('strudel-theme', (e) => setTheme(e.detail));
+  const themeSettings = settings[theme || 'strudelTheme'];
+  return {
+    theme,
+    setTheme,
+    settings: themeSettings,
+    isDark: !themeSettings.light,
+    isLight: !!themeSettings.light,
+  };
+}
+// TODO: dedupe
+function useEvent(name, onTrigger, useCapture = false) {
+  useEffect(() => {
+    document.addEventListener(name, onTrigger, useCapture);
+    return () => {
+      document.removeEventListener(name, onTrigger, useCapture);
+    };
+  }, [onTrigger]);
+}
+
+export default useTheme;