JAVASCRIPT

get css custom property javascript

/* This will return the value of the --color custom property
   from the root element */
getComputedStyle(document.documentElement).getPropertyValue('--color')

const customButton = document.querySelector('.custom-btn')
/* This will return the value of the --color custom property
   from the root element since it is inherited down to the
   customButton element. */
getComputedStyle(customButton).getPropertyValue('--color')

/* This will return the value of the --background-color
   custom property from this customButton element */
getComputedStyle(customButton).getPropertyValue('--background-color')

javascript use css custom properties

Values in JavaScript
To use the values of custom properties in JavaScript, it is just like standard properties.
// get variable from inline style
element.style.getPropertyValue("--my-var");

// get variable from wherever
getComputedStyle(element).getPropertyValue("--my-var");

// set variable on inline style
element.style.setProperty("--my-var", jsVar + 4);