<div class="forms">
  
  <label for="cbk1">
    <input type="checkbox" id="cbk1">
    <span class="cbx">
      <svg width="12px" height="11px" viewBox="0 0 12 11">
        <polyline points="1 6.29411765 4.5 10 11 1"></polyline>
      </svg>
    </span>
    <span>Dark</span>
  </label>
  
  <label for="cbk2">
    <input type="checkbox" id="cbk2" checked>
    <span class="cbx">
      <svg width="12px" height="11px" viewBox="0 0 12 11">
        <polyline points="1 6.29411765 4.5 10 11 1"></polyline>
      </svg>
    </span>
    <span>Night</span>
  </label>
  
  <br><br><br>
  
  <label for="rdo1">
    <input type="radio" id="rdo1" name="radio">
    <span class="rdo"></span>
    <span>Dark</span>
  </label>
  
  <label for="rdo2">
    <input type="radio" id="rdo2" name="radio" checked>
    <span class="rdo"></span>
    <span>Night</span>
  </label>
  
</div>

html, body
  height: 100%
  
body
  display: grid
  font-family: -apple-system, BlinkMacSystemFont, "myriad-pro", sans-serif
  font-weight: 400
  -webkit-font-smoothing: antialiased
  -moz-osx-font-smoothing: grayscale
  background: #2B2B2D
  color: #C5C5C7
  
.cbx
  position: relative
  display: block
  float: left
  width: 18px
  height: 18px
  border-radius: 4px
  background-color: #606062 
  background-image: linear-gradient(#474749,#606062)
  box-shadow: inset 0 1px 1px rgba(white,.15), inset 0 -1px 1px rgba(black,.15)
  transition: all .15s ease
  svg
    position: absolute
    top: 3px
    left: 3px
    fill: none
    stroke-linecap: round
    stroke-linejoin: round
    stroke: white
    stroke-width: 2
    stroke-dasharray: 17
    stroke-dashoffset: 17
    transform: translate3d(0,0,0)
    
.rdo
  position: relative
  display: block
  float: left
  width: 18px
  height: 18px
  border-radius: 10px
  background-color: #606062 
  background-image: linear-gradient(#474749,#606062)
  box-shadow: inset 0 1px 1px rgba(white,.15), inset 0 -1px 1px rgba(black,.15)
  transition: all .15s ease
  &:after
    content: ""
    position: absolute
    display: block
    top: 6px
    left: 6px
    width: 6px
    height: 6px
    border-radius: 50%
    background: white
    opacity: 0
    transform: scale(0)
    
.cbx + span,
.rdo + span
  float: left
  margin-left: 6px
    
.forms
  margin: auto
  user-select: none
  
  label
    display: inline-block
    margin: 10px
    cursor: pointer
  
  input[type="checkbox"]
  input[type="radio"]
    position: absolute
    opacity: 0
  
  input[type="radio"]:checked + .rdo
    background-color: #606062 
    background-image: linear-gradient(#255CD2,#1D52C1)
    &:after
      opacity: 1
      transform: scale(1)
      transition: all .15s ease
    
  input[type="checkbox"]:checked + .cbx
    background-color: #606062 
    background-image: linear-gradient(#255CD2,#1D52C1)
    svg
      stroke-dashoffset: 0
      transition: all .15s ease