<!-- swipe effect -->
<div id="curtains">
  <div class="curtain left-curtain"></div>
  <div class="curtain right-curtain"></div>
</div>

<!-- liquid triangle shape -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 308.95 358.87">
  <defs>
    <linearGradient id="orange" x1="76.7" y1="190.44" x2="279.75" y2="-12.62" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="#ff8902"/>
      <stop offset="1" stop-color="#ff024b"/>
    </linearGradient>
    <linearGradient id="purple" x1="170.48" y1="309.24" x2="365.21" y2="114.5" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="#7c00f2"/>
      <stop offset="1" stop-color="#f8006e"/>
    </linearGradient>
    <linearGradient id="pink" x1="170.48" y1="309.24" x2="365.21" y2="114.5" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="#7c00f2"/>
      <stop offset="1" stop-color="#FA02D2"/>
    </linearGradient>
    <linearGradient id="bajablast" x1="170.48" y1="309.24" x2="365.21" y2="114.5" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="#01FF8D"/>
      <stop offset="1" stop-color="#00FFFB"/>
    </linearGradient>
  </defs>
  <path class="top right" d="M352.49,115L202.91,375.19a3.35,3.35,0,0,1-5.82,0L146.5,287.25s-4.25-7.58-4.25-21c0-11.25,13.33-22.24,25.42-35.92,10.21-11.55,16.56-22.35,22.21-21.94a3.29,3.29,0,0,1,3.07,3.28c-0.18,7.1-16.58,16.13-21.45,21.57-4.65,5.2-15.11,14.88-12,20.17a3.18,3.18,0,0,0,3.15,1.48c8.48-1.1,10.3-10.74,14.52-8.9,6.8,3-8.43,11.82-9.43,24.6a3.37,3.37,0,0,0,.1,1.14c1.78,6.68,21.69,41.05,29.28,54a3.35,3.35,0,0,0,5.8,0L310,139.77a3.35,3.35,0,0,0-2.93-5c-7.32.07-19-.65-20.73-5.81-0.94-2.75-.19-5,1.69-9.37,2.33-5.43-5.06-7.62-3.75-14.81,0.87-4.77,9.58-14.88,10.85-16.33a3.13,3.13,0,0,0,.28-0.36c1-1.56,8-12.15,12.63-13.65a3.13,3.13,0,0,1,2,.09c7.55,2.81-9.87,10.63-12.19,17.21a3.35,3.35,0,0,0,4.66,4C328,83.67,331.76,55.34,340.83,61.5c10.5,6.33-35.33,31.83-29.33,41.17,4.51,7,27.07,7.49,38,7.29A3.35,3.35,0,0,1,352.49,115ZM184.37,232.59c-1.49,1.9-1.49,4.38,0,5.54s3.89,0.56,5.38-1.34,1.49-4.38,0-5.54S185.86,230.69,184.37,232.59Z" transform="translate(-44 -18.01)"/>
  <path class="top left" d="M44,110H196a64.86,64.86,0,0,0,26-5c16.5-6.87,19-11.36,23.63-13.75,4.38-2.25,9.13,2.81,5.24,5.53-7.62,5.34-2.4,7.07-2.35,7.1a0.31,0.31,0,0,0,.15-0.05c5.15,3.62,28.73-19.79,49.58-44.08,13.82-16.1,31.42-43.75,37.88-41.62,12.58,4.14-16.37,30-31,43.5-5.07,4.68-21.69,23.07-31.87,34.13C270.57,98.66,260.13,110,251,118.33s-10.67,9.17-14.62,8.92-2.74-3-8.71-3.58c-4.67-.46-9.79,9-27.67,10.33H87s26.9,49,39.63,68.63c5.5,8.5,9.05,7.8,9.38,7.88,7.43,1.78,14.42-8.35,18.19-11.56a3,3,0,0,1,3.38-.38c2.22,1.23.09,3.23,3.44,3.44,8.17,0.5,17-9.86,20.33-14.33,5-6.68,11-23.44,19.38-17.94,5.16,3.4-10.48,18.28-26.47,34.65-15.32,15.68-28.14,35-42.58,34-15.42-1.08-20.67-12.48-25.79-21.46C85.25,180.75,44,110,44,110Zm180.1,34.4c-1.53-1.69-4.9-1.14-7.54,1.24s-3.54,5.68-2,7.37,4.9,1.14,7.54-1.24S225.62,146.09,224.1,144.4ZM273,67.48c-1.47-1.3-4.12-.7-5.92,1.33s-2.06,4.74-.59,6,4.12,0.7,5.92-1.33S274.47,68.78,273,67.48Z" transform="translate(-44 -18.01)"/>
  <path class="bottom right" d="M352.49,115L202.91,375.19a3.35,3.35,0,0,1-5.82,0L146.5,287.25s-4.25-7.58-4.25-21c0-11.25,13.33-22.24,25.42-35.92,10.21-11.55,16.56-22.35,22.21-21.94a3.29,3.29,0,0,1,3.07,3.28c-0.18,7.1-16.58,16.13-21.45,21.57-4.65,5.2-15.11,14.88-12,20.17a3.18,3.18,0,0,0,3.15,1.48c8.48-1.1,10.3-10.74,14.52-8.9,6.8,3-8.43,11.82-9.43,24.6a3.37,3.37,0,0,0,.1,1.14c1.78,6.68,21.69,41.05,29.28,54a3.35,3.35,0,0,0,5.8,0L310,139.77a3.35,3.35,0,0,0-2.93-5c-7.32.07-19-.65-20.73-5.81-0.94-2.75-.19-5,1.69-9.37,2.33-5.43-5.06-7.62-3.75-14.81,0.87-4.77,9.58-14.88,10.85-16.33a3.13,3.13,0,0,0,.28-0.36c1-1.56,8-12.15,12.63-13.65a3.13,3.13,0,0,1,2,.09c7.55,2.81-9.87,10.63-12.19,17.21a3.35,3.35,0,0,0,4.66,4C328,83.67,331.76,55.34,340.83,61.5c10.5,6.33-35.33,31.83-29.33,41.17,4.51,7,27.07,7.49,38,7.29A3.35,3.35,0,0,1,352.49,115ZM184.37,232.59c-1.49,1.9-1.49,4.38,0,5.54s3.89,0.56,5.38-1.34,1.49-4.38,0-5.54S185.86,230.69,184.37,232.59Z" transform="translate(-44 -18.01)"/>
  <path class="bottom left" d="M44,110H196a64.86,64.86,0,0,0,26-5c16.5-6.87,19-11.36,23.63-13.75,4.38-2.25,9.13,2.81,5.24,5.53-7.62,5.34-2.4,7.07-2.35,7.1a0.31,0.31,0,0,0,.15-0.05c5.15,3.62,28.73-19.79,49.58-44.08,13.82-16.1,31.42-43.75,37.88-41.62,12.58,4.14-16.37,30-31,43.5-5.07,4.68-21.69,23.07-31.87,34.13C270.57,98.66,260.13,110,251,118.33s-10.67,9.17-14.62,8.92-2.74-3-8.71-3.58c-4.67-.46-9.79,9-27.67,10.33H87s26.9,49,39.63,68.63c5.5,8.5,9.05,7.8,9.38,7.88,7.43,1.78,14.42-8.35,18.19-11.56a3,3,0,0,1,3.38-.38c2.22,1.23.09,3.23,3.44,3.44,8.17,0.5,17-9.86,20.33-14.33,5-6.68,11-23.44,19.38-17.94,5.16,3.4-10.48,18.28-26.47,34.65-15.32,15.68-28.14,35-42.58,34-15.42-1.08-20.67-12.48-25.79-21.46C85.25,180.75,44,110,44,110Zm180.1,34.4c-1.53-1.69-4.9-1.14-7.54,1.24s-3.54,5.68-2,7.37,4.9,1.14,7.54-1.24S225.62,146.09,224.1,144.4ZM273,67.48c-1.47-1.3-4.12-.7-5.92,1.33s-2.06,4.74-.59,6,4.12,0.7,5.92-1.33S274.47,68.78,273,67.48Z" transform="translate(-44 -18.01)"/>
</svg>

@import url("https://fonts.googleapis.com/css?family=Montserrat:700");

$size: 350px;
$curtainspeed: 500ms;
$transitionspeed: 650ms;
$transitiondelay: 100ms;

html,
body {
  height: 100%;
}
body {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  background: #f6f6f6;

  #curtains {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    z-index: 4;
    overflow: hidden;
  }
  .curtain {
    position: absolute;
    height: 100%;
    width: 200%;
    background: #1d1d1d;
    transition: left $curtainspeed ease, right $curtainspeed ease;

    &.left-curtain {
      transform: skew(-43deg);
      left: -300%;
    }
    &.right-curtain {
      transform: skew(-43deg);
      right: -300%;
    }
  }
  svg {
    position: relative;
    z-index: 5;
    width: $size;
    height: $size;

    path {
      transition: opacity $transitionspeed ease;
      transition-delay: $transitiondelay;
    }
  }
  .top {
    opacity: 1;
    z-index: 2;

    &.left {
      fill: url(#orange);
    }
    &.right {
      fill: url(#purple);
    }
  }
  .bottom {
    opacity: 0;
    z-index: 1;

    &.left {
      fill: url(#pink);
    }
    &.right {
      fill: url(#bajablast);
    }
  }
  &::after {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 10;
    padding: 8px 12px;
    background: rgba(29, 29, 29, 0.75);
    border-radius: 30px;
    content: "Go to Dark Theme";
    font-size: 13px;
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    transition: color $transitionspeed ease, background $transitionspeed ease;
    transition-delay: $transitiondelay;
    color: #f6f6f6;
    opacity: 0.75;
  }
  &.dark {
    .curtain {
      &.left-curtain {
        left: -150%;
      }
      &.right-curtain {
        right: calc(-150% + 1px);
      }
    }
    .top {
      opacity: 0;
    }
    .bottom {
      opacity: 1;
    }
    &::after {
      content: "Go to Light Theme";
      color: #1d1d1d;
      background: rgba(246, 246, 246, 0.7);
    }
  }
}

const body = document.querySelector("body");
body.addEventListener("click", toggleColor);

// toggle class on <body>
function toggleColor(e) {
  body.classList.toggle("dark");
}