CodePen Embed - css Neumorphism design practice 02

<body class="neumorphism">
  <ul class="switch">
    <li class="switch__box">
      <label>
        <input type="checkbox" name="">
        <div class="icon-box">
          <i class="fas fa-phone-alt"></i>
        </div>
      </label>
    </li>
    <li class="switch__box">
      <label>
        <input type="checkbox" name="">
        <div class="icon-box">
          <i class="fas fa-paper-plane"></i>
        </div>
      </label>
    </li>
    <li class="switch__box">
      <label>
        <input type="checkbox" name="">
        <div class="icon-box">
          <i class="far fa-moon"></i>
        </div>
      </label>
    </li>
    <li class="switch__box">
      <label>
        <input type="checkbox" name="">
        <div class="icon-box">
          <i class="fas fa-wifi"></i>
        </div>
      </label>
    </li>
    <li class="switch__box">
      <label>
        <input type="checkbox" name="">
        <div class="icon-box">
          <i class="fas fa-volume-up"></i>
        </div>
      </label>
    </li>
    <li class="switch__box">
      <label>
        <input type="checkbox" name="">
        <div class="icon-box">
          <i class="fab fa-bluetooth-b"></i>
        </div>
      </label>
    </li>
  </ul>
  <div class="colormode font">
    <input type="checkbox" id="changeColor">
    <span>WH</span>
    <span>BK</span>
  </div>
</body>

@import url('https://fonts.googleapis.com/css?family=Quicksand:400,500,600&display=swap');

.font{
  font-family: 'Quicksand', sans-serif;
  font-weight:600;
}
:root{
 --mainWhite: #f2f3f7;
 --buttonWhite:-2px -2px 5px rgba(255,255,255,1),
                 3px 3px 5px rgba(0,0,0,.07); 
 --buttonWhiteActive:inset -2px -2px 5px rgba(255,255,255,1),
                     inset 3px 3px 5px rgba(0,0,0,.07);
 --iconWhiteVer:#6a9bd8;
 --mainDark:#222;
  --buttonDark:inset -2px -2px 5px rgba(0,0,0,0.5),
                     inset 3px 3px 5px rgba(255,255,255,.07);
 --buttonDarkActive:-2px -2px 5px rgba(0,0,0,0.5),
                 3px 3px 5px rgba(255,255,255,.07); 

 --iconDarkVer:#3e3e3e;
 --iconDarkVerActive:0 0 10px rgba(33,156,243,1),
                      0 0 10px rgba(33,156,243,1);
 --iconDarkLine:0 0 10px rgba(33,156,243,.5),
   0 0 20px rgba(33,156,243,.5),
   0 0 30px rgba(33,156,243,.5),
   inset 0 0 10px rgba(33,156,243,.5),
}
body{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-direction:column-reverse;
  min-height:100vh;
  transition:0.5s;
  &.neumorphism{
    background:var(--mainWhite);
    .switch{
      background:var(--mainWhite);
      box-shadow:var(--buttonWhite);
      input[type="checkbox"]{
        ~ .icon-box{
          background:var(--mainWhite);
          box-shadow:var(--buttonWhite);
          i{
            color:var(--iconWhiteVer);
          }
        }
        &:checked ~ .icon-box{
          box-shadow:var(--buttonWhiteActive);
        }
      }
    }
  }
  &.dark{
    background:var(--mainDark);
    .switch{
      background:var(--mainDark);
      box-shadow:var(--buttonDark);
      input[type="checkbox"]{
        ~ .icon-box{
          background:var(--mainDark);
          box-shadow:var(--buttonDark); 
          i{
            color:var(--iconDarkVer);
          }
        }
        &:checked ~ .icon-box{
          box-shadow:var(--buttonDarkActive);
          i{
            text-shadow:var(--iconDarkVerActive);
            color:white;
          }
        }
      }
    }
  }  
}
.switch{
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  border-radius:10px;
  padding:20px;
  &__box{
    position:relative;
    list-style:none;
    text-align:center;
    margin:15px;
    label{
      position:relative;
      input[type="checkbox"]{
        position:absolute;
        opacity:0;
        cursor:pointer;
        ~ .icon-box{
          width:60px; height:60px;
          display:flex;
          align-items:center;
          justify-content:center;
          border-radius:4px;
          i{
            font-size:20px;
          }
        }
        &:checked ~ .icon-box{
          i{
            transform:scale(.95);
          }
        }
      }
    }
  }
   
}
.colormode{
  transform-style:preserve-3d;//
  perspective:200px;//
  // border:2px solid #ccc;
  height:40px;
  border-radius:40px;
  margin-bottom:20px;
  input[type="checkbox"]{
    position:relative;//
    width:100px;
    height:40px;
    margin:0;
    -webkit-appearance:none;
    outline:none;
    transition:.5s ease;
    cursor:pointer;
    ~ span{
      position:absolute;
      top:0;
      width:50%; height:40px;
      line-height:40px;
      text-align:center;
      text-transform:uppercase;
      font-weight:bold;
      pointer-events:none;
      transform-style:preserve-3d;
      &:nth-of-type(1){
        left:0;
        border-top-left-radius:40px;
        border-bottom-left-radius:40px;
        background:var(--mainWhite);
        &::before{
          content:"";
          position:absolute;
          top:0; left:0;
          width:100%;height:100%;
          background:linear-gradient(90deg, #464343, #17181b);
          border-top-left-radius:40px;
          border-bottom-left-radius:40px;
          transform-origin:right;
          transition:1s;
          backface-visibility:hidden;
        }
      }
      &:nth-of-type(2){
        color:var(--mainWhite);
        right:0;
        border-top-right-radius:40px;
        border-bottom-right-radius:40px;
        background:var(--mainDark);
        &::before{
          content:"";
          position:absolute;
          top:0; left:0;
          width:100%;height:100%;
          background:linear-gradient(90deg, #fefefe, #f2f2f2);
          border-top-right-radius:40px;
          border-bottom-right-radius:40px;
          transform-origin:left;
          transition:1s;
          backface-visibility:hidden;
          transform:rotateY(180deg);
        }
      }
    }
    &:checked ~ span{
      &:nth-of-type(1){
        &::before{
          transform:rotateY(180deg);
        }
      }
      &:nth-of-type(2){
        &::before{
          transform:rotateY(360deg);
        }
      }
    }
  }
}

View Compiled

$(function(){
  $("#changeColor").change(function(){
    var checked = $(this).prop("checked");
    $("body").removeClass();
    if(checked){
      $("body").addClass("dark");
    }else{
       $("body").addClass("neumorphism");
    }
  });
  
});

This Pen is owned by CMYK350dpi on CodePen.

See more by @AYV on CodePen

External CSS

External JavaScript

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js