first commit

javascript/Readme.md

@@ -0,0 +1,5 @@
+# Toggle light and dark themes
+
+![](/img.png)
+
+An extension for [sd-webui](https://github.com/AUTOMATIC1111/stable-diffusion-webui). If your systems' theme is dark, it will add and remove `?__theme=light` automatically, and `?__theme=dark` if your system is light

javascript/toggle_dark_light.js

@@ -0,0 +1,43 @@
+
+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);
+
+});