<body class="df-light">
<div id="nav">
	<a href="#" class="logo">
		<img src="https://www.7-cha.com/images/logo-dark.png">
		<img src="https://www.7-cha.com/images/logo.png">
	</a>	
</div>
<div class="block div1" data-color="light"></div>
<div class="block div2" data-color="dark"></div>
<div class="block div3"></div>
body.df-light .logo>img:nth-of-type(2){
			display: none;
		}
		body.df-light.mwt-dark .logo>img:nth-of-type(1){
			display: none;
		}
		body.df-light.mwt-dark .logo>img:nth-of-type(2){
			display: block;
		}
		#nav{
			position: fixed;
			z-index: 999
		}
		.div1{height:200px;}
		.div2{height:1000px; background: #111;}
		.div3{height: 1000px; background:#fff;}
$(function(){
		$(window).scroll(function() {
  
  // selectors
  var $window = $(window),
      $body = $('body'),
      $block = $('.block');
  
  var scroll = $window.scrollTop() + ($window.height() / 25);
 
  $block.each(function () {
    var $this = $(this);
    
    if ($this.position().top <= scroll && $this.position().top + $this.height() > scroll) {
          
      // Remove all classes on body with color-
      $body.removeClass(function (index, css) {
        return (css.match (/(^|\s)mwt-\S+/g) || []).join(' ');
      });
      if(typeof($(this).data('color')) !== 'undefined') {
      		$body.addClass('mwt-' + $(this).data('color'));
      }
    }
  });    
  
}).scroll();
	});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

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