<html class="light-theme">
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css'>
  <!-- Button -->
<div class="page-wrapper">
  <div class="container">
    <a class="btn js-click-modal" href="#">click me</a>
  <a class="btn-theme trigger2" href="#">
    <i class="fa fa-moon-o fa-lg" aria-hidden="true"></i>
  </a>
  </div>
<!-- Modal -->
<div class="modal">
  <div class="header">
    This is a full-width modal with a title
<i class="fa fa-times js-close-modal" aria-hidden="true"></i>
  </div>
  <div class="body"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor nobis numquam culpa repudiandae pariatur illum molestiae facilis porro quia facere.</p>
  </div>
</div>
</div>
<script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
</html>
@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  background: #FFF;
}

.page-wrapper {
  width: 100%;
  height: 100%;
  background-size: cover;
  background: #FFF;
}
.fa-moon-o{
  -webkit-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
}
.fa-moon-o:active{
  opacity: 0;
}
.fa-sun-o{
  -webkit-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
}
.fa-lg {
  margin: 20px 10px;
}
.fa-sun-o:active{
  opacity: 0;
}

a.btn {
  width: 300px;
  padding: 28px 0;
  position: absolute;
  font-size: 30px;
  margin: 50vh 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  color: #c0c0c0;
  border-radius: 0;
  background: #474747;
  border-radius: 150px;
  transition: all .3s;
}
.page-wrapper.modal-open .modal {
  top: 12.5%;
}
a.btn:hover,
a.btn:focus{
  background: #444444;
}
.fa-times {
  float: right;
  cursor: pointer;
  transition: all .3s ease-in-out;
  font-size: 20px;
}
.fa-times:hover {
  transform: rotate(90deg);
}
.modal {
  background-color: #c7c7c7;
  width: 90%;
  height: 75%;
  margin: 0 5%;
  padding: 0;
  transition: all 600ms cubic-bezier(0.86, 0, 0.07, 1);
  top: 100%;
  position: fixed;
  left: 0;
  text-align: left;
  border-radius: 20px;
}
.modal .header {
  padding: 20px;
  border-bottom: 1px solid #ddd;
  font-family: 'Poppins', sans-serif;
  position: relative;
}
.modal .body {
  padding: 20px;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
}
.light-theme{
  filter: invert(0) hue-rotate(0);
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.dark-theme{
  filter: invert(100) hue-rotate(180deg);
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.btn-theme{
  top: 0;
  font-size: 60px;
  float: left;
  display: block;
  color: rgb(0, 0, 0);
  transition: all .2s;
  cursor: pointer;
}
.active
{
  overflow: hidden;
}
$( document ).ready(function() {
  $('.js-click-modal').click(function(){
    $('.page-wrapper').addClass('modal-open');
    $('.container').addClass('blur-it');
    $('body').addClass('active')
  });
  
  $('.js-close-modal').click(function(){
    $('.page-wrapper').removeClass('modal-open');
    $('.container').removeClass('blur-it');
    $('body').removeClass('active')
  });
  $('.trigger2').on('click', function() {
    if($('html').hasClass('light-theme')) {
      $('html').removeClass('light-theme')
      $('html').addClass('dark-theme');
    } else {
      $('html').removeClass('dark-theme')
      $('html').addClass('light-theme');
    }
    if($('.btn-theme i').hasClass('fa fa-moon-o')) {
      $('.btn-theme i').removeClass('fa fa-moon-o')
      $('.btn-theme i').addClass('fa fa-sun-o');
    } else {
      $('.btn-theme i').removeClass('fa fa-sun-o')
      $('.btn-theme i').addClass('fa fa-moon-o');
    }
 });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.