From d86f94a3db6540407e28db783ef6791156e99343 Mon Sep 17 00:00:00 2001
From: Jonas Jenwald <jonas.jenwald@gmail.com>
Date: Mon, 2 Sep 2024 10:05:09 +0200
Subject: [PATCH] Use the "pageColorsBackground" option as background-color for
 non-loaded pages (issue 18680)

This should prevent non-loaded pages from flashing white in e.g. high contrast mode (HCM).
---
 web/pdf_page_view.js | 7 +++++++
 web/pdf_viewer.css   | 3 ++-
 web/pdf_viewer.js    | 4 ++++
 3 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/web/pdf_page_view.js b/web/pdf_page_view.js
index 6304586cd911d..2714109cc5e1d 100644
--- a/web/pdf_page_view.js
+++ b/web/pdf_page_view.js
@@ -222,6 +222,13 @@ class PDFPageView {
         this.scale * PixelsPerInch.PDF_TO_CSS_UNITS
       );
 
+      if (this.pageColors?.background) {
+        container?.style.setProperty(
+          "--page-bg-color",
+          this.pageColors.background
+        );
+      }
+
       const { optionalContentConfigPromise } = options;
       if (optionalContentConfigPromise) {
         // Ensure that the thumbnails always display the *initial* document
diff --git a/web/pdf_viewer.css b/web/pdf_viewer.css
index 9082cda37534a..ec7bceb69a9aa 100644
--- a/web/pdf_viewer.css
+++ b/web/pdf_viewer.css
@@ -61,6 +61,7 @@
   /* Define this variable here and not in :root to avoid to reflow all the UI
      when scaling (see #15929). */
   --scale-factor: 1;
+  --page-bg-color: unset;
 
   padding-bottom: var(--pdfViewer-padding-bottom);
 
@@ -114,7 +115,7 @@
   overflow: visible;
   border: var(--page-border);
   background-clip: content-box;
-  background-color: rgb(255 255 255);
+  background-color: var(--page-bg-color, rgb(255 255 255));
 }
 
 .pdfViewer .dummyPage {
diff --git a/web/pdf_viewer.js b/web/pdf_viewer.js
index 8ef7d25a9a1db..9f4147b949ed5 100644
--- a/web/pdf_viewer.js
+++ b/web/pdf_viewer.js
@@ -927,6 +927,10 @@ class PDFViewer {
         // Ensure that the various layers always get the correct initial size,
         // see issue 15795.
         viewer.style.setProperty("--scale-factor", viewport.scale);
+
+        if (pageColors?.background) {
+          viewer.style.setProperty("--page-bg-color", pageColors.background);
+        }
         if (
           pageColors?.foreground === "CanvasText" ||
           pageColors?.background === "Canvas"