Automatic contrast color picking (fixes #43)

content/_index.md

@@ -102,8 +102,6 @@ Configuration variables from `config.toml` that can be set/overriden per page/se
 - `default_theme`: Which theme should be used by default (light/dark).
 - `accent_color`: Sets theme and [browser theme](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name/theme-color) color.
 - `accent_color_dark`: Ditto but for the dark theme. If not set regular variant will be used.
-- `fix_contrast`: Whether to fix low contrast in text selection, checkboxes, etc. Use only if the default doesn't provide enough contrast, e.g. the accent color is set to yellow.
-- `fix_contrast_dark`: Ditto but for the dark theme.
 - `emoji_favicon`: Use emoji as a favicon. Only one emoji is being rendered, everything else is truncated.
 - `styles`: Additional CSS styles; expects them to be in the `./static/` directory. If you are using Sass it will be generated there automatically.
 - `scripts`: Additional JavaScript scripts; expects them to be in the `./static/` directory.

content/demo/demo.css

@@ -14,16 +14,6 @@
 	padding: 0.5rem;
 }
 
-#color-picker-container:hover {
-	transform: none;
-}
-
-#color-picker-container label {
-	margin-inline-end: 0.25rem;
-	color: var(--fg-muted-4);
-	font-weight: bold;
-}
-
 :root[dir*="rtl"] #color-picker-container {
 	transform: translateX(calc(100% - 1rem));
 }
@@ -32,9 +22,22 @@
 	transform: none;
 }
 
+#color-picker-container:hover {
+	transform: none;
+}
+
+#color-picker-container > small {
+	display: block;
+	margin-block-end: 0.5rem;
+	font-weight: bold;
+}
+
+#color-picker-container label {
+	margin-inline-end: 0.25rem;
+	color: var(--fg-muted-5);
+}
+
 #color-picker-light,
-#color-picker-dark,
-#contrast-color-light,
-#contrast-color-dark {
+#color-picker-dark {
 	margin-inline-end: 0.25rem;
 }

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;
 }
 

content/demo/index.md

@@ -667,19 +667,10 @@ With `centered` and `big` classes:
 <!-- For the demo purposes only -->
 <div id="color-picker-container">
   <small>Accent color:</small>
-  <br />
   <input id="color-picker-light" type="color" value="#ff7800" />
   <label for="color-picker-light">Light theme</label>
   <br />
   <input id="color-picker-dark" type="color" value="#ffa348" />
   <label for="color-picker-dark">Dark theme</label>
-  <br />
-  <small>Fix contrast:</small>
-  <br />
-  <input id="contrast-color-light" class="switch" type="checkbox" />
-  <label for="contrast-color-light">Light theme</label>
-  <br />
-  <input id="contrast-color-dark" class="switch" type="checkbox" checked />
-  <label for="contrast-color-dark">Dark theme</label>
 </div>
 <!-- End -->