In my current code, I have set 2 HSL colors:
scene.background = new THREE.Color("hsl(0, 100%, 50%)");
var light = new THREE.AmbientLight("hsl(180, 100%, 50%)");
I am attempting to pass a variable for 'hue' from my CSS.
After running the code, I can see the 2 color variables I defined in my CSS, which are 0 and 180:
var style = getComputedStyle(document.body);
console.log(style.getPropertyValue("--color-accent-hue")); // get accent hue color
console.log(style.getPropertyValue("--color-accent-hue-inverse")); // get accent hue inverse color
Initially, I defined these as JS variables like so:
const colorAccentHue = style.getPropertyValue('--color-accent-hue');
const colorAccentHueInverse = style.getPropertyValue('--color-accent-hue-inverse');
Then I tried to use them within my init() function:
scene.background = new THREE.Color("hsl(colorAccentHue, 100%, 50%)");
var light = new THREE.AmbientLight("hsl(colorAccentHueInverse, 100%, 50%)");`
However, I am not getting the desired result. What am I missing here?