toggle-theme.js 1.1 KB

1234567891011121314151617181920212223242526272829303132333435
  1. const sw = document.getElementById("switch-style"), sw_mobile = document.getElementById("switch-style-m"), b = document.body;
  2. if (b) {
  3. function toggleTheme(target, dark) {
  4. target.classList.toggle("dark-theme", dark)
  5. target.classList.toggle("light-theme", !dark)
  6. }
  7. function switchEventListener() {
  8. toggleTheme(b, this.checked);
  9. if (window.localStorage) {
  10. this.checked ? localStorage.setItem("theme", "dark-theme") : localStorage.setItem("theme", "light-theme")
  11. }
  12. }
  13. var isDarkTheme = !window.localStorage || !window.localStorage.getItem("theme") || window.localStorage && localStorage.getItem("theme") === "dark-theme";
  14. if(sw && sw_mobile){
  15. sw.checked = isDarkTheme;
  16. sw_mobile.checked = isDarkTheme;
  17. sw.addEventListener("change", switchEventListener);
  18. sw_mobile.addEventListener("change", switchEventListener);
  19. // sync state between switches
  20. sw.addEventListener("change", function() {
  21. sw_mobile.checked = this.checked;
  22. });
  23. sw_mobile.addEventListener("change", function() {
  24. sw.checked = this.checked;
  25. });
  26. }
  27. toggleTheme(b, isDarkTheme);
  28. }