<style>
 /*<![CDATA[*/
.m-mode {
  display:inline-block;
  position: fixed;
  bottom:60px;
  right:28px;
  z-index: 10100;
  opacity:0.6;
}

.m-mode .fa {  
  vertical-align: middle;
}
    
.dark-button,.light-button {   
  cursor:pointer;
  height: 30px;
  width: 30px;
  text-align:center;
  font-size:16px;
  background: rgba(0,0,0,.5);
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 4px;
  transition: background 200ms ease;
  color: #eaeaea;      
}

.dark-button:hover,.light-button:hover {
  background: rgba(51, 51, 51, 0.8);
}

body.dark .hs-content  {
  background-color: #111!important;
  color: #fff!important;
}
    
body.dark .hs-content p,body.dark .hs-content h1,body.dark .hs-content h2,body.dark .hs-content h3,body.dark .hs-content span {
  color: #fff!important;
}
<!-- style for mobile devices -->
@media only screen and (max-width: 459px) {
.dark-button,.light-button {   
  height: 42px;
  width: 42px;
  font-size:20px;
  }
.m-mode {   
  right:12px;
  }
.m-mode .fa {  
        padding-top:10px;
  }   
}
<!-- end style for mobile devices -->

 /*]]>*/
</style>
<!-- start dark/light button -->
<div class="m-mode">
    <div class="dark-button">
        <div class="fa fa-moon">
        </div>
    </div>

    <div class="light-button" hidden="hidden">
        <div class="fa fa-sun">
        </div>
    </div>
</div>
<!-- end dark/light/button -->
<script type="text/javascript">

//<![CDATA[
     jQuery.noConflict();
(function($) {
// Init
$(document).ready(function() {    
 var darkMode;

if (localStorage.getItem('dark-mode')) {  
  // if dark mode is in storage, set variable with that value
  darkMode = localStorage.getItem('dark-mode');  
} else {  
  // if dark mode is not in storage, set variable to 'light'
  darkMode = 'light';  
}

// set new localStorage value
localStorage.setItem('dark-mode', darkMode);


if (localStorage.getItem('dark-mode') == 'dark') {
  // if the above is 'dark' then apply .dark to the body
  $('body').addClass('dark');  
  // hide the 'dark' button
  $('.dark-button').hide();
  // show the 'light' button
  $('.light-button').show();
}
    $('.dark-button').on('click', function() {  
  $('.dark-button').hide();
  $('.light-button').show();
  $('body').addClass('dark');  
  // set stored value to 'dark'
  localStorage.setItem('dark-mode', 'dark');
});

$('.light-button').on('click', function() {  
  $('.light-button').hide();
  $('.dark-button').show();
  $('body').removeClass('dark');
  // set stored value to 'light'
  localStorage.setItem('dark-mode', 'light');   
});
});
})(jQuery);
//]]>
</script>