SCSS

by brunomuller

HTML

<div class="wrapper">

  <div class="svg-wrapper">
    <svg width="144" height="143" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="purple">
      <defs>
        <circle id="path-1" cx="87.631" cy="87.5" r="71.5"/>
        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-3">
          <stop stop-color="#FFF" stop-opacity=".421" offset="0%"/>
          <stop stop-color="#FFF" stop-opacity="0" offset="100%"/>
        </linearGradient>
        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-4">
          <stop stop-color="#FFF" stop-opacity=".178" offset="0%"/>
          <stop stop-color="#FFF" stop-opacity="0" offset="100%"/>
        </linearGradient>
        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-5">
          <stop stop-color="#FFF" stop-opacity=".509" offset="0%"/>
          <stop stop-color="#FFF" stop-opacity="0" offset="100%"/>
        </linearGradient>
      </defs>
      <g id="Page-1" fill="none" fill-rule="evenodd">
        <g id="Group-Copy" transform="translate(-16 -16)">
          <mask id="mask-2" fill="#fff">
            <use xlink:href="#path-1"/>
          </mask>
          <use id="bg" fill="#272747" xlink:href="#path-1"/>
          <ellipse id="ground" opacity=".723" mask="url(#mask-2)" cx="93.131" cy="133.5" rx="70" ry="26.5"/>
          <path id="light-1" fill="url(#linearGradient-3)" style="mix-blend-mode:overlay" opacity=".566" mask="url(#mask-2)" d="M48.63 0h51l-25.5 127.708h-51z"/>
          <path id="light-2" fill="url(#linearGradient-4)" style="mix-blend-mode:overlay" opacity=".566" mask="url(#mask-2)" d="M50.811 2.146h29.75l-23.11 127.708H27.7z"/>
          <path id="light-3" fill="url(#linearGradient-5)" style="mix-blend-mode:overlay" opacity=".566" mask="url(#mask-2)" d="M114.658 3.146h21.526l-21.526 127.708H93.13z"/>
          <g id="sw-right-back" mask="url(#mask-2)">
            <g id="Rectangle">
              <path...

SCSS

$purple-front: #1A1323;
$purple-back: #1F1532;
$purple-ground: #212139;
$purple-bg: #272747;

$green-front: #0F201D;
$green-back: #1D2F26;
$green-ground: #212139;
$green-bg: #272747;

$dark-front: #17171B;
$dark-back: #1D1D24;
$dark-ground: #323241;
$dark-bg: #2A2A38;

body {
  background: #101016;
}

svg.purple {
  #sw-right-back, #sw-left-back {
    fill: $purple-back;
  }

  #sw-right-front, #sw-left-front {
    fill: $purple-front;
  }

  #ground {
    fill: $purple-ground;
  }

  #bg {
    fill: $purple-bg;
  }
}

svg.green {
  #sw-right-back, #sw-left-back {
    fill: $green-back;
  }

  #sw-right-front, #sw-left-front {
    fill: $green-front;
  }

  #ground {
    fill: $green-ground;
  }

  #bg {
    fill: $green-bg;
  }
}



svg.dark {
  #sw-right-back, #sw-left-back {
    fill: $dark-back;
  }

  #sw-right-front, #sw-left-front {
    fill: $dark-front;
  }

  #ground {
    fill: $dark-ground;
  }

  #bg {
    fill: $dark-bg;
  }
}



/* Base elements */

.wrapper {
  text-align: center;
}

.svg-wrapper {
  margin-bottom: 20px;
  margin-top: 80px;
}


.btn {
  background-color: #431F73;
  border: none;
  color: white;
  border-radius: 20px;
  padding: 10px 20px;
  font-size: 1rem;
  cursor: pointer;
  margin-right: 10px;

  &:hover {
    background-color: #49217F;
  }

  &:focus {
    outline: 0;
  }
}

JavaScript

var btns = document.querySelectorAll('.btn');
var svgEl = document.querySelector('svg');

btns.forEach(btn => btn.addEventListener('click', changeTheme));

function changeTheme(el){
  svgEl.classList = "";
  svgEl.classList.add(el.target.getAttribute('data-theme'));
}