Currently, I am attempting to dynamically retrieve the Radix Colors values in JavaScript. The reason for this requirement is that I generate these colors based on user input, resulting in values that are variable. As a result, I cannot hardcode the values.
My aim is to access the values stored inside a CSS variable, as the variables remain constant while the values change.
Despite my efforts within the component to retrieve the values, I always receive an empty string. I even used a setTimeout function to ensure that the variable is declared before logging the values.
const [accent7Color, setAccent7Color] = useState('');
const [accent8Color, setAccent8Color] = useState('');
useEffect(() => {
// Attempted with document.documentElement as well
const rootStyles = getComputedStyle(document.body);
const accent7 = rootStyles.getPropertyValue('--accent-7').trim();
const accent8 = rootStyles.getPropertyValue('--accent-8').trim();
setAccent7Color(accent7);
setAccent8Color(accent8);
setTimeout(() => {
console.log('Accent 7 Color:', accent7);
console.log('Accent 8 Color:', accent8);
console.log(accent7Color);
console.log(accent8Color);
}, 4000);
}, []);
It's worth noting that this code is not located at the root of the application, which might be causing the issue as it's deeply nested within the app.
I also attempted to define "rootStyles" outside of the useEffect and include it in the dependency array to ensure the function runs only when rootStyles is defined or its value changes, but this did not solve the problem. I'm stuck and in need of help.
I have exhausted the methods mentioned above, and I couldn't find any other solutions online. Any assistance would be greatly appreciated.