Podrías probar algo así:
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>Document</title>
</head>
<body>
<img alt="" id="modoimg">
<script src="app.js"></script>
</body>
</html>
JavaScript (archivo a parte app.js en el mismo lugar que el index.html)
//Capturo imagen para cambiarla y para utilizar el evento click.
const image = document.getElementById("modoimg");
//Deposito si existe algo en localStorage en la variable image_tracker
let image_tracker = localStorage.getItem("image_tracker");
//En este bloque le decimos que hacer cuando se refresca o carga la página por primera vez.
//Si no hay nada en image_tracker, pongo la imagen en blanco y agrego la "b" al localStorage
if (!image_tracker) {
console.log("Entré por primera vez");
localStorage.setItem("image_tracker", "b");
image.src = "blanco.jpg";
} else {
//Si existe algo, o sea no es la primera vez que carga el sitio, pone el color que le corresponde en base a lo guardado en localStorage
if (image_tracker === "b") {
image.src = "blanco.jpg";
} else {
image.src = "negro.jpg";
}
}
//Escuchamos el evento click sobre la imágen, al presionarlo hacemos el toggle del valor en localStorage y mostramos la imagen correspondiente
image.addEventListener("click", function () {
image_tracker = localStorage.getItem("image_tracker");
if (image_tracker === "b") {
localStorage.setItem("image_tracker", "n");
image.src = "negro.jpg";
} else if (image_tracker === "n") {
localStorage.setItem("image_tracker", "b");
image.src = "blanco.jpg";
}
});
Ya que el valor es guardado en localStorage, si se carga por primera vez el sitio por defecto se pondrá en blanco, pero si ya se cargó anteriormente y se cambió el color, quedará guardado en el pc a no ser que se borra el localStorage. De esa forma recordamos que tenía seleccionado el usuario.
Espero sirva, quedo a las órdenes.