JSFiddle - React, Tailwind, and code Playground

by dumptyd

JavaScript

// for vue-css-donut-chart
const addDarkMode = () => {
  document.documentElement.style.backgroundColor = '#fff';
  document.querySelector('#app').style.display = 'flow-root';
  const div = document.createElement('DIV');
  div.style.background = '#fff';
  div.style.position = 'fixed';
  div.style.mixBlendMode = 'difference';
  div.style.height = '100vh';
  div.style.width = '100vw';
  div.style.zIndex = 999;
  div.style.pointerEvents = 'none';
  document.body.prepend(div)
}

// for any site. uses an extra element to overcome the chrome bug where it doesn't blend well against a transparent background
const addDarkModeToAnySite = () => {
  const bgDiv = document.createElement('DIV');
  const blendDiv = document.createElement('DIV');
  
  bgDiv.style.zIndex = -100;
	blendDiv.style.mixBlendMode = 'difference';
  blendDiv.style.zIndex = 999;
	
  [bgDiv, blendDiv].forEach(d => {
  	d.style.background = '#fff';
    d.style.position = 'fixed';
    d.style.height = '100vh';
    d.style.width = '100vw';
    d.style.pointerEvents = 'none';
    d.style.top = 0;
    d.style.left = 0;
    
    document.body.prepend(d);
  });
}