add new darkmode files

2 files changed, 72 insertions, 0 deletions

diff --git a/s2i/bin/better-css.sh b/s2i/bin/better-css.sh
new file mode 100755
index 0000000..efb1828
--- /dev/null
+++ b/s2i/bin/better-css.sh
@@ -0,0 +1,20 @@
+#!/bin/sh
+
+css="$1"
+if test ! -f "$css"; then
+	echo "usage: $0 <css-file>"
+	exit 1
+fi
+
+orig="${css%.css}-orig.css"
+if test ! -f "$orig"; then
+	cp "$css" "$orig"
+fi
+
+(
+	echo "@import url(darkmode.css);"
+	sed	-e 's/black/var(--color-black)/g' \
+		-e 's/#F5F5F5/var(--color-white)/g' \
+		-e 's/#552681/var(--color-blue)/g' \
+		< "$orig"
+) > "$css"
diff --git a/s2i/bin/darkmode.css b/s2i/bin/darkmode.css
new file mode 100644
index 0000000..65b0320
--- /dev/null
+++ b/s2i/bin/darkmode.css
@@ -0,0 +1,52 @@
+/* css variables for colors */
+:root {
+	--color-page:       #e0e0e0;
+	--color-text:       black;
+	--color-link:       blue;
+	--color-link-seen:  darkblue;
+	--color-border:     #ccc;
+
+	--color-black:      black;
+	--color-white:      #F5F5F5;
+	--color-blue:       #552681;
+}
+
+/* dark mode colors */
+@media screen and (prefers-color-scheme: dark) {
+    :root {
+	--color-page:       #303030;
+	--color-text:       #e0e0e0;
+	--color-link:       #90d0e0;
+	--color-link-seen:  #90d0ff;
+	--color-border:     #666;
+
+	--color-black:	    #e0e0e0;
+	--color-white:      #202020;
+	--color-blue:       #aa88ee;
+    }
+}
+
+body {
+	/* colors */
+	color:		var(--color-text);
+	background:	var(--color-page);
+
+	/* no extra long lines please */
+	max-width: 100ch;
+
+	/* center text */
+	margin: 0px auto;
+
+	/* beautify a bit */
+	padding: 2ex 2em;
+	border: 2pt solid var(--color-border);
+}
+
+a {
+	color: var(--color-link);
+	text-decoration: underline;
+}
+
+a:visited {
+	color: var(--color-link-seen);
+}