O problema é que cada vez que clicar no botão branco ou preto, um novo listener é adicionado a todos os outros botões.

E como addEventListener é acumulativo, no fim cada botão pode acabar ficando com vários listeners, o que é desnecessário.

Eu detalho melhor esse problema no meu comentário.

Mas a ideia de usar dataset é boa, tanto que acabei usando também - de uma forma diferente, embora a ideia geral seja similar.

denerGarciaano passado

So repassando o codigo ficou da seguinte forma:

HTML

            <h3>Personalize sua placa</h3>
            <div class="product-tune">
                <label>Placa</label>
                <div class="tune-colors">
                    <input type="radio" name="tone" aria-label="Cor da placa Branca" value="white" >
                    <input type="radio" name="tone" aria-label="Cor da placa Preto" value="black">
                </div>
                <label>Detalhes</label>
                <div class="tune-colors">
                    <input type="radio" name="color" aria-label="Azul" data-tone-white="/public/azul-off.opti.webp" data-tone-black="/public/azul-off-dark.opti.webp" value="blue">
                    <input type="radio" name="color" aria-label="Laranja" data-tone-white="/public/orange.opti.webp" data-tone-black="/public/orange-dark.opti.webp" value="orange">
                    <input type="radio" name="color" aria-label="Rosa" data-tone-white="/public/pink.opti.webp" data-tone-black="/public/pink-dark.opti.webp" value="pink">
                    <input type="radio" name="color" aria-label="Cinza" data-tone-white="/public/grey.opti.webp" data-tone-black="/public/grey-dark.opti.webp" value="grey">
                    <input type="radio" name="color" aria-label="Dourado" data-tone-white="/public/gold.opti.webp" data-tone-black="/public/gold-dark.opti.webp" value="gold">
                </div>

meu javascript

const btnColors = document.querySelectorAll(".tune-colors input[name='color']");
const productImg = document.querySelector(".product img")

function changeImg(pathImg, frameColor, boardColor, ) {
    productImg.setAttribute("src", pathImg)
    productImg.style.filter = "grayscale(0)"
    productImg.setAttribute("alt", "Placa com QR Code" + " " + frameColor + " " + "personalizada" + " " + "com detalhes em" + " " + boardColor)
    

}

for (let detailColor of btnColors) {

    detailColor.addEventListener('change', function (event) {

        let boardColor = document.querySelector("input[name='tone']:checked");
        if (!boardColor) {
            alert('Ops, Escolha a cor da placa antes 😉');

            return;
        }

        switch (boardColor.value) {
            case "white":
                changeImg(
                    pathImg = detailColor.dataset.toneWhite,
                    frameColor = "Branca" ,
                    boardColor = detailColor.ariaLabel
                    )
                break;
            case "black":
                changeImg(
                    pathImg = detailColor.dataset.toneBlack,
                    frameColor = "Preta" ,
                    boardColor = detailColor.ariaLabel
                    )
            default:
                break;
        }
    });
}