test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animation</title>
    <style>
        body{
            background-color: gray;
            overflow: hidden;
        }

        section{
            width: 100%;
            height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>
<body>

    
<section>
    <h1>darkMode</h1>
    <svg id="darkMode" width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
      
        <path class="sun" d="M100 50C100 77.6142 77.6142 100 50 100C22.3858 100 0 77.6142 0 50C0 22.3858 22.3858 0 50 0C77.6142 0 100 22.3858 100 50Z" fill="#FFB470"/>
    </svg>
 
 
</section>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js" integrity="sha512-z4OUqw38qNLpn1libAN9BsoDx6nbNFio5lA6CuTp9NlK83b89hgyCVq+N5FdBJptINztxn1Z3SaKSKUS5UP60Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script>
        const moonPath =  "M31.5 50C31.5 77.6142 50 100 50 100C22.3858 100 0 77.6142 0 50C0 22.3858 22.3858 0 50 0C50 0 31.5 22.3858 31.5 50Z";
        const sunPath  =  "M100 50C100 77.6142 77.6142 100 50 100C22.3858 100 0 77.6142 0 50C0 22.3858 22.3858 0 50 0C77.6142 0 100 22.3858 100 50Z";
        
        const mode = document.querySelector('#darkMode');
        let toggle = true;

        mode.addEventListener('click',function(){
            console.log(toggle)
            
            const timeline = anime.timeline({
                duration: 750,
                easing: "easeOutExpo"
            });

            timeline
            .add({
                targets: '.sun',
                d: [
                    {value: toggle? moonPath : sunPath}
                ]
            })
            .add({
                targets:"#darkMode",
                rotate:220
            },'-=350')
            .add({
                targets:"body",
                backgroundColor:toggle ? "rgba(22,22,22)" : "rgba(128,128,128,1)",
                color: toggle? "#fff" : "black" 
            }, '-=750')


            if(!toggle){
                toggle = true;
            }else {
                toggle = false;
            }
        })
 
 
    </script>
</body>
</html>