diff --git a/packages/react/src/components/CodeMirror6.jsx b/packages/react/src/components/CodeMirror6.jsx
index 5bc8cef5..09a02211 100644
--- a/packages/react/src/components/CodeMirror6.jsx
+++ b/packages/react/src/components/CodeMirror6.jsx
@@ -58,15 +58,15 @@ const highlightField = StateField.define({
             haps
               .map((hap) =>
                 (hap.context.locations || []).map(({ start, end }) => {
-                  const color = hap.context.color || e.value.color || '#FFCA28';
+                  // const color = hap.context.color || e.value.color || '#FFCA28';
                   let from = tr.newDoc.line(start.line).from + start.column;
                   let to = tr.newDoc.line(end.line).from + end.column;
                   const l = tr.newDoc.length;
                   if (from > l || to > l) {
                     return; // dont mark outside of range, as it will throw an error
                   }
-                  // const mark = Decoration.mark({ attributes: { style: `outline: 1px solid ${color}` } });
-                  const mark = Decoration.mark({ attributes: { style: `outline: 1.5px solid ${color};` } });
+                  //const mark = Decoration.mark({ attributes: { style: `outline: 2px solid ${color};` } });
+                  const mark = Decoration.mark({ attributes: { class: `outline outline-2 outline-foreground` } });
                   return mark.range(from, to);
                 }),
               )
diff --git a/packages/react/src/components/MiniRepl.jsx b/packages/react/src/components/MiniRepl.jsx
index 27d17983..ae91bbb0 100644
--- a/packages/react/src/components/MiniRepl.jsx
+++ b/packages/react/src/components/MiniRepl.jsx
@@ -23,7 +23,6 @@ export function MiniRepl({
   punchcard,
   canvasHeight = 200,
   theme,
-  highlightColor,
 }) {
   drawTime = drawTime || (punchcard ? [0, 4] : undefined);
   const evalOnMount = !!drawTime;
@@ -72,7 +71,6 @@ export function MiniRepl({
     pattern,
     active: started && !activeCode?.includes('strudel disable-highlighting'),
     getTime: () => scheduler.now(),
-    color: highlightColor,
   });
 
   // keyboard shortcuts
diff --git a/packages/react/src/hooks/useHighlighting.mjs b/packages/react/src/hooks/useHighlighting.mjs
index 84262583..6e336586 100644
--- a/packages/react/src/hooks/useHighlighting.mjs
+++ b/packages/react/src/hooks/useHighlighting.mjs
@@ -1,7 +1,7 @@
 import { useEffect, useRef } from 'react';
 import { setHighlights } from '../components/CodeMirror6';
 
-function useHighlighting({ view, pattern, active, getTime, color }) {
+function useHighlighting({ view, pattern, active, getTime }) {
   const highlights = useRef([]);
   const lastEnd = useRef(0);
   useEffect(() => {
@@ -19,7 +19,7 @@ function useHighlighting({ view, pattern, active, getTime, color }) {
             highlights.current = highlights.current.filter((hap) => hap.whole.end > audioTime); // keep only highlights that are still active
             const haps = pattern.queryArc(...span).filter((hap) => hap.hasOnset());
             highlights.current = highlights.current.concat(haps); // add potential new onsets
-            view.dispatch({ effects: setHighlights.of({ haps: highlights.current, color }) }); // highlight all still active + new active haps
+            view.dispatch({ effects: setHighlights.of({ haps: highlights.current }) }); // highlight all still active + new active haps
           } catch (err) {
             view.dispatch({ effects: setHighlights.of({ haps: [] }) });
           }
@@ -33,7 +33,7 @@ function useHighlighting({ view, pattern, active, getTime, color }) {
         view.dispatch({ effects: setHighlights.of({ haps: [] }) });
       }
     }
-  }, [pattern, active, view, color]);
+  }, [pattern, active, view]);
 }
 
 export default useHighlighting;
diff --git a/website/src/repl/Repl.jsx b/website/src/repl/Repl.jsx
index f91310d6..ef8f427f 100644
--- a/website/src/repl/Repl.jsx
+++ b/website/src/repl/Repl.jsx
@@ -183,7 +183,6 @@ export function Repl({ embedded = false }) {
     pattern,
     active: started && !activeCode?.includes('strudel disable-highlighting'),
     getTime: () => scheduler.now(),
-    color: themeSettings?.foreground,
   });
 
   //
@@ -273,7 +272,7 @@ export function Repl({ embedded = false }) {
     <ReplContext.Provider value={context}>
       <div
         className={cx(
-          'h-screen flex flex-col',
+          'h-full flex flex-col',
           //        'bg-gradient-to-t from-green-900 to-slate-900', //
         )}
       >