Search code examples
pdf.jspyqt6qwebengineview

Properly switch to dark theme in PDF.JS rendered inside a QWebView

I am trying to display a PDF using PDF.JS inside a QWebEngineView with the code below

from PyQt6.QtCore import QUrl
from PyQt6.QtWidgets import QApplication
from PyQt6.QtWebEngineWidgets import QWebEngineView
import sys

class Window():
    def __init__(self):
        super().__init__()
        pdfjs = "file:///D:/CODING RELATED/Projects/Import Manager/pdfjs-2.15.349-legacy-dist/web/viewer.html"

        pdf_url = QUrl().fromUserInput(f"{pdfjs}?file=file:///C:/Users/Eliaz/Desktop/qt5cadaquesPart14.pdf")

        self.preview = QWebEngineView()
        self.preview.load(pdf_url)
        self.preview.show()

app = QApplication(sys.argv)
window = Window()
sys.exit(app.exec())

enter image description here

As you can see in the image, it is using the light theme but I need to change it to dark theme. Digging deeper into this problem, I found these related issues #12290 and #14059. I found out that I should set the viewerCssTheme attribute/property to 2 which sets the theme to dark mode. Having not so long experience using QWebEngineView, I have no idea how to set its value programmatically inside PyQt6. With no choice left I just hard-coded the value of it on lines 175 and 20450 in web\viewer.js.

enter image description here enter image description here

This is what it looks like after hard-coding the values: enter image description here

As you can see it switched to the dark theme but with some bad side effects like the scroll-thumb still white which should be dark gray.

My question: Is this how I properly switch to a dark theme in PDF.JS which is rendered inside a QWebEngineView?

Solution

  • After pondering it for a while, I just decided to stick on using the way of hard coding it as I can't find a way to tell Qt's WebView to change my preferred theme. Additionally, hard coding the values seems to just create one minor visible flaw which is the white scrollbar track. To solve that, I just need to add these lines in the web\viewer.css:

    These overrides the scrollbar's thumb and track color, You can learn more info about this here.

    #viewerContainer::-webkit-scrollbar {
  width: 11px;
}

#viewerContainer::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-color)
}

#viewerContainer::-webkit-scrollbar-track {
  background: var(--scrollbar-bg-color);
}

    This is what it looks like now: enter image description here