1
0
Fork 0
mirror of https://github.com/mozilla/pdf.js.git synced 2025-04-29 07:37:57 +02:00

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).
This commit is contained in:
Jonas Jenwald 2025-04-16 11:14:02 +02:00
parent 63e6566597
commit ae1cbc6a9e
15 changed files with 366 additions and 312 deletions

View file

@ -26,6 +26,7 @@ import {
AutoPrintRegExp,
CursorTool,
DEFAULT_SCALE_VALUE,
docStyle,
getActiveOrFocusedElement,
isValidRotation,
isValidScrollMode,
@ -206,14 +207,14 @@ const PDFViewerApplication = {
let mode;
switch (AppOptions.get("viewerCssTheme")) {
case 1:
mode = "is-light";
mode = "light";
break;
case 2:
mode = "is-dark";
mode = "dark";
break;
}
if (mode) {
document.documentElement.classList.add(mode);
docStyle.setProperty("color-scheme", mode);
}
if (typeof PDFJSDev === "undefined" || PDFJSDev.test("TESTING")) {
@ -365,6 +366,7 @@ const PDFViewerApplication = {
maxCanvasPixels: x => parseInt(x),
spreadModeOnLoad: x => parseInt(x),
supportsCaretBrowsingMode: x => x === "true",
viewerCssTheme: x => parseInt(x),
});
}