zmiana przyciskowa css z dark / white

Question

Po przyciśnięciu w przycisk ( może obrazek) zmienia się styl różnych divów / treści na stronie. po kilkuleciu jeszcze raz wraca z powrotem.

Answer 1

Możesz użyć classList.toggle: [ 1 ] [ 2 ]

Comments

znalazłem coś takie https://www.youtube.com/watch?v=CUEJkJ9HDbY&ab_channel=CodeCreative wydaje się być prostsze w użyciu :D Zaraz zobaczę czy w ogóle tak jest :P

 

a tutaj jeszcze coś lepszego :D

https://www.youtube.com/watch?v=gTX--uDIE9Y&ab_channel=Jakzacz%C4%85%C4%87programowa%C4%87%3F

---

Jako ciekawostka, sprawdź: color-scheme [ 1 ] [ 2 ]

[ on-line ]

<button class="color-theme-switch dark" title="Switch to light">&#9728;</button>

<style>
  :root {
    --color-scheme: dark;
  }
  html {
    color-scheme: var(--color-scheme);
  }
  .color-theme-switch {
    position: absolute;
    right: .5rem;
    cursor: pointer;
    border: 0;
    background-color: transparent;
    transition: color 1s;
    font-size: 1.1rem;
  }
  .dark {
    color: white;
  }
  .light {
    color: black;  
  }  
</style>

<script>
  window.onload = () => {
    const colorThemeSwitch = document.querySelector('.color-theme-switch');
    colorThemeSwitch.onclick = function() {
      this.classList.toggle('dark');
      this.classList.toggle('light');
      this.title = 'Switch to ' + (([...this.classList].pop() == 'light')? 'dark':'light');
      document.documentElement.style.setProperty('--color-scheme', [...this.classList].pop());    
    };
  };
</script>

 

---

na razie ją wyrzuciłem z kodu domyślam się ze korzysta z motywu użytkownika :D na razie zmieniam ino w light body a strona jest napisana domyślnie w czarnym stylu ;)