Changing Styles Dynamically

document.documentElement.style.setProperty('--theme-color', 'blue');
document.body.style.backgroundColor = 'var(--theme-color)';

On the :root selector
CSS custom properties (variables) should be defined on the :root selector (document.documentElement in JavaScript) for global scope. This makes them accessible throughout the entire document. Variables defined here can be overridden in more specific selectors, following the CSS cascade, making them perfect for theming and maintaining consistent styles across an application.
On the body element
On any parent element
It doesn't matter