<img src="https://res.cloudinary.com/justrhysism/image/upload/f_auto,q_auto,w_600,dpr_auto/posts/twitter-light-mode-justrhysism-small-cap.png" />

<p>Click to toggle image dimmer.</p>

.dimmer-switch {
  position: relative;
  display: inline-block;
  cursor: pointer;
  
  img {
    display: inline-block;
    filter: brightness(40%) grayscale(50%);
    transition: filter 0.1s ease;
  }
  
  .icon {
    position: absolute;
    top: 10%;
    right: 10%;
    z-index: 1;
    
    border: 2px solid white;
    border-radius: 100%;
    padding: 3px;
    
    fill: white;
    opacity: 0.9;
    transition: opacity 0.1s ease;
  }
  
  &.is-on {
    .icon {
      opacity: 0.3;
    }
    
    img {
      filter: brightness(100%) grayscale(0%);
    }
  }
}

body {
  background: hsl(220, 20%, 16%);
  color: white;
  text-align: center;
}

img {
  max-width: 100%;
}

.dimmer-switch + p {
  margin-top: -2rem;
}

const sunglasses =
	'<svg class="icon" width="32" height="32" xmlns="http://www.w3.org/2000/svg"><path d="M15.018 12.975c-4.367-1.203-10.525-1.147-13.692-.613-.383.064-.443 1.823-.103 1.884.626.253.893.885.893.885s.187.561.73 2.841c.543 2.28 1.838 2.554 1.838 2.554s1.584.392 3.411.392c1.828 0 2.92-.083 4.091-.669 1.17-.585 1.682-2.216 1.682-2.216s.59-1.404.996-2.73c.127-.416 2.064-.416 2.191 0 .406 1.326.996 2.73.996 2.73s.512 1.63 1.682 2.216c1.17.586 2.263.669 4.09.669 1.828 0 3.412-.392 3.412-.392s1.295-.274 1.838-2.554c.543-2.28.73-2.84.73-2.84s.267-.633.893-.886c.34-.061.28-1.82-.103-1.884-3.167-.534-9.325-.59-13.693.613-.296.068-1.585.068-1.882 0z"/></svg>';

const TITLE_TAP_TOGGLE = 'Tap to toggle dimmer';
const TITLE_SPACE_TOGGLE = 'Tap or press spacebar to toggle dimmer';

function addDimmerSwitch(image) {
	// Wrap Image
	const wrapper = document.createElement('span');
	wrapper.classList.add('dimmer-switch');
	wrapper.title = TITLE_TAP_TOGGLE;
	wrapper.tabIndex = 0;

	image.insertAdjacentElement('beforebegin', wrapper);
	image.remove();
	wrapper.appendChild(image);

	// Add SVG
	wrapper.insertAdjacentHTML('afterbegin', sunglasses);

	// Toggles
	const toggleTitle = space => wrapper.title = space ? TITLE_SPACE_TOGGLE : TITLE_TAP_TOGGLE;
	const toggleDimmer = () => wrapper.classList.toggle('is-on');
  
	// Handlers
	const keyHandler = event => {
		event.preventDefault();
    
		// Not 'space'
		if (event.which !== 32) return;
		toggleDimmer();
	}
  
	const focusInHandler = () => toggleTitle(true);
	const focusOutHandler = () => toggleTitle(false);

	// Bind Events  
	wrapper.addEventListener('click', toggleDimmer);
	wrapper.addEventListener('keydown', keyHandler);
	wrapper.addEventListener('focusin', focusInHandler);
	wrapper.addEventListener('focusout', focusOutHandler);
}

const images = document.querySelectorAll('img');
images.forEach(addDimmerSwitch);