<aside> 👉 Switch activation only works on Frontend

</aside>

Video

https://youtu.be/LkNwYPQuQDs

With Hydrogen Pack

If you use Hydrogen Pack just copy the code below and it will create a code block with the HTML, CSS and JS to start using **Dark Mode** in Oxyblock.

eyJzb3VyY2UiOiJodHRwczovL294eWJsb2NrLnh5eiIsImNvbXBvbmVudCI6W3siaWQiOjQzMiwibmFtZSI6ImN0X2NvZGVfYmxvY2siLCJvcHRpb25zIjp7ImN0X2lkIjo0MzIsImN0X3BhcmVudCI6MTYsInNlbGVjdG9yIjoiY29kZV9ibG9jay00MzItMjA5Iiwib3JpZ2luYWwiOnsiY29kZS1jc3MiOiIvKlNpbXBsZSBjc3MgdG8gc3R5bGUgaXQgbGlrZSBhIHRvZ2dsZSBzd2l0Y2gqL1xuLnRoZW1lLXN3aXRjaC13cmFwcGVyIHtcbiAgZGlzcGxheTogZmxleDtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbn1cbi50aGVtZS1zd2l0Y2gge1xuICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7XG4gIGhlaWdodDogMzRweDtcbiAgcG9zaXRpb246IHJlbGF0aXZlO1xuICB3aWR0aDogNjBweDtcbiAgbWFyZ2luLXJpZ2h0OiAxcmVtO1xufVxuXG4udGhlbWUtc3dpdGNoIGlucHV0IHtcbiAgZGlzcGxheTpub25lO1xufVxuXG4uc2xpZGVyIHtcbiAgYmFja2dyb3VuZC1jb2xvcjogI2NjYztcbiAgYm90dG9tOiAwO1xuICBjdXJzb3I6IHBvaW50ZXI7XG4gIGxlZnQ6IDA7XG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgcmlnaHQ6IDA7XG4gIHRvcDogMDtcbiAgdHJhbnNpdGlvbjogLjRzO1xufVxuXG4uc2xpZGVyOmJlZm9yZSB7XG4gIGJhY2tncm91bmQtY29sb3I6ICNmZmY7XG4gIGJvdHRvbTogNHB4O1xuICBjb250ZW50OiBcIlwiO1xuICBoZWlnaHQ6IDI2cHg7XG4gIGxlZnQ6IDRweDtcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICB0cmFuc2l0aW9uOiAuNHM7XG4gIHdpZHRoOiAyNnB4O1xufVxuXG5pbnB1dDpjaGVja2VkICsgLnNsaWRlciB7XG4gIGJhY2tncm91bmQtY29sb3I6ICNGRENCMTI7XG59XG5cbmlucHV0OmNoZWNrZWQgKyAuc2xpZGVyOmJlZm9yZSB7XG4gIHRyYW5zZm9ybTogdHJhbnNsYXRlWCgyNnB4KTtcbn1cblxuLnNsaWRlci5yb3VuZCB7XG4gIGJvcmRlci1yYWRpdXM6IDM0cHg7XG59XG5cbi5zbGlkZXIucm91bmQ6YmVmb3JlIHtcbiAgYm9yZGVyLXJhZGl1czogNTAlO1xufVxuIiwiY29kZS1qcyI6ImNvbnN0IHRvZ2dsZVN3aXRjaCA9IGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IoJy50aGVtZS1zd2l0Y2ggaW5wdXRbdHlwZT1cImNoZWNrYm94XCJdJyk7XG5cbmlmIChjdXJyZW50VGhlbWUpIHtcbiAgICBkb2N1bWVudC5kb2N1bWVudEVsZW1lbnQuc2V0QXR0cmlidXRlKCdkYXRhLXRoZW1lJywgY3VycmVudFRoZW1lKTtcbiAgXG4gICAgaWYgKGN1cnJlbnRUaGVtZSA9PT0gJ2RhcmsnKSB7XG4gICAgICAgIHRvZ2dsZVN3aXRjaC5jaGVja2VkID0gdHJ1ZTtcbiAgICB9XG59XG5cbmZ1bmN0aW9uIHN3aXRjaFRoZW1lKGUpIHtcbiAgICBpZiAoZS50YXJnZXQuY2hlY2tlZCkge1xuICAgICAgICBkb2N1bWVudC5kb2N1bWVudEVsZW1lbnQuc2V0QXR0cmlidXRlKCdkYXRhLXRoZW1lJywgJ2RhcmsnKTtcbiAgICAgICAgbG9jYWxTdG9yYWdlLnNldEl0ZW0oJ3RoZW1lJywgJ2RhcmsnKTtcbiAgICB9XG4gICAgZWxzZSB7ICAgICAgICBkb2N1bWVudC5kb2N1bWVudEVsZW1lbnQuc2V0QXR0cmlidXRlKCdkYXRhLXRoZW1lJywgJ2xpZ2h0Jyk7XG4gICAgICAgICAgbG9jYWxTdG9yYWdlLnNldEl0ZW0oJ3RoZW1lJywgJ2xpZ2h0Jyk7XG4gICAgfSAgICBcbn1cblxudG9nZ2xlU3dpdGNoLmFkZEV2ZW50TGlzdGVuZXIoJ2NoYW5nZScsIHN3aXRjaFRoZW1lLCBmYWxzZSk7IiwiY29kZS1waHAiOiI8ZGl2IGNsYXNzPVwidGhlbWUtc3dpdGNoLXdyYXBwZXJcIj5cbiAgPGxhYmVsIGNsYXNzPVwidGhlbWUtc3dpdGNoXCIgZm9yPVwiY2hlY2tib3hcIj5cbiAgICAgICAgPGlucHV0IHR5cGU9XCJjaGVja2JveFwiIGlkPVwiY2hlY2tib3hcIiAvPlxuICAgICAgICA8ZGl2IGNsYXNzPVwic2xpZGVyIHJvdW5kXCI+PC9kaXY+XG4gIDwvbGFiZWw+XG4gIDxwIGNsYXNzPVwib2ItcFwiPkVuYWJsZSBEYXJrIE1vZGUhPC9wPlxuPC9kaXY+In0sImFjdGl2ZXNlbGVjdG9yIjpmYWxzZSwiY3RfY29udGVudCI6IiIsIm5pY2VuYW1lIjoiU3dpdGNoIERhcmsgTW9kZSJ9LCJkZXB0aCI6ZmFsc2V9XSwiY2xhc3NlcyI6e30sImNvbG9ycyI6e319

With Code Block

Also, you can create a Code Block and place the following code in its respective element.

PHP

<div class="theme-switch-wrapper">
  <label class="theme-switch" for="checkbox">
        <input type="checkbox" id="checkbox" />
        <div class="slider round"></div>
  </label>
  <p class="ob-p">Enable Dark Mode!</p>
</div>

CSS

/*Simple css to style it like a toggle switch*/
.theme-switch-wrapper {
  display: flex;
  align-items: center;
}
.theme-switch {
  display: inline-block;
  height: 34px;
  position: relative;
  width: 60px;
  margin-right: 1rem;
}

.theme-switch input {
  display:none;
}

.slider {
  background-color: #ccc;
  bottom: 0;
  cursor: pointer;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: .4s;
}

.slider:before {
  background-color: #fff;
  bottom: 4px;
  content: "";
  height: 26px;
  left: 4px;
  position: absolute;
  transition: .4s;
  width: 26px;
}

input:checked + .slider {
  background-color: #FDCB12;
}

input:checked + .slider:before {
  transform: translateX(26px);
}

.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

Javascript

const toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"]');

if (currentTheme) {
    document.documentElement.setAttribute('data-theme', currentTheme);
  
    if (currentTheme === 'dark') {
        toggleSwitch.checked = true;
    }
}

function switchTheme(e) {
    if (e.target.checked) {
        document.documentElement.setAttribute('data-theme', 'dark');
        localStorage.setItem('theme', 'dark');
    }
    else {        document.documentElement.setAttribute('data-theme', 'light');
          localStorage.setItem('theme', 'light');
    }    
}

toggleSwitch.addEventListener('change', switchTheme, false);