Use the light-dark CSS function in the viewer (issue 17780)

This removes the need for (most) separate `@media (prefers-color-scheme: dark)` blocks when defining colors values, and also provides a simple way of forcing use of either the light or dark theme.

Please refer to https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/light-dark and https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme

*NOTE:* To support this in older browsers, we utilize a [PostCSS plugin](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-light-dark-function).

Author: Snuffleupagus

gulpfile.mjs

@@ -31,9 +31,9 @@ import Metalsmith from "metalsmith";
 import ordered from "ordered-read-streams";
 import path from "path";
 import postcss from "gulp-postcss";
-import postcssDarkThemeClass from "postcss-dark-theme-class";
 import postcssDirPseudoClass from "postcss-dir-pseudo-class";
 import postcssDiscardComments from "postcss-discard-comments";
+import postcssLightDarkFunction from "@csstools/postcss-light-dark-function";
 import postcssNesting from "postcss-nesting";
 import { preprocess } from "./external/builder/builder.mjs";
 import relative from "metalsmith-html-relative";
@@ -1093,7 +1093,7 @@ function buildGeneric(defines, dir) {
           postcssDirPseudoClass(),
           discardCommentsCSS(),
           postcssNesting(),
-          postcssDarkThemeClass(),
+          postcssLightDarkFunction({ preserve: true }),
           autoprefixer(AUTOPREFIXER_CONFIG),
         ])
       )
@@ -1183,6 +1183,7 @@ function buildComponents(defines, dir) {
           postcssDirPseudoClass(),
           discardCommentsCSS(),
           postcssNesting(),
+          postcssLightDarkFunction({ preserve: true }),
           autoprefixer(AUTOPREFIXER_CONFIG),
         ])
       )
@@ -1428,7 +1429,6 @@ gulp.task(
           .pipe(
             postcss([
               discardCommentsCSS(),
-              postcssDarkThemeClass(),
               autoprefixer(MOZCENTRAL_AUTOPREFIXER_CONFIG),
             ])
           )
@@ -1439,7 +1439,6 @@ gulp.task(
           .pipe(
             postcss([
               discardCommentsCSS(),
-              postcssDarkThemeClass(),
               autoprefixer(MOZCENTRAL_AUTOPREFIXER_CONFIG),
             ])
           )
@@ -1536,7 +1535,7 @@ gulp.task(
               postcssDirPseudoClass(),
               discardCommentsCSS(),
               postcssNesting(),
-              postcssDarkThemeClass(),
+              postcssLightDarkFunction({ preserve: true }),
               autoprefixer(AUTOPREFIXER_CONFIG),
             ])
           )

package-lock.json

@@ -5,6 +5,7 @@
     "@babel/core": "^7.26.10",
     "@babel/preset-env": "^7.26.9",
     "@babel/runtime": "^7.27.0",
+    "@csstools/postcss-light-dark-function": "^2.0.7",
     "@fluent/bundle": "^0.19.1",
     "@fluent/dom": "^0.10.1",
     "@metalsmith/layouts": "^3.0.0",
@@ -39,7 +40,6 @@
     "ordered-read-streams": "^2.0.0",
     "pngjs": "^7.0.0",
     "postcss": "^8.5.3",
-    "postcss-dark-theme-class": "^1.3.0",
     "postcss-dir-pseudo-class": "^9.0.1",
     "postcss-discard-comments": "^7.0.3",
     "postcss-nesting": "^13.0.1",

package.json

@@ -562,6 +562,8 @@ function getRGB(color) {
 function getColorValues(colors) {
   const span = document.createElement("span");
   span.style.visibility = "hidden";
+  // NOTE: The following does *not* affect `forced-colors: active` mode.
+  span.style.colorScheme = "only light";
   document.body.append(span);
   for (const name of colors.keys()) {
     span.style.color = name;

src/display/display_utils.js

@@ -26,7 +26,7 @@ class SignatureOptions extends DrawingOptions {
     super();
 
     super.updateProperties({
-      fill: "CanvasText",
+      fill: AnnotationEditor._defaultLineColor,
       "stroke-width": 0,
     });
   }
@@ -43,7 +43,7 @@ class DrawnSignatureOptions extends InkDrawingOptions {
     super(viewerParameters);
 
     super.updateProperties({
-      stroke: "CanvasText",
+      stroke: AnnotationEditor._defaultLineColor,
       "stroke-width": 1,
     });
   }

src/display/editor/signature.js

@@ -471,4 +471,116 @@ describe("Signature Editor", () => {
       );
     });
   });
+
+  describe("viewerCssTheme (light)", () => {
+    let pages;
+
+    beforeEach(async () => {
+      pages = await loadAndWait(
+        "empty.pdf",
+        ".annotationEditorLayer",
+        null,
+        null,
+        { viewerCssTheme: "1" }
+      );
+    });
+
+    afterEach(async () => {
+      await closePages(pages);
+    });
+
+    it("must check that the signature has the correct color with the light theme", async () => {
+      await Promise.all(
+        pages.map(async ([_, page]) => {
+          const colorTheme = await page.evaluate(() => {
+            const html = document.querySelector("html");
+            const style = getComputedStyle(html);
+            return style.getPropertyValue("color-scheme");
+          });
+          expect(colorTheme).toEqual("light");
+
+          await switchToSignature(page);
+          await page.click("#editorSignatureAddSignature");
+
+          await page.waitForSelector("#addSignatureDialog", {
+            visible: true,
+          });
+          await page.type("#addSignatureTypeInput", "Should be black.");
+          await page.waitForSelector(`${addButtonSelector}:not(:disabled)`);
+          await page.click("#addSignatureAddButton");
+
+          const editorSelector = getEditorSelector(0);
+          await page.waitForSelector(editorSelector, { visible: true });
+          await page.waitForSelector(
+            `.canvasWrapper > svg use[href="#path_p1_0"]`,
+            { visible: true }
+          );
+
+          const color = await page.evaluate(() => {
+            const use = document.querySelector(
+              `.canvasWrapper > svg use[href="#path_p1_0"]`
+            );
+            return use.parentNode.getAttribute("fill");
+          });
+          expect(color).toEqual("#000000");
+        })
+      );
+    });
+  });
+
+  describe("viewerCssTheme (dark)", () => {
+    let pages;
+
+    beforeEach(async () => {
+      pages = await loadAndWait(
+        "empty.pdf",
+        ".annotationEditorLayer",
+        null,
+        null,
+        { viewerCssTheme: "2" }
+      );
+    });
+
+    afterEach(async () => {
+      await closePages(pages);
+    });
+
+    it("must check that the signature has the correct color with the dark theme", async () => {
+      await Promise.all(
+        pages.map(async ([_, page]) => {
+          const colorTheme = await page.evaluate(() => {
+            const html = document.querySelector("html");
+            const style = getComputedStyle(html);
+            return style.getPropertyValue("color-scheme");
+          });
+          expect(colorTheme).toEqual("dark");
+
+          await switchToSignature(page);
+          await page.click("#editorSignatureAddSignature");
+
+          await page.waitForSelector("#addSignatureDialog", {
+            visible: true,
+          });
+          await page.type("#addSignatureTypeInput", "Should be black.");
+          await page.waitForSelector(`${addButtonSelector}:not(:disabled)`);
+          await page.click("#addSignatureAddButton");
+
+          const editorSelector = getEditorSelector(0);
+          await page.waitForSelector(editorSelector, { visible: true });
+          await page.waitForSelector(
+            `.canvasWrapper > svg use[href="#path_p1_0"]`,
+            { visible: true }
+          );
+
+          const color = await page.evaluate(() => {
+            const use = document.querySelector(
+              `.canvasWrapper > svg use[href="#path_p1_0"]`
+            );
+            return use.parentNode.getAttribute("fill");
+          });
+          expect(color).toEqual("#000000");
+        })
+      );
+    });
+  });
 });