themed minirepl

+ add strudelTheme
+ add lineBackground with opacity
+ add some missing light flags
+ add fallback css variables for non js context

website/src/docs/MiniRepl.css

@@ -0,0 +1,9 @@
+.cm-activeLine {
+  background-color: transparent !important;
+}
+
+.cm-theme {
+  background-color: var(--background);
+  border: 1px solid var(--lineHighlight);
+  padding: 2px;
+}

website/src/docs/MiniRepl.jsx

@@ -2,6 +2,10 @@ 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 './MiniRepl.css';
+
+const theme = localStorage.getItem('strudel-theme') || 'strudelTheme';
 
 let modules;
 if (typeof window !== 'undefined') {
@@ -34,7 +38,14 @@ export function MiniRepl({ tune, drawTime, punchcard, canvasHeight = 100 }) {
   }, []);
   return Repl ? (
     <div className="mb-4">
-      <Repl tune={tune} hideOutsideView={true} drawTime={drawTime} punchcard={punchcard} canvasHeight={canvasHeight} />
+      <Repl
+        tune={tune}
+        hideOutsideView={true}
+        drawTime={drawTime}
+        punchcard={punchcard}
+        canvasHeight={canvasHeight}
+        theme={themes[theme]}
+      />
     </div>
   ) : (
     <pre>{tune}</pre>