<a href="">anchor outside header</a>

<header id="header">
  <a href="">anchor inside header</a>
</header>

<button id="foo">Toggle header's --primary-color into green</button>
::root {
  --default-color: #000000;
}
header {
 --primary-color: #ff0000;
}
a {
 color: var(--primary-color, --default-color);
}

button {
  margin-top: 20px;
}
document.getElementById('foo').onclick = function(){    
	document.getElementById('header').style.setProperty('--primary-color', 'green');
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.