Automatically adjust scrollbar colors to match current color scheme

src/pyj/book_list/theme.pyj

@@ -66,6 +66,14 @@ def color_to_rgba(color):
     return ctx.getImageData(0, 0, 1, 1).data
 
 
+def cached_color_to_rgba(color):
+    cache = cached_color_to_rgba.cache
+    if not cache[color]:
+        cache[color] = color_to_rgba(color)
+    return cache[color]
+cached_color_to_rgba.cache = {}
+
+
 def get_color_as_rgba(name):
     cache = get_color_as_rgba.cache
     if not cache[name]:

src/pyj/read_book/scrollbar.pyj

@@ -2,9 +2,11 @@
 # License: GPL v3 Copyright: 2019, Kovid Goyal <kovid at kovidgoyal.net>
 from __python__ import bound_methods, hash_literals
 
-from dom import unique_id
 from elementmaker import E
+
 from book_list.globals import get_session_data
+from book_list.theme import cached_color_to_rgba
+from dom import unique_id
 
 
 class BookScrollbar:
@@ -32,7 +34,7 @@ class BookScrollbar:
                 onmousedown=self.on_bob_mousedown,
             ),
             E.div(
-                style='position: absolute; z-index: 30000; width: 100vw; height: 100vh; left: 0; top: 0; display: none;'
+                style='position: absolute; z-index: 2147483647; width: 100vw; height: 100vh; left: 0; top: 0; display: none;'
             )
         )
 
@@ -89,3 +91,19 @@ class BookScrollbar:
         if self.sync_to_contents_timer:
             window.clearTimeout(self.sync_to_contents_timer)
         self.sync_to_contents_timer = window.setTimeout(self.set_position.bind(None, frac), 100)
+
+    def apply_color_scheme(self, colors):
+        fg = cached_color_to_rgba(colors.foreground)
+        bg = cached_color_to_rgba(colors.background)
+
+        def mix(fg, bg, frac):
+            def m(x):  # noqa: unused-local
+                return frac * fg[x] + (1-frac) * bg[x]
+            return v'[m[0], m[1], m[2]]'
+
+        rbg = mix(fg, bg, 0.3)
+        rfg = mix(fg, bg, 0.7)
+
+        c = self.container
+        c.style.backgroundColor = f'rgb({rbg[0]}, {rbg[1]}, {rbg[2]})'
+        c.firstChild.style.backgroundColor = f'rgb({rfg[0]}, {rfg[1]}, {rfg[2]})'

src/pyj/read_book/view.pyj

@@ -8,7 +8,7 @@ from gettext import gettext as _
 import read_book.iframe  # noqa
 from ajax import ajax_send
 from book_list.globals import get_session_data
-from book_list.theme import color_to_rgba, get_color
+from book_list.theme import cached_color_to_rgba, get_color
 from dom import add_extra_css, build_rule, set_css, svgicon, unique_id
 from iframe_comm import IframeWrapper
 from modals import error_dialog, warning_dialog
@@ -494,6 +494,8 @@ class View:
 
             m.parentNode.style.backgroundColor = ans.background  # this is needed on iOS where the bottom margin has its own margin, so we dont want the body background color to bleed through
             self.content_popup_overlay.apply_color_scheme(ans.background, ans.foreground)
+            self.book_scrollbar.apply_color_scheme(ans)
+            self.iframe.parentNode.parentNode.style.backgroundColor = ans.background
         return ans
 
     def on_resize(self):
@@ -586,7 +588,7 @@ class View:
         cs = self.get_color_scheme(True)
         fade = int(sd.get('background_image_fade'))
         if self.iframe.style.backgroundImage is not 'none' and fade > 0:
-            rgba = color_to_rgba(cs.background)
+            rgba = cached_color_to_rgba(cs.background)
             bg_image_fade = f'rgba({rgba[0]}, {rgba[1]}, {rgba[2]}, {fade/100})'
         return {
             'margin_left': 0 if name is self.book.manifest.title_page_name else sd.get('margin_left'),