[education/rkward] rkward: Very basic dark mode support for rkward help and output pages.

[Thomas Friedrichsmeier]

Git commit 838353888be91b70945e9b3d13f6c5e9aa336e37 by Thomas Friedrichsmeier.
Committed on 30/03/2022 at 20:30.
Pushed by tfry into branch 'master'.

Very basic dark mode support for rkward help and output pages.

This could certainly do with some further tweaking.

M  +32   -6    rkward/pages/rkward_help.css
M  +25   -0    rkward/pages/rkward_output.css
M  +23   -2    rkward/windows/rkhtmlwindow.cpp

https://invent.kde.org/education/rkward/commit/838353888be91b70945e9b3d13f6c5e9aa336e37

diff --git a/rkward/pages/rkward_help.css b/rkward/pages/rkward_help.css
index e19000ea..f7a21ed5 100644
--- a/rkward/pages/rkward_help.css
+++ b/rkward/pages/rkward_help.css
@@ -1,10 +1,35 @@
+:root {
+  --regular-text-color: black;
+  --background-color: white;
+  --header-color: darkgray;
+  --anchor-color: #0022cc;
+}
+
+ at media (prefers-color-scheme: dark) {
+  :root {
+    --regular-text-color: white;
+    --background-color: black;
+    --header-color: darkgray;
+    --anchor-color: #3366ff;
+  }
+}
+
+body {
+	background: var(--background-color);
+	color: var(--regular-text-color);
+}
+
+a:link {
+	color: var(--anchor-color);
+}
+
 #main {
 	margin-right: 11em;
 }
 
 #main h1 {
 	font-size: 1.5em;
-	color: gray;
+	color: var(--header-color);
 	text-align: center;
 	margin-top: 1em;
 	margin-bottom: 1em;
@@ -13,7 +38,7 @@
 
 #main h2 {
 	font-size: 1.2em;
-	color: gray;
+	color: var(--header-color);
 	margin-top: 1em;
 	margin-bottom: 0.5em;
 	padding: 0;
@@ -21,7 +46,7 @@
 
 #main h3 {
 	font-size: 1.1em;
-	color: gray;
+	color: var(--header-color);
 	margin-top: 1em;
 	margin-bottom: 0em;
 	padding: 0;
@@ -30,7 +55,7 @@
 #main h4 {
 	font-size: 1em;
 	font-weight: bold;
-	color: gray;
+	color: var(--header-color);
 	margin-top: 0.5em;
 	margin-bottom: 0em;
 	padding: 0;
@@ -39,6 +64,7 @@
 #main p {
 	margin-top: 0em;
 	margin-bottom: 0.5em;
+	color: var(--text-color);
 	padding: 0;
 }
 
@@ -52,7 +78,7 @@
 
 #navigation h1 {
 	font-size: 1em;
-	color: gray;
+	color: var(--header-color);
 	margin-top: 0em;
 	margin-bottom: 0.5em;
 }
@@ -64,4 +90,4 @@
 	text-indent: -1em;
 	margin-left: 1.5em;
 	margin-right: 0.2em;
-}
\ No newline at end of file
+}
diff --git a/rkward/pages/rkward_output.css b/rkward/pages/rkward_output.css
index 086cacaa..2a113d03 100644
--- a/rkward/pages/rkward_output.css
+++ b/rkward/pages/rkward_output.css
@@ -1,3 +1,28 @@
+:root {
+  --regular-text-color: black;
+  --background-color: white;
+  --header-color: darkgray;
+  --anchor-color: #0022cc;
+}
+
+ at media (prefers-color-scheme: dark) {
+  :root {
+    --regular-text-color: white;
+    --background-color: black;
+    --header-color: darkgray;
+    --anchor-color: #3366ff;
+  }
+}
+
+body {
+	color: var(--regular-text-color);
+	background: var(--background-color);
+}
+
+a:link {
+	color: var(--anchor-color);
+}
+
 pre.code {
 	margin-left: 2em;
 }
diff --git a/rkward/windows/rkhtmlwindow.cpp b/rkward/windows/rkhtmlwindow.cpp
index d6f9d9ec..f920c86e 100644
--- a/rkward/windows/rkhtmlwindow.cpp
+++ b/rkward/windows/rkhtmlwindow.cpp
@@ -286,12 +286,13 @@ private:
 
 
 RKWebPage* RKHTMLWindow::new_window = nullptr;
-
+#include <QWebEngineScript>
+#include <QWebEngineScriptCollection>
+#include <KColorScheme>
 RKHTMLWindow::RKHTMLWindow (QWidget *parent, WindowMode mode) : RKMDIWindow (parent, RKMDIWindow::HelpWindow) {
 	RK_TRACE (APP);
 
 	current_cache_file = 0;
-
 	QVBoxLayout* layout = new QVBoxLayout (this);
 	layout->setContentsMargins (0, 0, 0, 0);
 	view = new RKWebView (this);
@@ -313,6 +314,26 @@ RKHTMLWindow::RKHTMLWindow (QWidget *parent, WindowMode mode) : RKMDIWindow (par
 	if (!QWebEngineProfile::defaultProfile ()->urlSchemeHandler ("help")) {
 		QWebEngineProfile::defaultProfile ()->installUrlSchemeHandler ("help", new RKWebEngineKIOForwarder (RKWardMainWindow::getMain()));
 	}
+	// See https://bugreports.qt.io/browse/QTBUG-89753
+	// Our CSS files try to support dark mode, automatically, but important versions of QWebEnginePage fail to honor the prefers-color-scheme selector
+	// To help those, apply the corresponding color values via javascript.
+	bool is_dark = (KColorScheme().background().color().lightnessF() < .5);
+	if (is_dark) {
+		auto p = QWebEngineProfile::defaultProfile();
+		QWebEngineScript fix_color_scheme;
+		QString id = QStringLiteral("fix_color_scheme");
+		if (p->scripts()->findScript(id).isNull()) {
+			fix_color_scheme.setName(id);
+			fix_color_scheme.setInjectionPoint(QWebEngineScript::DocumentReady);
+			fix_color_scheme.setSourceCode(QStringLiteral("function rksetcolor(name, value) { document.querySelector(':root').style.setProperty(name, value); }\n"
+									"rksetcolor('--regular-text-color', 'white');\n"
+									"rksetcolor('--background-color', 'black');\n"
+									"rksetcolor('--header-color', 'darkgray');\n"
+									"rksetcolor('--anchor-color', '#3366ff');"));
+			p->scripts()->insert(fix_color_scheme);
+		}
+		//page->setBackgroundColor(Qt::black);  // avoids brief white blink while loading, but is too risky on pages that are not dark scheme aware.
+	}
 #endif
 	layout->addWidget (findbar);
 	findbar->hide ();