Dark mode switch

by elanadw

HTML

<article>

  <button onclick="updateDarkModeState()">Switch to light mode</button>
  
  <h1>Website with a dark mode switch </h1>
  <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque scelerisque purus ut justo feugiat, et sollicitudin lacus volutpat. Suspendisse non nibh velit. Praesent mattis, justo sit amet pharetra aliquet, turpis turpis dapibus leo, vitae cursus nisi risus vel ante.
  </p>
  <p>
    <iframe title="The rise and fall of cigarette consumption in developed countries" aria-label="Interactive line chart" id="datawrapper-chart-Si30v" src="https://datawrapper.dwcdn.net/Si30v/2/" scrolling="no" frameborder="0" style="width: 0; min-width: 100% !important; border: none;" height="411" data-external="1"></iframe><script type="text/javascript">!function(){"use strict";window.addEventListener("message",(function(a){if(void 0!==a.data["datawrapper-height"]){var e=document.querySelectorAll("iframe");for(var t in a.data["datawrapper-height"])for(var r=0;r<e.length;r++)if(e[r].contentWindow===a.source){var i=a.data["datawrapper-height"][t]+"px";e[r].style.height=i}}}))}();
</script>
  </p>
  <p>
 Fusce ac mattis ex. Etiam ultricies ut diam nec dapibus. Nullam egestas sem et vestibulum volutpat. Fusce eleifend metus ut erat tristique auctor. Aliquam dapibus ipsum eget tellus gravida elementum. Nullam bibendum varius diam, vitae maximus nisl viverra non. Mauris a porta dolor. In orci sem, placerat vel nisl sit amet, dapibus interdum nunc. In dapibus faucibus nunc ut tempus. Suspendisse potenti.
 </p>
</article>

CSS

body {
  font-family: sans-serif;
}

body.dark-mode {
  background: #252525;
  color: white;
  color-scheme: dark;
}

article {
  max-width: 600px;
  margin: auto;
}

JavaScript

let dark = false;

// this function gets called when the user clicks the button to switch the color mode
function updateDarkModeState() {
  // update internal dark mode state
  dark = !dark;

  // collect datawrapper embeds on this page
  const embeds = document.querySelectorAll('iframe[src*="datawrapper.dwcdn"]');

  // update their src with new ?dark query string value
  Array.from(embeds).forEach((embed) => {
    const url = new URL(embed.src);
    const urlSearch = new URLSearchParams(url.search);
    urlSearch.set("dark", dark);
    url.search = urlSearch.toString();
    embed.src = url.href;
  });

  // website-specific dark mode switching logic
  document.body.classList.toggle("dark-mode", dark);
  document.querySelector("button").innerText = `Switch to ${dark ? "light" : "dark"} mode`;
}