document.addEventListener("DOMContentLoaded", () => {
	const toggle = document.createElement("button");

	toggle.classList.add("themeToggle-button");
	toggle.setAttribute("id", "themeToggle-button");

	toggle.addEventListener("click", () => {
		document.body.classList.toggle("invertedTheme");
	});

	toggle.innerHTML = `
        <svg
            xmlns="http://www.w3.org/2000/svg"
            aria-hidden="true"
            width="1em"
            height="1em"
            class="themeToggle-svgIndicator"
            fill="currentColor"
            viewBox="0 0 32 32"
        >
            <path
                d="M16 .5C7.4.5.5 7.4.5 16S7.4 31.5 16 31.5 31.5 24.6 31.5 16 24.6.5
                    16 .5zm0 28.1V3.4C23 3.4 28.6 9 28.6 16S23 28.6 16 28.6z"
            />
        </svg>
    `.trim();

	document.body.appendChild(toggle);
});