From c9537a5b89abab559120d2ab646a8437be46dc80 Mon Sep 17 00:00:00 2001
From: Rohan Kumar <seirdy@seirdy.one>
Date: Wed, 26 Oct 2022 11:48:35 -0700
Subject: [PATCH] Rebuild dark + increased-contrast fg palette

New foreground colors when BOTH "prefers-color-scheme: dark" and
"prefers-contrast: more" media queries evaluate to "true" at the same
time. Regular and reduced-contrast dark-mode remain unchanged, and
non-dark colors continue to be browser-defaults.

High-contrast dark-mode now has visually distinct visited/unvisited
links for red-green and blue-yellow color blindness, and targets an even
higher APCA contrast.
---
 assets/css/dark.css | 51 ++++++++++++++++++++++++++-------------------
 1 file changed, 30 insertions(+), 21 deletions(-)

diff --git a/assets/css/dark.css b/assets/css/dark.css
index f5d3e7c..c836dbe 100644
--- a/assets/css/dark.css
+++ b/assets/css/dark.css
@@ -20,7 +20,7 @@
 
 	mark {
 		color: #000;
-		background-color: #eee7b2;
+		background-color: #eee8a7;
 	}
 
 	/* Only color <a> if it's a link; if href is empty, let it be. */
@@ -29,7 +29,21 @@
 	}
 
 	a:visited {
-		color: #ffdaff;
+		color: #ffd8ff;
+	}
+
+	/* Small text needs higher contrast.
+	 * Do not apply to "prefers-contrast: less"
+	 * Do not apply to "prefers-contrast: more" since
+	 * we override colors there. */
+	@media not (prefers-contrast) {
+		sup a:link:not(:active) {
+			color: #feb;
+		}
+
+		sup a:visited:not(:active) {
+			color: #ffe6ff;
+		}
 	}
 
 	/* For users who request less contrast, target ACPA Lc near -80 */
@@ -40,35 +54,30 @@
 		}
 	}
 
-	/* Small text needs higher contrast. */
-	@media not (prefers-contrast: less) {
-		sup a:link:not(:active) {
-			color: #feb;
-		}
-
-		sup a:visited:not(:active) {
-			color: #ffe6ff;
-		}
-	}
-
-	/* For users who request more contrast, target ACPA Lc near -96.
+	/* For users who request more contrast, target ACPA Lc near -99.
 	 * I have a monitor with terrible contrast so I use
-	 * "prefers-contrast: more" and this amount works for me.
-	 * People complained that the lobste.rs dark theme has too much
-	 * contrast, so I made that my baseline and exceeded it ever so
-	 * slightly. */
+	 * "prefers-contrast: more" and this amount works for me. People
+	 * complained that the lobste.rs dark theme has too much contrast, so
+	 * I made that my baseline and exceeded it ever so slightly.
+	 *
+	 * Also, this mode ensures that visited/un-visited links look very
+	 * different under red-green and blue-yellow color blindness.
+	 * Normally, they look very similar under blue-yellow color blindness.
+	 *
+	 * I sometimes use this mode when I need to set my brightness all the
+	 * way down. */
 	@media (prefers-contrast: more) {
 		html,
 		input {
 			background-color: #0d0d0d;
-			color: #eee;
+			color: #f3f3f3;
 		}
 
 		a:link {
-			color: #feb;
+			color: #fff970;
 		}
 		a:visited {
-			color: #ffe6ff;
+			color: #ccfdff;
 		}
 	}