dynamic highlight color

+ refactor hooks

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);
-}