From Cream Wolf, 4 Years ago, written in Plain Text.
- view diff
Embed
  1. if (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) {
  2.   toggle = false;
  3.   animate(toggle);
  4. }
  5.  
  6. darkMode.addEventListener("click", () => {
  7.   animate(toggle);
  8.   toggle = !toggle;
  9. });
  10.  
  11. function animate(toggle) {
  12.   const timeline = anime.timeline({
  13.     duration: 750,
  14.     easing: "easeOutExpo"
  15.   });
  16.   timeline
  17.     .add({
  18.       targets: ".sun",
  19.       d: [{ value: toggle ? sunPath : moonPath }]
  20.     })
  21.     .add(
  22.       {
  23.         targets: "#darkMode",
  24.         rotate: toggle ? -40 : 320
  25.       },
  26.       "-= 350"
  27.     )
  28.     .add(
  29.       {
  30.         targets: "section",
  31.         backgroundColor: toggle ? "rgb(255,255,255" : "rgb(22,22,22)",
  32.         color: toggle ? "rgb(22,22,22)" : "rgb(255,255,255)"
  33.       },
  34.       "-= 700"
  35.     );
  36. }
  37.