<div id="result" style="--opacity: .5"></div>

<input type="range" min="0" max="1" step="0.01" value=".5" oninput="result.style.setProperty('--opacity', event.target.value)" />

@keyframes add-opacity {
  to { color: transparent }
}

body {
  margin: 1em;
  width: 300px;
}

// theme.css
:root {
  --color-primary: rgb(9, 123, 166);
}

// some-page.css
div {
  height: 30px;
  background: currentColor;
  color: var(--color-primary);
  animation: add-opacity 1s calc((1 - var(--opacity)) * -1s) linear paused forwards;
}

[type="range"] {
  width: 100%;
  margin-top: .5em;
}

window.result = document.getElementById('result');

result.onclick = function() {
  console.log(getComputedStyle(this).backgroundColor);
};