From c0bb3b31659f87779ababa48269668571d94a57f Mon Sep 17 00:00:00 2001 From: rakadu1 Date: Mon, 3 Nov 2025 16:51:17 +0530 Subject: [PATCH] Theme aware color logic. --- steps/src/p5/radarSketch.js | 12 ++++++++++-- steps/src/p5/zoomSketch.js | 5 ++++- 2 files changed, 14 insertions(+), 3 deletions(-) diff --git a/steps/src/p5/radarSketch.js b/steps/src/p5/radarSketch.js index c41dbc0..ad10bf4 100644 --- a/steps/src/p5/radarSketch.js +++ b/steps/src/p5/radarSketch.js @@ -260,9 +260,14 @@ export const radarSketch = function (p) { const sourceWidth = zoomWindowWidth / appState.zoomFactor; const sourceHeight = zoomWindowHeight / appState.zoomFactor; + // --- START: THEME-AWARE COLOR LOGIC --- + const isDark = document.documentElement.classList.contains("dark"); + const rectColor = isDark ? p.color(255, 80, 80, 200) : p.color(220, 20, 60, 180); + // --- END: THEME-AWARE COLOR LOGIC --- + p.push(); p.noFill(); - p.stroke(255, 0, 0, 150); // Semi-transparent red, visible in both themes. + p.stroke(rectColor); p.strokeWeight(1); // Reduced thickness. p.drawingContext.setLineDash([5, 3]); // Dashed line. p.rectMode(p.CENTER); @@ -274,9 +279,12 @@ export const radarSketch = function (p) { // Draw a temporary debug circle representing the hover radius. // This formula must match the one in drawUtils.js for accurate visualization. const hoverRadius = p.constrain(80 / appState.zoomFactor, 5, 25); + const isDark = document.documentElement.classList.contains("dark"); + const circleColor = isDark ? p.color(50, 205, 50, 200) : p.color(0, 128, 0, 180); + p.push(); p.noFill(); - p.stroke(148, 0, 211, 150); // Deep purple, semi-transparent. + p.stroke(circleColor); p.strokeWeight(1); p.ellipse(smoothedMouseX, smoothedMouseY, hoverRadius * 2, hoverRadius * 2); // Use smoothed values p.pop(); diff --git a/steps/src/p5/zoomSketch.js b/steps/src/p5/zoomSketch.js index d9ff4f4..a87d7bd 100644 --- a/steps/src/p5/zoomSketch.js +++ b/steps/src/p5/zoomSketch.js @@ -304,10 +304,13 @@ export const zoomSketch = function (p) { // --- START: Draw Purple Debug Circle --- // This circle represents the hover radius, drawn in the zoomed coordinate space. // The formula must match the one in drawUtils.js. + const isDark = document.documentElement.classList.contains("dark"); const hoverRadius = p.constrain(80 / appState.zoomFactor, 5, 25); + const circleColor = isDark ? p.color(50, 205, 50, 200) : p.color(0, 128, 0, 180); + p.push(); p.noFill(); - p.stroke(148, 0, 211, 150); // Deep purple, semi-transparent. + p.stroke(circleColor); // The stroke weight is divided by the zoom factor to keep it thin. p.strokeWeight(1 / appState.zoomFactor); p.drawingContext.setLineDash([5 / appState.zoomFactor, 3 / appState.zoomFactor]);