pub / selfoss-tweaks

commit 25ca18034b8b58b4dbdd278242f447d78525396a
parent 74f8fef229067f6b5571fa6362e7272841246884
Author: JayVii <jayvii[AT]posteo[DOT]de>
Date:   Tue,  8 Oct 2024 10:45:59 +0200

feat: prevent white flashing when opening selfoss in dark mode

the user.css is not loaded until at a later stage, which makes it necessary to patch the index.css file within selfoss itself.

Diffstat:
M
Makefile
 | 
14
++++++++++++++
A
css/dark_injection.css
 | 
10
++++++++++
A
css/dark_injection.min.css
 | 
2
++

3 files changed, 26 insertions(+), 0 deletions(-)
diff --git a/Makefile b/Makefile
@@ -45,6 +45,20 @@ minify-css:
 			-e 's/\s*>\s*/>/g' \
 			-e 's/\s*<\s*/</g' | \
 		tee css/dark.min.css > /dev/null
+	cat css/dark_injection.css | \
+		sed -r ':a; s%(.*)/\*.*\*/%\1%; ta; /\/\*/ !b; N; ba' | \
+		tr -d '\t' | \
+		tr -d '\n' | \
+		tr -s ' ' ' ' | \
+		sed -E \
+			-e 's/\s*;\s*/;/g' \
+			-e 's/\s*:\s*/:/g' \
+			-e 's/\s*\{\s*/{/g' \
+			-e 's/\s*\}\s*/}/g' \
+			-e 's/\s*,\s*/,/g' \
+			-e 's/\s*>\s*/>/g' \
+			-e 's/\s*<\s*/</g' | \
+		tee css/dark_injection.min.css > /dev/null
 
 user-css:
 	printf "/* selfoss-tweaks all-in-one user style sheet */\n" | \
diff --git a/css/dark_injection.css b/css/dark_injection.css
@@ -0,0 +1,10 @@
+/* This will be injected within the "public/index.[0-9a-z]+.css" file in order
+ * to prevent being "flash-banged", when opening the selfoss webclient in dark
+ * mode
+ */
+@media (prefers-color-scheme: dark) {
+  body{
+    background-color: #000;
+    color: #fff;
+  }
+}
diff --git a/css/dark_injection.min.css b/css/dark_injection.min.css
@@ -0,0 +1 @@
+@media (prefers-color-scheme:dark){body{background-color:#000;color:#fff;}}
+\ No newline at end of file