<html> <head> <meta charset="UTF-8"> <title>css</title> <style type="text/css"> :root{ --color:red; --background-color: { background-color: color(#fff shade(+80%)); } } .css-v{ color: var(--color); @apply --background-color; } </style> </head> <body> <div class="css-v"> -------aspect-ratio-boxes------- </div> <div class=""> <input type="button" name="" id="button" value="1111111111" /> </div> <script type="text/javascript"> window.onload = function(){ function setColor() { let color = 'blue'; // codes to update loadProgress here return color; } document.getElementById('button').onclick = function(){ document.documentElement.style.setProperty('--color', setColor()) } } // Set width of progress bar </script> </body> </html>