diff --git a/external/builder/builder.js b/external/builder/builder.js index a3ed4e956..2120d683f 100644 --- a/external/builder/builder.js +++ b/external/builder/builder.js @@ -269,6 +269,12 @@ function preprocessCSS(mode, source, destination) { content = expandImports(content, source); if (mode === "mozcentral") { content = removePrefixed(content, hasPrefixedMozcentral); + // In the mozcentral version the color theme should be based on the Firefox + // theme instead of the system theme. + content = content.replace( + "prefers-color-scheme", + "-moz-toolbar-prefers-color-scheme" + ); } fs.writeFileSync(destination, content); } diff --git a/web/app.js b/web/app.js index a5e903e3c..da46c330c 100644 --- a/web/app.js +++ b/web/app.js @@ -424,20 +424,23 @@ const PDFViewerApplication = { try { const styleSheet = document.styleSheets[0]; const cssRules = styleSheet?.cssRules || []; + const mediaMatcher = + typeof PDFJSDev !== "undefined" && PDFJSDev.test("MOZCENTRAL") + ? "-moz-toolbar-prefers-color-scheme" + : "prefers-color-scheme"; + const mediaRule = `(${mediaMatcher}: dark)`; + const mediaRegex = new RegExp( + `^@media \\(${mediaMatcher}: dark\\) {\\n\\s*([\\w\\s-.,:;/\\\\{}()]+)\\n}$` + ); for (let i = 0, ii = cssRules.length; i < ii; i++) { const rule = cssRules[i]; - if ( - rule instanceof CSSMediaRule && - rule.media?.[0] === "(prefers-color-scheme: dark)" - ) { + if (rule instanceof CSSMediaRule && rule.media?.[0] === mediaRule) { if (cssTheme === ViewerCssTheme.LIGHT) { styleSheet.deleteRule(i); return; } // cssTheme === ViewerCssTheme.DARK - const darkRules = /^@media \(prefers-color-scheme: dark\) {\n\s*([\w\s-.,:;/\\{}()]+)\n}$/.exec( - rule.cssText - ); + const darkRules = mediaRegex.exec(rule.cssText); if (darkRules?.[1]) { styleSheet.deleteRule(i); styleSheet.insertRule(darkRules[1], i);