Přepínač na Dark mode

by Petr Haluza

HTML

<main>
  <div class="plocha"></div>
  <div id="prepinac" class="prepinac maZindex"></div>
  <div id="mixer"></div>

  <!-- test obsah -->    
  <h1><a href="#">test</a></h1>
  <p><span>© 2019 Nightfever with ❤</span></p>
<!-- test obsah -->
  
</main>

CSS

body { margin: 0; background: #efefef;}
.plocha { position: fixed; background: #efefef; top: 0; left: 0; width: 100vw; height: 100vh; z-index: -1;}
.mixovat {
  transform: scale(60);
}
#mixer {
  width: 3rem;
  height: 3rem;
  position: fixed;
  border-radius: 50%;
  right: calc(50% - 21.5rem);
  bottom: 1rem;
  pointer-events: none;
  background: white;
  transition: all 0.5s ease;
  mix-blend-mode: difference;
}

img {  isolation: isolate;}
main {  max-width: 35rem;  margin: 0 auto;}

.prepinac {
  background-color: #100f5c;
  width: 3rem;
  height: 3rem;
  position: fixed;
  border-radius: 50%; border:none;
  right: calc(50% - 21.5rem);
  bottom: 1rem;
  cursor: pointer;
  transition: all 0.5s ease;
}

.maZindex { z-index: 1;
background-image:url(https://images.pexels.com/photos/47367/full-moon-moon-bright-sky-47367.jpeg) ;
  
  background-size:125%;
  background-position:-6px -3px;
isolation: isolate;
}

JavaScript

document.getElementById('prepinac').addEventListener('click', () => {
  document.getElementById('mixer').classList.toggle('mixovat');
  document.getElementById('prepinac').classList.toggle('maZindex');
});