diff --git a/extensions/chromium/preferences_schema.json b/extensions/chromium/preferences_schema.json
index 6f6afb03aa9e8..6e32677acb043 100644
--- a/extensions/chromium/preferences_schema.json
+++ b/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",
diff --git a/gulpfile.mjs b/gulpfile.mjs
index acdf68b7472d5..24454ee8a624f 100644
--- a/gulpfile.mjs
+++ b/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),
             ])
           )
diff --git a/package-lock.json b/package-lock.json
index a9e2a68a3da40..8073e516d1d97 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -47,6 +47,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",
@@ -16724,6 +16725,28 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/postcss-dark-theme-class": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-dark-theme-class/-/postcss-dark-theme-class-1.0.0.tgz",
+      "integrity": "sha512-7XiFx8Ahvot3YmHjs4/jlxyUggomSNZzoF1hyS5xIZpLyfcPY8vb/3q4QPP8CqhnnA911OrDOZL7OTkjHoEjdw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "engines": {
+        "node": ">=18.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.14"
+      }
+    },
     "node_modules/postcss-dir-pseudo-class": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/postcss-dir-pseudo-class/-/postcss-dir-pseudo-class-8.0.0.tgz",
diff --git a/package.json b/package.json
index b9d4451d6cf17..8c81f1fb240d8 100644
--- a/package.json
+++ b/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",
diff --git a/web/app.js b/web/app.js
index 81eb15bb9b407..552566d6cc4bd 100644
--- a/web/app.js
+++ b/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")) {
diff --git a/web/app_options.js b/web/app_options.js
index 84338eff8653c..2e302e8a91674 100644
--- a/web/app_options.js
+++ b/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} */