About
Work
Studio
Contact

<button class="toggle-scheme">
  <span class="toggle-scheme__icon toggle-scheme__icon--main"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
      <path fill="none" d="M0 0h24v24H0z"></path>
      <path d="M12 21.9966C6.47715 21.9966 2 17.5194 2 11.9966C2 6.47373 6.47715 1.99658 12 1.99658C17.5228 1.99658 22 6.47373 22 11.9966C22 17.5194 17.5228 21.9966 12 21.9966ZM12 19.9966C16.4183 19.9966 20 16.4149 20 11.9966C20 7.5783 16.4183 3.99658 12 3.99658C7.58172 3.99658 4 7.5783 4 11.9966C4 16.4149 7.58172 19.9966 12 19.9966ZM7.00035 15.3158C9.07995 15.1645 11.117 14.2938 12.7071 12.7037C14.2972 11.1136 15.1679 9.07654 15.3193 6.99694C15.6454 7.21396 15.955 7.46629 16.2426 7.75394C18.5858 10.0971 18.5858 13.8961 16.2426 16.2392C13.8995 18.5824 10.1005 18.5824 7.75736 16.2392C7.46971 15.9516 7.21738 15.642 7.00035 15.3158Z" fill="rgba(0,0,0,1)"></path>
    </svg></span>
  <span class="toggle-scheme__icon toggle-scheme__icon--alt"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
      <path fill="none" d="M0 0h24v24H0z"></path>
      <path d="M12 21.9966C6.47715 21.9966 2 17.5194 2 11.9966C2 6.47373 6.47715 1.99658 12 1.99658C17.5228 1.99658 22 6.47373 22 11.9966C22 17.5194 17.5228 21.9966 12 21.9966ZM5.32889 16.4219C6.76378 18.5674 9.20868 19.9801 11.9836 19.9801C16.4018 19.9801 19.9836 16.3984 19.9836 11.9801C19.9836 9.20518 18.5707 6.76021 16.4251 5.32535C17.2705 8.35312 16.5025 11.7367 14.1213 14.118C11.7401 16.4992 8.3566 17.2671 5.32889 16.4219Z" fill="var(--black)"></path>
    </svg></span>
</button>

/* Code For Switch */

.toggle-scheme {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 24px;
  display: flex;
}
.toggle-scheme__icon {
  width: 24px;
  height: 24px;
}
.toggle-scheme__icon--alt {
  width: 24px;
  height: 24px;
  display: none;
}

/* End Code For Switch */

.content {
  padding: 20px;
}
:root {
  --black: #000;
  --white: #fff;
}

body {
  background-color: var(--white);
}

.color-scheme--alt {
  --black: #fff;
  --white: #000;
}

document.addEventListener("DOMContentLoaded", function () {
  const toggleButton = document.querySelector(".toggle-scheme");
  const mainIcons = document.querySelectorAll(".toggle-scheme__icon--main");
  const altIcons = document.querySelectorAll(".toggle-scheme__icon--alt");

  // Get user preference from local storage
  const userPreference = localStorage.getItem("prefers-color-scheme");

  // Set the initial color scheme based on user preference
  if (userPreference === "alt") {
    document.documentElement.classList.add("color-scheme--alt");
    toggleIcons(mainIcons, "none");
    toggleIcons(altIcons, "inline");
  } else {
    document.documentElement.classList.remove("color-scheme--alt");
    toggleIcons(mainIcons, "inline");
    toggleIcons(altIcons, "none");
  }

  // Toggle color scheme when button is clicked
  toggleButton.addEventListener("click", function () {
    const currentScheme = document.documentElement.classList.contains(
      "color-scheme--alt"
    )
      ? "alt"
      : "main";
    if (currentScheme === "main") {
      document.documentElement.classList.add("color-scheme--alt");
      localStorage.setItem("prefers-color-scheme", "alt");
      toggleIcons(mainIcons, "none");
      toggleIcons(altIcons, "inline");
    } else {
      document.documentElement.classList.remove("color-scheme--alt");
      localStorage.setItem("prefers-color-scheme", "main");
      toggleIcons(mainIcons, "inline");
      toggleIcons(altIcons, "none");
    }
  });

  // Helper function to toggle the display of elements with a given class
  function toggleIcons(elements, displayValue) {
    elements.forEach(function (element) {
      element.style.display = displayValue;
    });
  }
});

Start a project

Elucidate Studios.

New site coming soon.