1
0
Fork 0
mirror of https://github.com/mozilla/pdf.js.git synced 2025-04-28 23:28:16 +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

@ -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),
])
)