Automatic contrast color picking (fixes #43)

content/demo/demo.js

@@ -10,16 +10,12 @@ slider.oninput = function() {
 // Spaceship control center
 const colorPickerLight = document.querySelector("#color-picker-light");
 const colorPickerDark = document.querySelector("#color-picker-dark");
-const contrastCheckboxLight = document.querySelector("#contrast-color-light");
-const contrastCheckboxDark = document.querySelector("#contrast-color-dark");
 
 let accentColorLight = colorPickerLight.value;
 let accentColorDark = colorPickerDark.value;
 
 colorPickerLight.addEventListener("input", updateAccentColorLight);
 colorPickerDark.addEventListener("input", updateAccentColorDark);
-contrastCheckboxLight.addEventListener("change", updateStyles);
-contrastCheckboxDark.addEventListener("change", updateStyles);
 
 function updateAccentColorLight() {
 	accentColorLight = colorPickerLight.value;
@@ -32,9 +28,6 @@ function updateAccentColorDark() {
 }
 
 function updateStyles() {
-	const contrastColorLight = contrastCheckboxLight.checked;
-	const contrastColorDark = contrastCheckboxDark.checked;
-
 	let styleElement = document.getElementById("dynamic-styles");
 
 	if (!styleElement) {
@@ -57,44 +50,6 @@ function updateStyles() {
     }
   `;
 
-	if (contrastColorLight) {
-		styles += `
-      :root {
-        --contrast-color: rgb(0 0 0 / 0.8);
-      }
-    `;
-	} else {
-		styles += `
-      :root {
-        --contrast-color: #fff;
-      }
-    `;
-	}
-
-	if (contrastColorDark) {
-		styles += `
-      [data-theme="dark"] {
-        --contrast-color: rgb(0 0 0 / 0.8);
-      }
-      @media (prefers-color-scheme: dark) {
-        :root:not([data-theme="light"]) {
-          --contrast-color: rgb(0 0 0 / 0.8);
-        }
-      }
-    `;
-	} else {
-		styles += `
-      [data-theme="dark"] {
-        --contrast-color: #fff;
-      }
-      @media (prefers-color-scheme: dark) {
-        :root:not([data-theme="light"]) {
-          --contrast-color: #fff;
-        }
-      }
-    `;
-	}
-
 	styleElement.textContent = styles;
 }