Back to Museum

Weird Dark Mode

A dark mode toggle that takes its job very literally. Why design custom stylesheets or hand-pick color scales when you can just turn every single element, text block, and border completely pitch black?

Live Preview

Preview Frame Light Mode

Welcome to my website

This is an elegant mockup of a generic user interface. It has crisp text, distinct borders, and highly functional buttons.

Toggle dark mode using the action below:

Source Code

weird_dark_mode.html

<h1>Welcome to my website</h1>
<p>This website is in light mode</p>

<p>Toggle dark mode using the button below</p>
<span style="border: 1px solid black; padding: 2px 1px; cursor: pointer;" id="dark_mode">Toggle Dark Mode</span>

<script>
  const toggleBtn = document.getElementById("dark_mode");

  toggleBtn.addEventListener("click", () => {
    const allElements = document.querySelectorAll("*");

    if (document.body.style.backgroundColor === "black") {
      allElements.forEach(el => {
        el.style.backgroundColor = "";
        el.style.color = "";
        el.style.borderColor = "";
      });
    } else {
      allElements.forEach(el => {
        el.style.backgroundColor = "black";
        el.style.color = "black";
        el.style.borderColor = "black";
      });
    }
  });
</script>