CSS - CUSTOM PROPERTIES

    //CUSTOM PROPERTIES
    :root{
        --primary-color: green;
        --border: 1px solid blue;
    }

    h2{background-color: var(--primary-color);} /*Use*/
    p{ --border: 3px solid yellow;} /*Override*/
    p{margin: var(--margin, 10px);} /*if not declared, you can set a default value. ex:  It means that if the variable --margin is not declared in root, it will take 10px of value*/

    //JAVASCRIPT MODIFICATION
    <script>
    const button = document.querySelector('button').addEventListener('click', ()=> {
        console.log(getComputedStyle(document.documentElement).getPropertyValue('--primary-color'))
        document.documentElement.style.setProperty('--primary-color', 'white')
        document.documentElement.style.setProperty('--border', '2px dotted cyan')
      })
    </script>

Paragraph Example, click button