if (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) {
  toggle = false;
  animate(toggle);
}

darkMode.addEventListener("click", () => {
  animate(toggle);
  toggle = !toggle;
});

function animate(toggle) {
  const timeline = anime.timeline({
    duration: 750,
    easing: "easeOutExpo"
  });
  timeline
    .add({
      targets: ".sun",
      d: [{ value: toggle ? sunPath : moonPath }]
    })
    .add(
      {
        targets: "#darkMode",
        rotate: toggle ? -40 : 320
      },
      "-= 350"
    )
    .add(
      {
        targets: "section",
        backgroundColor: toggle ? "rgb(255,255,255" : "rgb(22,22,22)",
        color: toggle ? "rgb(22,22,22)" : "rgb(255,255,255)"
      },
      "-= 700"
    );
}