Jquery: Как вернуть атрибуты обратно, когда флажок не установлен

Question

Я хочу изменить уже установленные цвета в css обратно, когда флажок не установлен. (Когда флажок не установлен, он не меняет цвета обратно)

HTML:

<div class="dark-mode">
   <label class="switch" for="checkbox">
       <input type="checkbox" id="checkbox" />
       <div class="slider round"></div>
   </label>
</div>

CSS:

body{
height: 100%;
color: #e5e5e5;
background: #181818;
transition: ease-out 250ms;

}

Jquery

$(document).ready(function(){
      $('#checkbox[type=checkbox]').on('change', function(){
           if($(this).prop('checked')){
              $('body').css({
                  'background': '#F9F9F9',
                  'color' : '#333333'
                });
              $('footer').css({
                  'background': '#E5E5E5'
              });
           }
    });
});

JSFiddle

Answer 1

Просто измените свойства обратно на пустую строку, чтобы вернуться к значениям по умолчанию CSS:

$(document).ready(function(){
      $('#checkbox[type=checkbox]').on('change', function(){
          $('body').css({
              'background': $(this).prop('checked') ? '#F9F9F9' : '',
              'color' : $(this).prop('checked') ? '#333333' : ''
            });
          $('footer').css({
              'background': $(this).prop('checked') ? '#E5E5E5' : ''
          });
           
    });
});

body{
height: 100%;
color: #e5e5e5;
background: #181818;
transition: ease-out 250ms;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dark-mode">
   <label class="switch" for="checkbox">
       <input type="checkbox" id="checkbox" />
       <div class="slider round"></div>
   </label>
</div>

Или вы можете сделать:

$(document).ready(function(){
    $('#checkbox[type=checkbox]').on('change', function(){
        $('body').toggleClass('dark');
    });
});

body{
height: 100%;
color: #e5e5e5;
background: #181818;
transition: ease-out 250ms;
}

body.dark {
background: #F9F9F9;
color: #333333;
}

body.dark footer {
background: #E5E5E5;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dark-mode">
   <label class="switch" for="checkbox">
       <input type="checkbox" id="checkbox" />
       <div class="slider round"></div>
   </label>
</div>