<input type="color" value="#72abff" />
<!-- some fake navigation bar of a web site -->
<div>
  <a class="icon-dev-to" href="https://dev.to" rel="noopener noreferrer" target="_blank" aria-label="dev.to website"></a>
</div>
<p>Note if you refresh the page and the colour picker was already open, you will need to close it first then reopen it for colours to start changing again.</p>

:root {
    --logo-color: #72abff;
    --logo-size: 15rem;
}

.icon-dev-to {  
  display: inline-block;
  width: var(--logo-size);
  height: var(--logo-size);
  background-size: var(--logo-size);
  background-position-x: center;
  background-position-y: center;
  -webkit-mask: url(https://unpkg.com/[email protected]/icons/dev-dot-to.svg);
  mask: url(https://unpkg.com/[email protected]/icons/dev-dot-to.svg);
  background-color:  var(--logo-color);
}

document.addEventListener('DOMContentLoaded', () => {
  const colourPicker = document.querySelector('input[type="color"]'); 
  
  colourPicker.addEventListener('change', e => {     
    document.documentElement.style.setProperty('--logo-color', e.target.value);
  });
});