[education/rkward] rkward/windows: Support arbitrary color theme in HTML viewer, instead of just light or dark.

Thomas Friedrichsmeier null at kde.org
Fri Apr 1 21:54:53 BST 2022


Git commit 7023c0e72ed714a78520d6cd6037755cb1fbbabc by Thomas Friedrichsmeier.
Committed on 01/04/2022 at 20:54.
Pushed by tfry into branch 'master'.

Support arbitrary color theme in HTML viewer, instead of just light or dark.

M  +21   -24   rkward/windows/rkhtmlwindow.cpp

https://invent.kde.org/education/rkward/commit/7023c0e72ed714a78520d6cd6037755cb1fbbabc

diff --git a/rkward/windows/rkhtmlwindow.cpp b/rkward/windows/rkhtmlwindow.cpp
index 04113184..c948f3e6 100644
--- a/rkward/windows/rkhtmlwindow.cpp
+++ b/rkward/windows/rkhtmlwindow.cpp
@@ -315,33 +315,30 @@ RKHTMLWindow::RKHTMLWindow (QWidget *parent, WindowMode mode) : RKMDIWindow (par
 		QWebEngineProfile::defaultProfile ()->installUrlSchemeHandler ("help", new RKWebEngineKIOForwarder (RKWardMainWindow::getMain()));
 	}
 #endif
-	// 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(QPalette::Normal).background().color().lightnessF() < .5);  // <<- HACK to detect dark mode
-	if (is_dark) {
-		QString color_scheme_js = 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');");
+	// Apply current color scheme to page. This needs support in the CSS of the page, so will only work for RKWard help and output pages.
+	// Note that the CSS in those pages also has "automatic" support for dark mode ("prefers-color-scheme: dark"; but see https://bugreports.qt.io/browse/QTBUG-89753), however, 
+	// for a seamless appearance, the only option is to set the theme colors dynamically, via javascript.
+	auto scheme = KColorScheme(QPalette::Normal);
+	QString color_scheme_js = QStringLiteral("function rksetcolor(name, value) { document.querySelector(':root').style.setProperty(name, value); }\n"
+	                                                "rksetcolor('--regular-text-color', '%1');\n"
+	                                                "rksetcolor('--background-color', '%2');\n"
+	                                                "rksetcolor('--header-color', '%3');\n"
+	                                                "rksetcolor('--anchor-color', '%4');").arg(scheme.foreground().color().name(), scheme.background().color().name(), scheme.foreground(KColorScheme::VisitedText).color().name(), scheme.foreground(KColorScheme::LinkText).color().name());
 #ifdef NO_QT_WEBENGINE
-		connect(page, &RKWebPage::loadFinished, [this, color_scheme_js](){
-			page->mainFrame()->evaluateJavaScript(color_scheme_js);
-		});
+	connect(page, &RKWebPage::loadFinished, [this, color_scheme_js](){
+		page->mainFrame()->evaluateJavaScript(color_scheme_js);
+	});
 #else
-		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(color_scheme_js);
-			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.
+	auto p = QWebEngineProfile::defaultProfile();
+	QWebEngineScript fix_color_scheme;
+	QString id = QStringLiteral("fix_color_scheme");
+	p->scripts()->remove(p->scripts()->findScript(id));  // remove any existing variant of the script. It might have been created for the wrong theme.
+	fix_color_scheme.setName(id);
+	fix_color_scheme.setInjectionPoint(QWebEngineScript::DocumentReady);
+	fix_color_scheme.setSourceCode(color_scheme_js);
+	p->scripts()->insert(fix_color_scheme);
+	//page->setBackgroundColor(scheme.background().color());  // avoids brief white blink while loading, but is too risky on pages that are not dark scheme aware.
 #endif
-	}
 
 	layout->addWidget (findbar);
 	findbar->hide ();


More information about the rkward-tracker mailing list