index.js

const left=document.getElementById("left")
const X=document.getElementById("X")
const right=document.getElementById("right")
const Y=document.getElementById("Y")

document.addEventListener("mousemove", (e) => {
    const XPos=e.clientX
    const YPos=e.clientY

    X.textContent=XPos
    Y.textContent=YPos
})

const body=document.getElementById("body")
const box=document.getElementById("toggle")
const label=document.getElementById("label")
const circle=document.getElementById("circle")
box.addEventListener("change",() => {
    if (box.checked) {
        body.classList.remove("bg-black")
        body.classList.add("bg-white")

        label.classList.remove("bg-white")
        label.classList.add("bg-black")

        circle.classList.remove("bg-black")
        circle.classList.add("bg-white")
        circle.style.transform="translateX(50px)"
    }
    else{
        body.classList.remove("bg-white")
        body.classList.add("bg-black")

        label.classList.remove("bg-black")
        label.classList.add("bg-white")

        circle.classList.remove("bg-white")
        circle.classList.add("bg-black")
        circle.style.transform="translateX(0)"
    }

})