From 99624d013a1b1d195b77e2e3a4040132359170d2 Mon Sep 17 00:00:00 2001
From: John Factotum <50942278+johnfactotum@users.noreply.github.com>
Date: Fri, 10 Mar 2023 22:25:17 +0800
Subject: [PATCH] Improve invertibility

- Don't use multiply
- Set background on separate div
---
 overlayer.js |  5 -----
 paginator.js | 15 +++++++++++++--
 2 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/overlayer.js b/overlayer.js
index a790e4b..0787bd0 100644
--- a/overlayer.js
+++ b/overlayer.js
@@ -10,11 +10,6 @@ export class Overlayer {
             width: '100%', height: '100%',
             pointerEvents: 'none',
         })
-        const darkMode = matchMedia('(prefers-color-scheme: dark)')
-        const setBlendMode = () => this.#svg.style.mixBlendMode =
-            darkMode.matches ? 'normal' : 'multiply'
-        darkMode.addEventListener('change', setBlendMode)
-        setBlendMode()
     }
     get element() {
         return this.#svg
diff --git a/paginator.js b/paginator.js
index 556f277..aa5405b 100644
--- a/paginator.js
+++ b/paginator.js
@@ -337,6 +337,7 @@ class View {
 // NOTE: everything here assumes the so-called "negative scroll type" for RTL
 export class Paginator {
     #element = document.createElement('div')
+    #background = document.createElement('div')
     #maxSizeContainer = document.createElement('div')
     #container = document.createElement('div')
     #header = document.createElement('div')
@@ -365,6 +366,16 @@ export class Paginator {
             position: 'relative',
             overflow: 'hidden',
         })
+
+        this.#element.append(this.#background)
+        Object.assign(this.#background.style, {
+            width: '100%',
+            height: '100%',
+            position: 'absolute',
+            top: '0', left: '0',
+        })
+        this.#background.classList.add('filter')
+
         this.#element.append(this.#maxSizeContainer)
         Object.assign(this.#maxSizeContainer.style, {
             width: '100%',
@@ -408,9 +419,9 @@ export class Paginator {
         this.#vertical = vertical
         this.#rtl = rtl
 
-        // set `document` background to `doc` background
+        // set background to `doc` background
         // this is needed because the iframe does not fill the whole element
-        this.#element.style.background = background
+        this.#background.style.background = background
 
         const { flow, margin, gap, maxColumnWidth, maxColumns } = this.layout