Custom scroll bar in WebKit / Chromium.

desktop-app · Apr 12, 2022 · cc510d3 · cc510d3
1 parent 2de5972
commit cc510d3
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 0 deletions.
diff --git a/webview/webview_embed.cpp b/webview/webview_embed.cpp
@@ -103,6 +103,55 @@ bool Window::finishWebviewEmbedding() {
 	return false;
 }
 
+void Window::updateTheme(
+		QColor scrollBg,
+		QColor scrollBgOver,
+		QColor scrollBarBg,
+		QColor scrollBarBgOver) {
+	if (!_webview) {
+		return;
+	}
+	const auto wrap = [](QColor color) {
+		return u"rgba(%1, %2, %3, %4)"_q
+			.arg(color.red())
+			.arg(color.green())
+			.arg(color.blue())
+			.arg(color.alphaF()).toStdString();
+	};
+	const auto function = R"(
+function() {
+	const style = document.createElement('style');
+	style.textContent = ' \
+::-webkit-scrollbar { \
+	border-radius: 5px !important; \
+	border: 3px solid transparent !important; \
+	background-color: )" + wrap(scrollBg) + R"( !important; \
+	background-clip: content-box !important; \
+	width: 10px !important; \
+} \
+::-webkit-scrollbar:hover { \
+	background-color: )" + wrap(scrollBgOver) + R"( !important; \
+} \
+::-webkit-scrollbar-thumb { \
+	border-radius: 5px !important; \
+	border: 3px solid transparent !important; \
+	background-color: )" + wrap(scrollBarBg) + R"( !important; \
+	background-clip: content-box !important; \
+} \
+::-webkit-scrollbar-thumb:hover { \
+	background-color: )" + wrap(scrollBarBgOver) + R"( !important; \
+} \
+';
+  document.head.append(style);
+}
+)";
+	_webview->init(
+		"document.addEventListener('DOMContentLoaded', "
+		+ function
+		+ ", false);");
+	_webview->eval("(" + function + "());");
+}
+
 void Window::navigate(const QString &url) {
 	Expects(_webview != nullptr);
 

diff --git a/webview/webview_embed.h b/webview/webview_embed.h
@@ -34,6 +34,11 @@ class Window final {
 		return _widget.get();
 	}
 
+	void updateTheme(
+		QColor scrollBg,
+		QColor scrollBgOver,
+		QColor scrollBarBg,
+		QColor scrollBarBgOver);
 	void navigate(const QString &url);
 	void setMessageHandler(Fn<void(std::string)> handler);
 	void setMessageHandler(Fn<void(const QJsonDocument&)> handler);

diff --git a/webview/webview_interface.h b/webview/webview_interface.h
@@ -10,10 +10,20 @@
 #include <string>
 #include <functional>
 
+#include <QtGui/QColor>
+
 // Inspired by https://github.com/webview/webview.
 
 namespace Webview {
 
+struct ThemeParams {
+	QColor scrollBg;
+	QColor scrollBgOver;
+	QColor scrollBarBg;
+	QColor scrollBarBgOver;
+	QByteArray json;
+};
+
 class Interface {
 public:
 	virtual ~Interface() = default;