Untitled

<!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>Document</title>
    <style>
        body{
            background-color: #333;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: .5s;
        }
        .change-color{
            background-color: cadetblue;
        }

        button{
            font-size: 3rem;
            padding: 1rem;
        }
    </style>
</head>
<body>
    <button id="boton">Click me</button>

    <script>

        const boton = document.getElementById("boton");         //Creamos una variable llamada botón, aunque le puedes dar el nombre que tú quieras. Yo le llamo botón porque es un botón.
                                                                //En la variable botón guardamos el botón que tenemos en el html (document), y lo seleccionamos usando el ID (por eso el getElementById)

        boton.addEventListener("click", () =>{                  //Añadimos un listener al botón. No hace falta que lo sepas ahora mismo, pero un listener sirve para escuchar eventos. En este caso escuchamos el click
            document.body.classList.toggle("change-color");     //Cuando el botón registra un click se activa esta función (código que hace algo), y en este caso le añadimos y quitamos la clase "change-color" al body.
        })

        //Fíjate en la lógica de la instrucción. Primero accedemos al Document (<html>), luego al body, luego a la lista de clases del body y luego con la función toggle se la ponemos y quitamos de forma alterna.

    </script>
</body>
</html>