Skip to content

Commit 01c1c6e

Browse files
SnuffleupagusSnuffleupagus
authored
Merge pull request #19819 from Snuffleupagus/CSS-light-dark
Use the `light-dark` CSS function in the viewer (issue 17780)
2 parents 627a935 + ae1cbc6 commit 01c1c6e

15 files changed

+370
-316
lines changed

‎gulpfile.mjs

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -31,9 +31,9 @@ import Metalsmith from "metalsmith";
3131
import ordered from "ordered-read-streams";
3232
import path from "path";
3333
import postcss from "gulp-postcss";
34-
import postcssDarkThemeClass from "postcss-dark-theme-class";
3534
import postcssDirPseudoClass from "postcss-dir-pseudo-class";
3635
import postcssDiscardComments from "postcss-discard-comments";
36+
import postcssLightDarkFunction from "@csstools/postcss-light-dark-function";
3737
import postcssNesting from "postcss-nesting";
3838
import { preprocess } from "./external/builder/builder.mjs";
3939
import relative from "metalsmith-html-relative";
@@ -1093,7 +1093,7 @@ function buildGeneric(defines, dir) {
10931093
postcssDirPseudoClass(),
10941094
discardCommentsCSS(),
10951095
postcssNesting(),
1096-
postcssDarkThemeClass(),
1096+
postcssLightDarkFunction({ preserve: true }),
10971097
autoprefixer(AUTOPREFIXER_CONFIG),
10981098
])
10991099
)
@@ -1183,6 +1183,7 @@ function buildComponents(defines, dir) {
11831183
postcssDirPseudoClass(),
11841184
discardCommentsCSS(),
11851185
postcssNesting(),
1186+
postcssLightDarkFunction({ preserve: true }),
11861187
autoprefixer(AUTOPREFIXER_CONFIG),
11871188
])
11881189
)
@@ -1428,7 +1429,6 @@ gulp.task(
14281429
.pipe(
14291430
postcss([
14301431
discardCommentsCSS(),
1431-
postcssDarkThemeClass(),
14321432
autoprefixer(MOZCENTRAL_AUTOPREFIXER_CONFIG),
14331433
])
14341434
)
@@ -1439,7 +1439,6 @@ gulp.task(
14391439
.pipe(
14401440
postcss([
14411441
discardCommentsCSS(),
1442-
postcssDarkThemeClass(),
14431442
autoprefixer(MOZCENTRAL_AUTOPREFIXER_CONFIG),
14441443
])
14451444
)
@@ -1536,7 +1535,7 @@ gulp.task(
15361535
postcssDirPseudoClass(),
15371536
discardCommentsCSS(),
15381537
postcssNesting(),
1539-
postcssDarkThemeClass(),
1538+
postcssLightDarkFunction({ preserve: true }),
15401539
autoprefixer(AUTOPREFIXER_CONFIG),
15411540
])
15421541
)

‎package-lock.json

Lines changed: 79 additions & 26 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
"@babel/core": "^7.26.10",
66
"@babel/preset-env": "^7.26.9",
77
"@babel/runtime": "^7.27.0",
8+
"@csstools/postcss-light-dark-function": "^2.0.7",
89
"@fluent/bundle": "^0.19.1",
910
"@fluent/dom": "^0.10.1",
1011
"@metalsmith/layouts": "^3.0.0",
@@ -39,7 +40,6 @@
3940
"ordered-read-streams": "^2.0.0",
4041
"pngjs": "^7.0.0",
4142
"postcss": "^8.5.3",
42-
"postcss-dark-theme-class": "^1.3.0",
4343
"postcss-dir-pseudo-class": "^9.0.1",
4444
"postcss-discard-comments": "^7.0.3",
4545
"postcss-nesting": "^13.0.1",

‎src/display/display_utils.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -562,6 +562,8 @@ function getRGB(color) {
562562
function getColorValues(colors) {
563563
const span = document.createElement("span");
564564
span.style.visibility = "hidden";
565+
// NOTE: The following does *not* affect `forced-colors: active` mode.
566+
span.style.colorScheme = "only light";
565567
document.body.append(span);
566568
for (const name of colors.keys()) {
567569
span.style.color = name;

‎src/display/editor/signature.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ class SignatureOptions extends DrawingOptions {
2626
super();
2727

2828
super.updateProperties({
29-
fill: "CanvasText",
29+
fill: AnnotationEditor._defaultLineColor,
3030
"stroke-width": 0,
3131
});
3232
}
@@ -43,7 +43,7 @@ class DrawnSignatureOptions extends InkDrawingOptions {
4343
super(viewerParameters);
4444

4545
super.updateProperties({
46-
stroke: "CanvasText",
46+
stroke: AnnotationEditor._defaultLineColor,
4747
"stroke-width": 1,
4848
});
4949
}

‎test/integration/signature_editor_spec.mjs

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -471,4 +471,116 @@ describe("Signature Editor", () => {
471471
);
472472
});
473473
});
474+
475+
describe("viewerCssTheme (light)", () => {
476+
let pages;
477+
478+
beforeEach(async () => {
479+
pages = await loadAndWait(
480+
"empty.pdf",
481+
".annotationEditorLayer",
482+
null,
483+
null,
484+
{ viewerCssTheme: "1" }
485+
);
486+
});
487+
488+
afterEach(async () => {
489+
await closePages(pages);
490+
});
491+
492+
it("must check that the signature has the correct color with the light theme", async () => {
493+
await Promise.all(
494+
pages.map(async ([_, page]) => {
495+
const colorTheme = await page.evaluate(() => {
496+
const html = document.querySelector("html");
497+
const style = getComputedStyle(html);
498+
return style.getPropertyValue("color-scheme");
499+
});
500+
expect(colorTheme).toEqual("light");
501+
502+
await switchToSignature(page);
503+
await page.click("#editorSignatureAddSignature");
504+
505+
await page.waitForSelector("#addSignatureDialog", {
506+
visible: true,
507+
});
508+
await page.type("#addSignatureTypeInput", "Should be black.");
509+
await page.waitForSelector(`${addButtonSelector}:not(:disabled)`);
510+
await page.click("#addSignatureAddButton");
511+
512+
const editorSelector = getEditorSelector(0);
513+
await page.waitForSelector(editorSelector, { visible: true });
514+
await page.waitForSelector(
515+
`.canvasWrapper > svg use[href="#path_p1_0"]`,
516+
{ visible: true }
517+
);
518+
519+
const color = await page.evaluate(() => {
520+
const use = document.querySelector(
521+
`.canvasWrapper > svg use[href="#path_p1_0"]`
522+
);
523+
return use.parentNode.getAttribute("fill");
524+
});
525+
expect(color).toEqual("#000000");
526+
})
527+
);
528+
});
529+
});
530+
531+
describe("viewerCssTheme (dark)", () => {
532+
let pages;
533+
534+
beforeEach(async () => {
535+
pages = await loadAndWait(
536+
"empty.pdf",
537+
".annotationEditorLayer",
538+
null,
539+
null,
540+
{ viewerCssTheme: "2" }
541+
);
542+
});
543+
544+
afterEach(async () => {
545+
await closePages(pages);
546+
});
547+
548+
it("must check that the signature has the correct color with the dark theme", async () => {
549+
await Promise.all(
550+
pages.map(async ([_, page]) => {
551+
const colorTheme = await page.evaluate(() => {
552+
const html = document.querySelector("html");
553+
const style = getComputedStyle(html);
554+
return style.getPropertyValue("color-scheme");
555+
});
556+
expect(colorTheme).toEqual("dark");
557+
558+
await switchToSignature(page);
559+
await page.click("#editorSignatureAddSignature");
560+
561+
await page.waitForSelector("#addSignatureDialog", {
562+
visible: true,
563+
});
564+
await page.type("#addSignatureTypeInput", "Should be black.");
565+
await page.waitForSelector(`${addButtonSelector}:not(:disabled)`);
566+
await page.click("#addSignatureAddButton");
567+
568+
const editorSelector = getEditorSelector(0);
569+
await page.waitForSelector(editorSelector, { visible: true });
570+
await page.waitForSelector(
571+
`.canvasWrapper > svg use[href="#path_p1_0"]`,
572+
{ visible: true }
573+
);
574+
575+
const color = await page.evaluate(() => {
576+
const use = document.querySelector(
577+
`.canvasWrapper > svg use[href="#path_p1_0"]`
578+
);
579+
return use.parentNode.getAttribute("fill");
580+
});
581+
expect(color).toEqual("#000000");
582+
})
583+
);
584+
});
585+
});
474586
});

0 commit comments

Comments
 (0)