visuals now adhere to theme by default

packages/codemirror/themes.mjs

@@ -37,6 +37,7 @@ import whitescreen, { settings as whitescreenSettings } from './themes/whitescre
 import teletext, { settings as teletextSettings } from './themes/teletext';
 import algoboy, { settings as algoboySettings } from './themes/algoboy';
 import terminal, { settings as terminalSettings } from './themes/terminal';
+import { setTheme } from '@strudel/draw';
 
 export const themes = {
   strudelTheme,
@@ -513,6 +514,7 @@ export function activateTheme(name) {
         .map(([key, value]) => `--${key}: ${value} !important;`)
         .join('\n')}
     }`;
+  setTheme(themeSettings);
   // tailwind dark mode
   if (themeSettings.light) {
     document.documentElement.classList.remove('dark');

packages/draw/draw.mjs

@@ -68,7 +68,7 @@ Pattern.prototype.draw = function (fn, options) {
     fn(memory[id], _t, t, this);
     animationFrames[id] = requestAnimationFrame(animate);
   };
-  requestAnimationFrame(animate);
+  animationFrames[id] = requestAnimationFrame(animate);
   return this;
 };
 
@@ -183,3 +183,18 @@ export class Drawer {
     }
   }
 }
+
+export function getComputedPropertyValue(name) {
+  if (typeof window === 'undefined') {
+    return '#fff';
+  }
+  return getComputedStyle(document.documentElement).getPropertyValue(name);
+}
+
+let theme = {};
+export function getTheme() {
+  return theme;
+}
+export function setTheme(_theme) {
+  theme = _theme;
+}

packages/draw/pianoroll.mjs

@@ -5,6 +5,7 @@ This program is free software: you can redistribute it and/or modify it under th
 */
 
 import { Pattern, noteToMidi, freqToMidi } from '@strudel/core';
+import { getTheme } from './draw.mjs';
 
 const scale = (normalized, min, max) => normalized * (max - min) + min;
 const getValue = (e) => {
@@ -103,11 +104,8 @@ export function pianoroll({
   flipTime = 0,
   flipValues = 0,
   hideNegative = false,
-  // inactive = '#C9E597',
-  // inactive = '#FFCA28',
-  inactive = '#7491D2',
-  active = '#FFCA28',
-  // background = '#2A3236',
+  inactive = getTheme().foreground,
+  active = getTheme().foreground,
   background = 'transparent',
   smear = 0,
   playheadColor = 'white',

packages/draw/spiral.mjs

@@ -1,4 +1,5 @@
 import { Pattern } from '@strudel/core';
+import { getTheme } from './draw.mjs';
 
 // polar coords -> xy
 function fromPolar(angle, radius, cx, cy) {
@@ -19,7 +20,7 @@ function spiralSegment(options) {
     cy = 100,
     rotate = 0,
     thickness = margin / 2,
-    color = 'steelblue',
+    color = getTheme().foreground,
     cap = 'round',
     stretch = 1,
     fromOpacity = 1,
@@ -61,7 +62,8 @@ function drawSpiral(options) {
     playheadThickness = thickness,
     padding = 0,
     steady = 1,
-    inactiveColor = '#ffffff50',
+    activeColor = getTheme().foreground,
+    inactiveColor = getTheme().gutterForeground,
     colorizeInactive = 0,
     fade = true,
     // logSpiral = true,
@@ -102,7 +104,8 @@ function drawSpiral(options) {
     const isActive = hap.whole.begin <= time && hap.endClipped > time;
     const from = hap.whole.begin - time + inset;
     const to = hap.endClipped - time + inset - padding;
-    const color = hap.value?.color;
+    const hapColor = hap.value?.color || activeColor;
+    const color = colorizeInactive || isActive ? hapColor : inactiveColor;
     const opacity = fade ? 1 - Math.abs((hap.whole.begin - time) / min) : 1;
     spiralSegment({
       ctx,
@@ -110,7 +113,7 @@ function drawSpiral(options) {
       from,
       to,
       rotate,
-      color: colorizeInactive || isActive ? color : inactiveColor,
+      color,
       fromOpacity: opacity,
       toOpacity: opacity,
     });

packages/webaudio/scope.mjs

@@ -1,5 +1,5 @@
 import { Pattern, clamp } from '@strudel/core';
-import { getDrawContext } from '../draw/index.mjs';
+import { getDrawContext, getTheme } from '@strudel/draw';
 import { analysers, getAnalyzerData } from 'superdough';
 
 export function drawTimeScope(
@@ -132,10 +132,13 @@ Pattern.prototype.fscope = function (config = {}) {
  * @example
  * s("sawtooth").scope()
  */
+let latestColor = {};
 Pattern.prototype.tscope = function (config = {}) {
   let id = config.id ?? 1;
   return this.analyze(id).draw(
-    () => {
+    (haps) => {
+      config.color = haps[0]?.value?.color || getTheme().foreground;
+      latestColor[id] = config.color;
       clearScreen(config.smear, '0,0,0', config.ctx);
       drawTimeScope(analysers[id], config);
     },

website/src/repl/Repl.jsx

@@ -66,7 +66,7 @@ export function Repl({ embedded = false }) {
     const drawTime = [-2, 2];
     const drawContext = getDrawContext();
     const editor = new StrudelMirror({
-      sync: true,
+      sync: false,
       defaultOutput: webaudioOutput,
       getTime: () => getAudioContext().currentTime,
       setInterval,