How to create a toggle button for this script?

I’m trying to make a simple toggle button for this script to change themes from light to dark but it doesn’t seem to work when toggling. The script I believe is done, but I can’t figure out how to create a button that toggles between light and dark mode.

JavaScript:

var toggle = document.getElementById("theme-toggle");

var storedTheme = localStorage.getItem('theme') || (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
if (storedTheme)
    document.documentElement.setAttribute('data-theme', storedTheme)


toggle.onclick = function() {
    var currentTheme = document.documentElement.getAttribute("data-theme");
    var targetTheme = "light";

    if (currentTheme === "light") {
        targetTheme = "dark";
    }

    document.documentElement.setAttribute('data-theme', targetTheme)
    localStorage.setItem('theme', targetTheme);
};

CSS:

html[data-theme='light'] {
    --background-color: #9ec8ff;
    --text-color: #000000d8;
    --link-color: #543fd7;
    --header-color:#7ab1ff;
    --headerborder-color: 0.5px solid rgb(0, 0, 0);
    --logo-color: invert(0);
    --button-color:#ffffff;
    --signinbutton-color:#ffffff;
    --buttonborder-color: 1.5px solid rgb(0, 0, 0);
    --profile-border: 3px solid black;
    --table-border: rgb(0, 0, 0);
    --social-login: antiquewhite;
    --social-border: 0px solid rgb(50, 51, 52);
}

html[data-theme='dark'] {
    --background-color: #000000;
    --text-color: #F7F8F8;
    --link-color: #82f7ff;
    --header-color:#1A1A1B;
    --headerborder-color: 1px solid rgb(50, 51, 52);
    --logo-color: invert(1);
    --button-color:#1A1A1B;
    --signinbutton-color:#000000;
    --buttonborder-color: 1.5px solid rgb(50, 51, 52);
    --profile-border: 3px solid rgb(50, 51, 52);
    --table-border: rgb(100,102,104);
    --social-login: #1A1A1B;
    --social-border: 1.5px solid rgb(50, 51, 52);

}

[data-theme='light'] .d-block-light,
[data-theme='dark'] .d-block-dark {
    display: block !important;
}