init

themes/duckquill/content/demo/demo.js

@@ -0,0 +1,56 @@
+// Slider
+var slider = document.getElementById("range");
+var output = document.getElementById("range-value");
+output.innerHTML = slider.value;
+
+slider.oninput = function() {
+  output.innerHTML = this.value;
+}
+
+// Spaceship control center
+const colorPickerLight = document.querySelector("#color-picker-light");
+const colorPickerDark = document.querySelector("#color-picker-dark");
+
+let accentColorLight = colorPickerLight.value;
+let accentColorDark = colorPickerDark.value;
+
+colorPickerLight.addEventListener("input", updateAccentColorLight);
+colorPickerDark.addEventListener("input", updateAccentColorDark);
+
+function updateAccentColorLight() {
+	accentColorLight = colorPickerLight.value;
+	updateStyles();
+}
+
+function updateAccentColorDark() {
+	accentColorDark = colorPickerDark.value;
+	updateStyles();
+}
+
+function updateStyles() {
+	let styleElement = document.getElementById("dynamic-styles");
+
+	if (!styleElement) {
+		styleElement = document.createElement("style");
+		styleElement.id = "dynamic-styles";
+		document.head.appendChild(styleElement);
+	}
+
+	let styles = `
+    :root {
+      --accent-color: ${accentColorLight};
+    }
+    [data-theme="dark"] {
+      --accent-color: ${accentColorDark};
+    }
+    @media (prefers-color-scheme: dark) {
+      :root:not([data-theme="light"]) {
+        --accent-color: ${accentColorDark};
+      }
+    }
+  `;
+
+	styleElement.textContent = styles;
+}
+
+updateStyles();