Merge pull request #17293 from calixteman/dark

Restore the option to set light/dark mode for chromium and generic builds

extensions/chromium/preferences_schema.json

@@ -1,6 +1,17 @@
 {
   "type": "object",
   "properties": {
+    "viewerCssTheme": {
+      "title": "Theme",
+      "description": "The theme to use.\n0 = Use system theme.\n1 = Light theme.\n2 = Dark theme.",
+      "type": "integer",
+      "enum": [
+        0,
+        1,
+        2
+      ],
+      "default": 2
+    },
     "showPreviousViewOnLoad": {
       "description": "DEPRECATED. Set viewOnLoad to 1 to disable showing the last page/position on load.",
       "type": "boolean",

gulpfile.mjs

@@ -25,6 +25,7 @@ import merge from "merge-stream";
 import { mkdirp } from "mkdirp";
 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 postcssNesting from "postcss-nesting";
@@ -1004,6 +1005,7 @@ function buildGeneric(defines, dir) {
           postcssDirPseudoClass(),
           discardCommentsCSS(),
           postcssNesting(),
+          postcssDarkThemeClass(),
           autoprefixer(AUTOPREFIXER_CONFIG),
         ])
       )
@@ -1495,6 +1497,7 @@ gulp.task(
               postcssDirPseudoClass(),
               discardCommentsCSS(),
               postcssNesting(),
+              postcssDarkThemeClass(),
               autoprefixer(AUTOPREFIXER_CONFIG),
             ])
           )

package.json

@@ -5,6 +5,8 @@
     "@babel/core": "^7.23.3",
     "@babel/preset-env": "^7.23.3",
     "@babel/runtime": "^7.23.2",
+    "@fluent/bundle": "^0.18.0",
+    "@fluent/dom": "^0.9.0",
     "@javascript-obfuscator/escodegen": "2.3.0",
     "acorn": "^8.11.2",
     "autoprefixer": "^10.4.16",
@@ -24,8 +26,6 @@
     "eslint-plugin-prettier": "^5.0.1",
     "eslint-plugin-sort-exports": "^0.8.0",
     "eslint-plugin-unicorn": "^49.0.0",
-    "@fluent/bundle": "^0.18.0" ,
-    "@fluent/dom": "^0.9.0",
     "globals": "^13.23.0",
     "gulp": "^4.0.2",
     "gulp-postcss": "^9.0.1",
@@ -41,6 +41,7 @@
     "path2d-polyfill": "^2.0.1",
     "pngjs": "^7.0.0",
     "postcss": "^8.4.31",
+    "postcss-dark-theme-class": "^1.0.0",
     "postcss-dir-pseudo-class": "^8.0.0",
     "postcss-discard-comments": "^6.0.0",
     "postcss-nesting": "^12.0.1",

web/app.js

@@ -228,6 +228,21 @@ const PDFViewerApplication = {
       await this._parseHashParams();
     }
 
+    if (typeof PDFJSDev === "undefined" || !PDFJSDev.test("MOZCENTRAL")) {
+      let mode;
+      switch (AppOptions.get("viewerCssTheme")) {
+        case 1:
+          mode = "is-light";
+          break;
+        case 2:
+          mode = "is-dark";
+          break;
+      }
+      if (mode) {
+        document.documentElement.classList.add(mode);
+      }
+    }
+
     // Ensure that the `L10n`-instance has been initialized before creating
     // e.g. the various viewer components.
     if (typeof PDFJSDev === "undefined" || PDFJSDev.test("GENERIC")) {

web/app_options.js

@@ -329,6 +329,13 @@ const defaultOptions = {
     kind: OptionKind.WORKER,
   },
 };
+if (typeof PDFJSDev === "undefined" || !PDFJSDev.test("MOZCENTRAL")) {
+  defaultOptions.viewerCssTheme = {
+    /** @type {number} */
+    value: typeof PDFJSDev !== "undefined" && PDFJSDev.test("CHROME") ? 2 : 0,
+    kind: OptionKind.VIEWER + OptionKind.PREFERENCE,
+  };
+}
 if (typeof PDFJSDev === "undefined" || PDFJSDev.test("GENERIC")) {
   defaultOptions.defaultUrl = {
     /** @type {string} */