createGraphics change of color for dark mode - p5.js

Question

Got a p5.js sketch that I want to update when I change the body color so I can use the animation in dark mode as well. However, when I implement the interaction for the body color changes the graphic fails to update its color. Not sure if I need to create a new function and then call it in Draw again?
//p5.js hero animation//
let font
let graphic
let body = document.querySelector("body")
let bodyTextColor = window.getComputedStyle(body).getPropertyValue("color");
function responsive () {
graphic = createGraphics(windowWidth / 1.1, windowHeight)
graphic.fill(bodyTextColor);
graphic.textSize(windowWidth * 0.4);
graphic.textAlign(CENTER, CENTER);
graphic.textFont('GT cinetype');
graphic.textStyle(ITALIC);
graphic.text("aaaa", windowWidth / 2, windowHeight / 2);
}
function setup () {
var myCanvas = createCanvas(windowWidth, windowHeight);
myCanvas.parent('p5-container');
responsive();
}
function draw () {
background("0, 0, 0, 255");
const tileSize = 20
for (let x = 0; x < 120; x = x + 1) {
for (let y = 0; y < 60; y = y + 1) {
const wave = 0.03
const distortionX = sin(frameCount * wave + x * 0.5 + y * 0.2) * 30
const distortionY = sin(frameCount * wave + x * 0.5 + y * 1.1) * 10
const sx = x * tileSize + distortionX
const sy = y * tileSize + distortionY
const sw = tileSize
const sh = tileSize
const dx = x * tileSize
const dy = y * tileSize
const dw = tileSize
const dh = tileSize
image(graphic, dx, dy, dw, dh, sx, sy, sw, sh)
graphic.fill(bodyTextColor);
}
}
}
function windowResized() {
resizeCanvas(windowWidth, windowHeight);
responsive();
}
here is the link to the temporary site https://jaramillo-arango.webflow.io/