darkmode.js 1.3 KB

1234567891011121314151617181920212223242526272829303132
  1. (() => {
  2. // <stdin>
  3. var themeToggleDarkIcon = document.getElementById("theme-toggle-dark-icon");
  4. var themeToggleLightIcon = document.getElementById("theme-toggle-light-icon");
  5. if (localStorage.getItem("color-theme") === "dark" || !("color-theme" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches) {
  6. themeToggleLightIcon.classList.remove("hidden");
  7. } else {
  8. themeToggleDarkIcon.classList.remove("hidden");
  9. }
  10. var themeToggleBtn = document.getElementById("theme-toggle");
  11. themeToggleBtn.addEventListener("click", function() {
  12. themeToggleDarkIcon.classList.toggle("hidden");
  13. themeToggleLightIcon.classList.toggle("hidden");
  14. if (localStorage.getItem("color-theme")) {
  15. if (localStorage.getItem("color-theme") === "light") {
  16. document.documentElement.classList.add("dark");
  17. localStorage.setItem("color-theme", "dark");
  18. } else {
  19. document.documentElement.classList.remove("dark");
  20. localStorage.setItem("color-theme", "light");
  21. }
  22. } else {
  23. if (document.documentElement.classList.contains("dark")) {
  24. document.documentElement.classList.remove("dark");
  25. localStorage.setItem("color-theme", "light");
  26. } else {
  27. document.documentElement.classList.add("dark");
  28. localStorage.setItem("color-theme", "dark");
  29. }
  30. }
  31. });
  32. })();