Access CSS variables using Javascript

CSS_vars_JS.html

<style>
  // Define your variables at the root level in CSS
  // This can be in a separate CSS file, that works fine too
  :root {
    --color_primary: #ff0000;
  }
</style>

<script>
  // This function gets a CSS variable from the root document element
  function getCSSVar(variable) {
    return window.getComputedStyle(document.documentElement).getPropertyValue('--' + variable);
  }

  // Example usage
  document.write('The colour primary is: ' + getCSSVar('color_primary'));
</script>

<!-- Source: https://www.reddit.com/r/webdev/comments/1iwoyw2/how_to_access_css_variables_using_javascript/ -->