Set header/footer text color from book stylesheet

paginator.js

@@ -120,12 +120,12 @@ const getDirection = doc => {
     return { vertical, rtl }
 }
 
-const getBackground = doc => {
+const getPageStyle = doc => {
     const bodyStyle = doc.defaultView.getComputedStyle(doc.body)
     return bodyStyle.backgroundColor === 'rgba(0, 0, 0, 0)'
         && bodyStyle.backgroundImage === 'none'
-        ? doc.defaultView.getComputedStyle(doc.documentElement).background
-        : bodyStyle.background
+        ? doc.defaultView.getComputedStyle(doc.documentElement)
+        : bodyStyle
 }
 
 const makeMarginals = length => Array.from({ length }, () => {
@@ -193,14 +193,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 background = getBackground(doc)
+                const { color, background } = getPageStyle(doc)
                 this.#iframe.style.display = 'none'
 
                 this.#vertical = vertical
                 this.#rtl = rtl
 
                 this.#contentRange.selectNodeContents(doc.body)
-                const layout = beforeRender?.({ vertical, rtl, background })
+                const layout = beforeRender?.({ vertical, rtl, color, background })
                 this.#iframe.style.display = 'block'
                 this.render(layout)
                 new ResizeObserver(() => this.expand()).observe(doc.body)
@@ -415,13 +415,15 @@ export class Paginator {
         this.#container.append(this.#view.element)
         return this.#view
     }
-    #beforeRender({ vertical, rtl, background }) {
+    #beforeRender({ vertical, rtl, color, 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