Use the `light-dark` CSS function in the viewer (issue 17780) #19819

Snuffleupagus · 2025-04-16T10:51:55Z

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.

This patch reduces the size of the gulp mozcentral target by 5302 bytes.

Snuffleupagus · 2025-04-16T11:30:21Z

/botio integrationtest

moz-tools-bot · 2025-04-16T11:30:23Z

From: Bot.io (Linux m4)

Received

Command cmd_integrationtest from @Snuffleupagus received. Current queue size: 0

Live output at: http://54.241.84.105:8877/0ec1e5b6873b486/output.txt

moz-tools-bot · 2025-04-16T11:30:23Z

From: Bot.io (Windows)

Received

Command cmd_integrationtest from @Snuffleupagus received. Current queue size: 0

Live output at: http://54.193.163.58:8877/ff0cf034ced8020/output.txt

moz-tools-bot · 2025-04-16T11:43:02Z

From: Bot.io (Linux m4)

Success

Full output at http://54.241.84.105:8877/0ec1e5b6873b486/output.txt

Total script time: 12.64 mins

Integration Tests: Passed

moz-tools-bot · 2025-04-16T12:01:28Z

From: Bot.io (Windows)

Failed

Full output at http://54.193.163.58:8877/ff0cf034ced8020/output.txt

Total script time: 31.06 mins

Integration Tests: FAILED

calixteman

LGTM. Thank you.

calixteman

LGTM. Thank you.

moz-tools-bot · 2025-04-22T13:24:45Z

From: Bot.io (Linux m4)

Received

Command cmd_preview from @Snuffleupagus received. Current queue size: 0

Live output at: http://54.241.84.105:8877/c44e3ab003f2fad/output.txt

moz-tools-bot · 2025-04-22T13:25:37Z

From: Bot.io (Linux m4)

Success

Full output at http://54.241.84.105:8877/c44e3ab003f2fad/output.txt

Total script time: 0.86 mins

Published

Viewer: http://54.241.84.105:8877/c44e3ab003f2fad/web/viewer.html
Viewer (legacy): http://54.241.84.105:8877/c44e3ab003f2fad/legacy/web/viewer.html

Snuffleupagus · 2025-04-22T13:29:08Z

Unfortunately there's one remaining issue that I've not been able to understand, and much less fix. @calixteman Any ideas here?

The color-inputs, for the FreeText and Ink editors, are now affected by the global color-scheme setting which means that they look "wrong" and are initialized with an incorrect color (white) when the browser is set to dark mode.

I thought that adding a color-scheme: only light; override to the following block would fix that, but it doesn't seem to help.

pdf.js/web/viewer.css

Lines 1144 to 1149 in 213d51d

    
           .editorParamsColor { 
        
             width: 32px; 
        
             height: 32px; 
        
             flex: none; 
        
             padding: 0; 
        
           }

Please see the following screen-shots, from the latest preview, that show the lack of effect from the override.

Snuffleupagus · 2025-04-22T14:52:58Z

Oh, it seems that the initial color comes from

pdf.js/src/display/editor/editor.js

Lines 209 to 215 in 63e6566

    
           static get _defaultLineColor() { 
        
             return shadow( 
        
               this, 
        
               "_defaultLineColor", 
        
               this._colorManager.getHexCode("CanvasText") 
        
             ); 
        
           }

and

pdf.js/src/display/display_utils.js

Lines 562 to 572 in 63e6566

    
           function getColorValues(colors) { 
        
             const span = document.createElement("span"); 
        
             span.style.visibility = "hidden"; 
        
             document.body.append(span); 
        
             for (const name of colors.keys()) { 
        
               span.style.color = name; 
        
               const computedColor = window.getComputedStyle(span).color; 
        
               colors.set(name, getRGB(computedColor)); 
        
             } 
        
             span.remove(); 
        
           }

which (perhaps not unsurprisingly) is now affected by the color-scheme setting.

@calixteman Is the new behaviour perhaps then correct/expected here, or do we want to keep using a black default color and if so how best to implement that?

moz-tools-bot · 2025-04-22T16:39:22Z

From: Bot.io (Linux m4)

Received

Command cmd_preview from @Snuffleupagus received. Current queue size: 0

Live output at: http://54.241.84.105:8877/5f5382e3600a080/output.txt

moz-tools-bot · 2025-04-22T16:40:15Z

From: Bot.io (Linux m4)

Success

Full output at http://54.241.84.105:8877/5f5382e3600a080/output.txt

Total script time: 0.87 mins

Published

Viewer: http://54.241.84.105:8877/5f5382e3600a080/web/viewer.html
Viewer (legacy): http://54.241.84.105:8877/5f5382e3600a080/legacy/web/viewer.html

Snuffleupagus · 2025-04-22T16:45:25Z

The latest version of the patch keeps the old behaviour for these input-color elements, by updating the getColorValues helper function slightly.
As far as I understand that function is primarily intended for forced-colors: active mode, and setting a preferred color-scheme there does not (in my testing) affect that mode.

src/display/display_utils.js

calixteman

The color of an added signature in dark mode is not correct:
https://github.com/mozilla/pdf.js/blob/master/src/display/editor/signature.js#L29-L46
We should probably use AnnotationEditor._defaultLineColor instead of CanvasText.

Snuffleupagus · 2025-04-23T08:38:23Z

The color of an added signature in dark mode is not correct:
https://github.com/mozilla/pdf.js/blob/master/src/display/editor/signature.js#L29-L46
We should probably use AnnotationEditor._defaultLineColor instead of CanvasText.

That seemed to work, thank you.

/botio-linux preview

moz-tools-bot · 2025-04-23T08:38:58Z

From: Bot.io (Linux m4)

Received

Command cmd_preview from @Snuffleupagus received. Current queue size: 1

Live output at: http://54.241.84.105:8877/8c374cd3dea6e56/output.txt

moz-tools-bot · 2025-04-23T08:53:38Z

From: Bot.io (Linux m4)

Success

Full output at http://54.241.84.105:8877/8c374cd3dea6e56/output.txt

Total script time: 0.94 mins

Published

Viewer: http://54.241.84.105:8877/8c374cd3dea6e56/web/viewer.html
Viewer (legacy): http://54.241.84.105:8877/8c374cd3dea6e56/legacy/web/viewer.html

calixteman · 2025-04-23T12:41:02Z

Would it be possible to add an integration test in order to test that the color of an added signature is correct whatever the mode is ?

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).

calixteman

LGTM. Thank you.

Snuffleupagus · 2025-04-23T13:36:05Z

Would it be possible to add an integration test in order to test that the color of an added signature is correct whatever the mode is ?

That should be possible, and I've done my best to add a couple of new tests for this (however I'm not great at writing integration-tests).

/botio integrationtest

moz-tools-bot · 2025-04-23T13:36:09Z

From: Bot.io (Linux m4)

Received

Command cmd_integrationtest from @Snuffleupagus received. Current queue size: 1

Live output at: http://54.241.84.105:8877/acd26b2ea58cc34/output.txt

moz-tools-bot · 2025-04-23T13:36:09Z

From: Bot.io (Windows)

Received

Command cmd_integrationtest from @Snuffleupagus received. Current queue size: 1

Live output at: http://54.193.163.58:8877/77105792e03b5f4/output.txt

moz-tools-bot · 2025-04-23T13:53:51Z

From: Bot.io (Linux m4)

Failed

Full output at http://54.241.84.105:8877/acd26b2ea58cc34/output.txt

Total script time: 13.76 mins

Integration Tests: FAILED

moz-tools-bot · 2025-04-23T14:28:52Z

From: Bot.io (Windows)

Failed

Full output at http://54.193.163.58:8877/77105792e03b5f4/output.txt

Total script time: 30.57 mins

Integration Tests: FAILED

Snuffleupagus added the viewer label Apr 16, 2025

Snuffleupagus linked an issue Apr 16, 2025 that may be closed by this pull request

Use light-dark css function #17780

Closed

Snuffleupagus force-pushed the CSS-light-dark branch 4 times, most recently from 89da7be to fa29abc Compare April 16, 2025 11:24

Snuffleupagus marked this pull request as ready for review April 16, 2025 11:24

Snuffleupagus requested a review from calixteman April 16, 2025 11:28

Snuffleupagus force-pushed the CSS-light-dark branch from fa29abc to 6244144 Compare April 18, 2025 12:36

mozilla deleted a comment from moz-tools-bot Apr 18, 2025

Snuffleupagus marked this pull request as draft April 18, 2025 12:46

calixteman approved these changes Apr 22, 2025

View reviewed changes

Snuffleupagus force-pushed the CSS-light-dark branch from 6244144 to 3963cb2 Compare April 22, 2025 13:24

mozilla deleted a comment from moz-tools-bot Apr 22, 2025

Snuffleupagus force-pushed the CSS-light-dark branch from 3963cb2 to 46c3a27 Compare April 22, 2025 16:36

Snuffleupagus requested a review from calixteman April 22, 2025 16:41

Snuffleupagus marked this pull request as ready for review April 22, 2025 16:41

calixteman reviewed Apr 23, 2025

View reviewed changes

src/display/display_utils.js Outdated Show resolved Hide resolved

Snuffleupagus force-pushed the CSS-light-dark branch from 46c3a27 to cf56e53 Compare April 23, 2025 08:24

calixteman requested changes Apr 23, 2025

View reviewed changes

Snuffleupagus force-pushed the CSS-light-dark branch 2 times, most recently from 3e48440 to b03cd96 Compare April 23, 2025 08:36

Snuffleupagus requested a review from calixteman April 23, 2025 09:18

Snuffleupagus force-pushed the CSS-light-dark branch from b03cd96 to ae1cbc6 Compare April 23, 2025 13:31

calixteman approved these changes Apr 23, 2025

View reviewed changes

Snuffleupagus merged commit 01c1c6e into mozilla:master Apr 23, 2025
9 checks passed

Snuffleupagus deleted the CSS-light-dark branch April 23, 2025 14:30

timvandermeij mentioned this pull request Apr 26, 2025

[Bug]: Annotation title text is hardly readable in dark theme #19871

Closed

Snuffleupagus mentioned this pull request Apr 26, 2025

Always render the Annotation- and XFA-layers with light color-scheme (issue 19871) #19874

Merged

Use the light-dark CSS function in the viewer (issue 17780) #19819

Use the light-dark CSS function in the viewer (issue 17780) #19819

Uh oh!

Conversation

Snuffleupagus commented Apr 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Snuffleupagus commented Apr 16, 2025

Uh oh!

moz-tools-bot commented Apr 16, 2025

From: Bot.io (Linux m4)

Received

Uh oh!

moz-tools-bot commented Apr 16, 2025

From: Bot.io (Windows)

Received

Uh oh!

moz-tools-bot commented Apr 16, 2025

From: Bot.io (Linux m4)

Success

Uh oh!

moz-tools-bot commented Apr 16, 2025

From: Bot.io (Windows)

Failed

Uh oh!

calixteman left a comment

Choose a reason for hiding this comment

Uh oh!

calixteman left a comment

Choose a reason for hiding this comment

Uh oh!

moz-tools-bot commented Apr 22, 2025

From: Bot.io (Linux m4)

Received

Uh oh!

moz-tools-bot commented Apr 22, 2025

From: Bot.io (Linux m4)

Success

Published

Uh oh!

Snuffleupagus commented Apr 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Snuffleupagus commented Apr 22, 2025

Uh oh!

moz-tools-bot commented Apr 22, 2025

From: Bot.io (Linux m4)

Received

Uh oh!

moz-tools-bot commented Apr 22, 2025

From: Bot.io (Linux m4)

Success

Published

Uh oh!

Snuffleupagus commented Apr 22, 2025

Uh oh!

Uh oh!

calixteman left a comment

Choose a reason for hiding this comment

Uh oh!

Snuffleupagus commented Apr 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

moz-tools-bot commented Apr 23, 2025

From: Bot.io (Linux m4)

Received

Uh oh!

moz-tools-bot commented Apr 23, 2025

From: Bot.io (Linux m4)

Success

Published

Uh oh!

calixteman commented Apr 23, 2025

Uh oh!

calixteman left a comment

Choose a reason for hiding this comment

Uh oh!

Snuffleupagus commented Apr 23, 2025

Uh oh!

moz-tools-bot commented Apr 23, 2025

Use the `light-dark` CSS function in the viewer (issue 17780) #19819

Use the `light-dark` CSS function in the viewer (issue 17780) #19819

Snuffleupagus commented Apr 16, 2025 •

edited

Loading

Snuffleupagus commented Apr 22, 2025 •

edited

Loading

Snuffleupagus commented Apr 23, 2025 •

edited

Loading