<input type="color" value="#72abff" />
<!-- some fake navigation bar of a web site -->
  <a class="icon-dev-to" href="https://dev.to" rel="noopener noreferrer" target="_blank" aria-label="dev.to website"></a>
<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);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.