Temporary fix for #43

config.toml

@@ -61,6 +61,11 @@ primary_color_alpha = "rgba(255, 120, 0, 0.2)"
 # If not set regular variant will be used.
 primary_color_dark = "#ffa348"
 primary_color_dark_alpha = "rgba(255, 163, 72, 0.2)"
+# Whether to fix low contrast in text selection, checkboxes, etc.
+# Use only if the default doesn't provide enough contrast, e.g. the primary color is set to yellow.
+# fix_contrast = true
+# Ditto but for the dark mode.
+fix_contrast_dark = true
 # Use emoji as a favicon.
 # Only one emoji is being rendered, everything else is truncated.
 # emoji_favicon = "🦆🪶"

sass/_footer.scss

@@ -37,7 +37,7 @@
 					&:hover {
 						box-shadow: var(--edge-highlight);
 						background-color: var(--primary-color);
-						color: var(--fg-color);
+						color: var(--contrast-color);
 						text-decoration: none;
 					}
 

sass/_general.scss

@@ -36,7 +36,7 @@ body {
 // Style text selection to use primary color
 ::selection {
 	background-color: var(--primary-color);
-	color: var(--fg-color);
+	color: var(--contrast-color);
 }
 
 // Make focused anchor not get covered by nav,
@@ -77,6 +77,7 @@ body {
 }
 
 @media (prefers-reduced-motion) {
+
 	*,
 	*::before,
 	*::after {

sass/_input.scss

@@ -16,7 +16,7 @@ input[type="color"] {
 		transform: scale(0.5);
 		opacity: 0;
 		transition: var(--transition);
-		background-color: white;
+		background-color: var(--contrast-color);
 		content: "";
 	}
 
@@ -131,7 +131,7 @@ input[type="range"] {
 		cursor: pointer;
 		box-shadow: var(--shadow);
 		border-radius: 999px;
-		background: white;
+		background-color: white;
 		width: 1.5rem;
 		height: 1.5rem;
 	}
@@ -143,7 +143,7 @@ input[type="range"] {
 		box-shadow: var(--shadow);
 		border: none;
 		border-radius: 999px;
-		background: white;
+		background-color: white;
 		width: 1.5rem;
 		height: 1.5rem;
 	}

templates/partials/head.html

@@ -42,6 +42,7 @@
 		:root {
 			--primary-color: {{ config.extra.primary_color | default(value="#6f8396") }};
 			--primary-color-alpha: {{ config.extra.primary_color_alpha | default(value="rgba(111, 131, 150, 0.2)") }};
+			--contrast-color: {% if config.extra.fix_contrast %}rgba(0, 0, 0, 0.8){% else %}#fff{% endif %};
 		}
 
 		{%- if config.extra.primary_color_dark %}
@@ -49,6 +50,7 @@
 				:root {
 					--primary-color: {{ config.extra.primary_color_dark }};
 					--primary-color-alpha: {{ config.extra.primary_color_dark_alpha }};
+					--contrast-color: {% if config.extra.fix_contrast_dark %}rgba(0, 0, 0, 0.8){% else %}#fff{% endif %};
 				}
 			}
 		{%- endif %}