How to get the root style declarations on the HTML document?

Question

I have defined some styles in the :root and global namespace. But when I try to access them programmatically I am getting an error:

TypeError: Window.getComputedStyle: Argument 1 does not implement interface Element.

Here is my style rule:

:root {
    --my-css-variable: green; 
}

Here is what I have tried:

var variable = "--my-css-variable";


// all of the following error
window.getComputedStyle(window).getPropertyValue(variable);
window.getComputedStyle(window.document).getPropertyValue(variable);
window.getComputedStyle(window.document.body).getPropertyValue(variable);

When I select an element on the page and look in debug tools it says element is inheriting from HTML:

Answer 1

You could try:

getComputedStyle(document.documentElement)
    .getPropertyValue('--my-css-variable');