From 5a0c4801cf3a9fd444732888628627b246fd0ef6 Mon Sep 17 00:00:00 2001
From: John Factotum <50942278+johnfactotum@users.noreply.github.com>
Date: Mon, 27 Mar 2023 03:00:32 +0800
Subject: [PATCH] Revert "Set header/footer text color from book stylesheet"

This reverts commit db5fc0f6793c2409445bdb90c9fbe2d278d92ca3.

Reverting for now as it's incomplete and more broken than before.

A full implementation of this would require watching for `matchMedia()`
changes and getting the computed style again. It needs to either get the
list of media queries from the stylesheet, or just assume color scheme
related media queries.
---
 paginator.js | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/paginator.js b/paginator.js
index 8b0f931..f955215 100644
--- a/paginator.js
+++ b/paginator.js
@@ -120,12 +120,12 @@ const getDirection = doc => {
     return { vertical, rtl }
 }
 
-const getPageStyle = doc => {
+const getBackground = doc => {
     const bodyStyle = doc.defaultView.getComputedStyle(doc.body)
     return bodyStyle.backgroundColor === 'rgba(0, 0, 0, 0)'
         && bodyStyle.backgroundImage === 'none'
-        ? doc.defaultView.getComputedStyle(doc.documentElement)
-        : bodyStyle
+        ? doc.defaultView.getComputedStyle(doc.documentElement).background
+        : bodyStyle.background
 }
 
 const makeMarginals = length => Array.from({ length }, () => {
@@ -194,14 +194,14 @@ class View {
                 // it needs to be visible for Firefox to get computed style
                 this.#iframe.style.display = 'block'
                 const { vertical, rtl } = getDirection(doc)
-                const { color, background } = getPageStyle(doc)
+                const background = getBackground(doc)
                 this.#iframe.style.display = 'none'
 
                 this.#vertical = vertical
                 this.#rtl = rtl
 
                 this.#contentRange.selectNodeContents(doc.body)
-                const layout = beforeRender?.({ vertical, rtl, color, background })
+                const layout = beforeRender?.({ vertical, rtl, background })
                 this.#iframe.style.display = 'block'
                 this.render(layout)
                 new ResizeObserver(() => this.expand()).observe(doc.body)
@@ -416,15 +416,13 @@ export class Paginator {
         this.#container.append(this.#view.element)
         return this.#view
     }
-    #beforeRender({ vertical, rtl, color, background }) {
+    #beforeRender({ vertical, rtl, background }) {
         this.#vertical = vertical
         this.#rtl = rtl
 
         // set background to `doc` background
         // this is needed because the iframe does not fill the whole element
         this.#background.style.background = background
-        this.#header.style.color = color
-        this.#footer.style.color = color
 
         const { flow, margin, gap, maxColumnWidth, maxColumns } = this.layout