responsive darkmode toggle

change the $buttonHeight variable in SCSS, the rest will scale accordingly. I'm using jQuery to add the relevant class for the switch here, you can use whatever you want to toggle the class.

by Ercan Cicek

HTML

<button onClick="toggleMode();" class="darkmode-toggle-container">
  <div class="soon-wrapper">
    <div class="soon-container light"></div>
    <div class="soon-container dark">
      <svg viewBox="0 0 43 48" fill="none" xmlns="http://www.w3.org/2000/svg">
        <circle opacity="0.75" cx="11.5" cy="36.5" r="11.5" fill="#E7E7E7" />
        <g opacity="0.5">
          <path d="M38.535 29.3887C41.3894 28.3498 42.8612 25.1936 41.8222 22.3393C41.3463 21.0316 40.4259 20.0141 39.2938 19.3953C40.7154 19.9505 41.9001 21.0913 42.4631 22.6381C43.502 25.4925 42.0303 28.6486 39.1759 29.6875C37.6292 30.2505 35.994 30.0762 34.6549 29.3443C35.8566 29.8137 37.2275 29.8646 38.535 29.3887Z" fill="#8E8E8E" />
          <path d="M35.465 19.3613C32.6106 20.4002 31.1389 23.5564 32.1778 26.4107C32.6537 27.7184 33.5741 28.7359 34.7062 29.3547C33.2846 28.7995 32.0999 27.6587 31.5369 26.1119C30.498 23.2575 31.9697 20.1014 34.8241 19.0625C36.3708 18.4995 38.0061 18.6738 39.3451 19.4057C38.1434 18.9363 36.7725 18.8854 35.465 19.3613Z" fill="#8E8E8E" />
        </g>
        <circle opacity="0.2" cx="22.2568" cy="7.25677" r="5.31233" transform="rotate(-60 22.2568 7.25677)" fill="#8E8E8E" />
      </svg>
    </div>
  </div>
  <div class="background-container light">
    <svg viewBox="0 0 57 39" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M6.5625 38H11.5742C14.1439 36.8355 15.9 34.4875 15.9 31.7808C15.9 30.8958 15.7123 30.0493 15.3699 29.2699C15.7766 30.1089 16.0015 31.0317 16.0015 32.0005C16.0015 34.5466 14.4478 36.7752 12.1246 38H23.6347C24.014 38.2133 24.4152 38.3962 24.8343 38.545C25.6577 38.8373 26.5506 38.9981 27.4834 39L27.5 39C29.1597 39 30.6935 38.4968 31.9358 37.645C33.7544 36.398 34.9484 34.4039 34.9984 32.1474C34.9994 32.1981 35 32.249 35 32.3C35 34.5559 33.9329 36.5625 32.2759 37.8427C33.5997 38.5703 35.233 39 37 39C41.4183 39 45 36.3137 45 33C45 29.6863 41.4183 27 37 27C36.4789 27 35.9695 27.0374 35.4762 27.1087C34.377 24.7022 31.6679 23 28.5 23C26.6998 23...

SCSS

$buttonHeight: 75px;

.darkmode-toggle-container {
  position: relative;
  width: $buttonHeight * 2.1;
  height: $buttonHeight;
  border-radius: $buttonHeight / 2;
  border: 2px solid #373A3F;
  cursor: pointer;
  transition: border-color .5s ease-in-out;
  outline: none;
  padding: 0;
  overflow: hidden;

  >.soon-wrapper {
    position: absolute;
    top: 50%;
    left: 10%;
    width: $buttonHeight * 0.64;
    height: $buttonHeight * 0.64;
    transform: translateY(-50%);
    z-index: 2;
    transition: left .5s ease-in-out;

    >.soon-container {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      overflow: hidden;
      transition: opacity .5s ease-in-out;

      &.light {
        background-color: #FFEC67;
        box-shadow: 2px 2px 10px rgba(255, 236, 103, 0.5), 0px 10px 12px rgba(255, 236, 103, 0.26);
        opacity: 1;
      }

      &.dark {
        background-color: #F7F7F7;
        box-shadow: 1px 1px 10px rgba(246, 246, 246, 0.7);
        opacity: 0;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        >svg {
          width: 80%;
          height: 80%;
        }
      }
    }

  }

  >.background-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: opacity .5s ease-in-out;

    &.light {
      background: linear-gradient(270deg, #00ADFF 34.23%, #69DFFF 100%);
      opacity: 1;
      >svg {
        position: absolute;
        top: 50%;
        left: 50%;
        height: 50%;
        transform: translateY(-50%);
      }
    }

    &.dark {
      background: linear-gradient(270deg, #003DCB 1.34%, #0066FF 100%);
      opacity: 0;
      >svg {
        position: absolute;
        top: 50%;
        left: 20%;
        height: 70%;
        transform: translateY(-50%);
      }
    }
  }

  &.darkmode-active {
    border-color: #ffffff;
    >.soon-wrapper {
      left: 60%;

     ...

JavaScript

function toggleMode() {
	$(".darkmode-toggle-container").toggleClass("darkmode-active");
}