From 05329eba6eb559d1e4e79bb70b6a9b675b9d2104 Mon Sep 17 00:00:00 2001
From: John Factotum <50942278+johnfactotum@users.noreply.github.com>
Date: Fri, 27 Oct 2023 15:04:47 +0800
Subject: [PATCH] Fix viewer background not updated when page background
 changes

Bit of a band-aid fix. Ideally it should have some sort of
"ComputedStyleObserver" but this should fix the most common problem
for now.
---
 paginator.js | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/paginator.js b/paginator.js
index 55ca86c..aa96aa6 100644
--- a/paginator.js
+++ b/paginator.js
@@ -380,6 +380,8 @@ export class Paginator extends HTMLElement {
     #locked = false // while true, prevent any further navigation
     #styles
     #styleMap = new WeakMap()
+    #mediaQuery = matchMedia('(prefers-color-scheme: dark)')
+    #mediaQueryListener
     #scrollBounds
     #touchState
     #touchScrolled
@@ -492,6 +494,12 @@ export class Paginator extends HTMLElement {
             doc.addEventListener('touchmove', this.#onTouchMove.bind(this), opts)
             doc.addEventListener('touchend', this.#onTouchEnd.bind(this))
         })
+
+        this.#mediaQueryListener = () => {
+            if (!this.#view) return
+            this.#background.style.background = getBackground(this.#view.document)
+        }
+        this.#mediaQuery.addEventListener('change', this.#mediaQueryListener)
     }
     attributeChangedCallback(name, _, value) {
         switch (name) {
@@ -961,6 +969,8 @@ export class Paginator extends HTMLElement {
             $style.textContent = style
         } else $style.textContent = styles
 
+        this.#background.style.background = getBackground(this.#view.document)
+
         // needed because the resize observer doesn't work in Firefox
         this.#view?.document?.fonts?.ready?.then(() => this.#view.expand())
     }
@@ -969,6 +979,7 @@ export class Paginator extends HTMLElement {
         this.#view.destroy()
         this.#view = null
         this.sections[this.#index]?.unload?.()
+        this.#mediaQuery.removeEventListener('change', this.#mediaQueryListener)
     }
 }