Use calculated background color for newer Qt versions

qutebrowser/browser/webengine/webenginetab.py

@@ -27,7 +27,7 @@ import html as html_utils
 
 import sip
 from PyQt5.QtCore import (pyqtSignal, pyqtSlot, Qt, QEvent, QPoint, QPointF,
-                          QUrl, QTimer, QObject)
+                          QUrl, QTimer, QObject, qVersion)
 from PyQt5.QtGui import QKeyEvent, QIcon
 from PyQt5.QtNetwork import QAuthenticator
 from PyQt5.QtWidgets import QApplication
@@ -246,7 +246,8 @@ class WebEngineCaret(browsertab.AbstractCaret):
             self._tab.search.clear()
 
         self._tab.run_js_async(
-            javascript.assemble('caret', 'setPlatform', sys.platform))
+            javascript.assemble('caret',
+                                'setPlatform', sys.platform, qVersion()))
         self._js_call('setInitialCursor', self._selection_cb)
 
     def _selection_cb(self, enabled):

qutebrowser/javascript/caret.js

@@ -780,6 +780,18 @@ window._qutebrowser.caret = (function() {
      */
     CaretBrowsing.blinkFlag = true;
 
+    /**
+     * Whether we're running on Windows.
+     * @type {boolean}
+     */
+    CaretBrowsing.isWindows = null;
+
+    /**
+     * Whether we're running on on old Qt 5.7.1.
+     * @type {boolean}
+     */
+    CaretBrowsing.isOldQt = null;
+
     /**
      * Check if a node is a control that normally allows the user to interact
      * with it using arrow keys. We won't override the arrow keys when such a
@@ -856,13 +868,25 @@ window._qutebrowser.caret = (function() {
     };
 
     CaretBrowsing.injectCaretStyles = function() {
+        let backgroundColor;
+        if (CaretBrowsing.isOldQt) {
+            backgroundColor = "  background-color: #000;";
+        } else {
+            backgroundColor =
+                "  --inherited-color: inherit;" +
+                "  background-color: var(--inherited-color, #000);" +
+                "  color: var(--inherited-color, #000);" +
+                "  mix-blend-mode: difference;" +
+                "  filter: invert(85%);";
+        }
+
         const style = ".CaretBrowsing_Caret {" +
             "  position: absolute;" +
             "  z-index: 2147483647;" +
             "  min-height: 1em;" +
             "  min-width: 0.2em;" +
-            "  background-color: #000;" +
             "  animation: blink 1s step-end infinite;" +
+            backgroundColor +
             "}" +
             "@keyframes blink {" +
             "  50% { visibility: hidden; }" +
@@ -1299,8 +1323,9 @@ window._qutebrowser.caret = (function() {
         return CaretBrowsing.selectionEnabled;
     };
 
-    funcs.setPlatform = (platform) => {
+    funcs.setPlatform = (platform, qtVersion) => {
         CaretBrowsing.isWindows = platform.startsWith("win");
+        CaretBrowsing.isOldQt = qtVersion === "5.7.1";
     };
 
     funcs.disableCaret = () => {