sd-webui-toggle-dark-light/javascript/toggle_dark_light.js

onUiLoaded(() => {
	function updateUrlParameter(key, value) {
		var url = new URL(window.location.href);
		url.searchParams.set(key, value);
		history.replaceState(null, '', url.href);
	}

	function deleteUrlParameter(key) {
		var url = new URL(window.location.href);
		url.searchParams.delete(key);
		history.replaceState(null, '', url.href);
	}

	function syncArgAndClass() {
		if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
			if (!document.body.classList.contains('dark')) {
				updateUrlParameter('__theme', 'light');
			} else {
				deleteUrlParameter('__theme');
			}
		} else {
			if (document.body.classList.contains('dark')) {
				updateUrlParameter('__theme', 'dark');
			} else {
				deleteUrlParameter('__theme');
			}
		}
	}

    function toggleDarkMode() {
        document.body.classList.toggle('dark');
		syncArgAndClass();
    }

    const button = document.createElement('button');
    button.textContent = '☀️/🌙';
    button.className = 'toggle-dark-mode';
    button.onclick = toggleDarkMode;

    document.body.appendChild(button);

});