Skip to content

Respect explicit light theme - #58

Merged
alekswebnet merged 1 commit into
missing-elements:masterfrom
nvi9:fixed-light-theme
Oct 19, 2026
Merged

alekswebnet merged 1 commit into
missing-elements:masterfrom
nvi9:fixed-light-theme

Conversation

@nvi9

@nvi9 nvi9 commented Oct 19, 2026

Copy link
Copy Markdown
Contributor

Summary

When viewer-css-theme="LIGHT" is set, Paper & Ink’s dark media rules still apply whenever the system preferred dark. Wrapped both dark sections in a shared CSS guard so explicit LIGHT stays light.

viewer.css already uses CSS nesting, so this change should have limited additional impact on browser compatibility.

However, in older browsers without nesting support, AUTOMATIC or an unset viewer-css-theme previously followed the system theme and will now remain light. Explicit LIGHT and DARK modes still work. If this change is not acceptable, we can use flat selectors instead to preserve automatic theme switching in older browsers, though that would require changing a bit more CSS.

Validation

> pnpm test -- --run                                                                                                                             
$ pnpm sync:pdfjs && vitest -- --run
$ node scripts/sync-pdfjs-assets.mjs
[sync-pdfjs] Synced PDF.js assets for v6.4.299 (legacy build)

 DEV  v5.0.4 ./pdfjs-viewer

 ✓  firefox  tests/basic.test.ts (15 tests) 5155ms
   ✓ Basic tests (15)
     ✓ should render the PDF file 1519ms
     ✓ should not render PDF with wrong url 274ms
     ✓ should open the external file with base64 source 289ms
     ✓ should load the dark theme 256ms
     ✓ should keep LIGHT fixed while automatic mode follows the system theme 260ms
     ✓ should hide the download button 218ms
     ✓ should add a title attribute to the iframe 234ms
     ✓ should apply hash-related attributes at runtime 235ms
     ✓ should apply worker-src option at runtime 249ms
     ✓ should include external worker origin in CSP script and worker directives 252ms
     ✓ should load runtime files from assets-base 473ms
     ✓ should prefer worker-src over assets-base and fall back to it on remove 150ms
     ✓ should use built-in worker by default 261ms
     ✓ should apply extended option attributes at runtime and restore defaults on remove 249ms
     ✓ should open a new document when src changes at runtime 229ms

 Test Files  1 passed (1)
      Tests  15 passed (15)
   Start at  11:55:03
   Duration  12.51s (tests 54%, worker 46%)

 PASS  Waiting for file changes...
       press h to show help, press q to quit

Checklist

  • The change is focused and includes tests for behavior changes.
  • Relevant tests and the build pass locally.
  • Public API, behavior, or user-guidance documentation is updated where needed.
  • Accessibility impact has been considered, including keyboard navigation and focus visibility.
  • This pull request does not disclose a security vulnerability.

Guard system dark styles when the viewer explicitly uses LIGHT.
Add regression coverage for LIGHT, DARK, AUTOMATIC, and unset modes.
@alekswebnet
alekswebnet merged commit f86b525 into missing-elements:master Oct 19, 2026
5 checks passed
alekswebnet added a commit that referenced this pull request Oct 19, 2026
Follow-ups from the review of #58:

- The theme matched forced palettes by substring tests on the inline
  style attribute, which depend on serialization and misfire on values
  like `color-scheme: light dark`. The element now sets
  html[data-color-scheme="light|dark"] and the theme matches it exactly.
- Apply the theme before PDF.js initializes, so a forced palette is in
  place at first paint.
- Keep --hover-filter and --button-disabled-opacity in step with the
  chosen theme instead of viewer.css's system-scheme switch.
- Add the missing --sidebar-box-shadow to the neutral forced-dark block.
- Document that LIGHT and DARK override the system color scheme.
- Test: check data-color-scheme and --hover-filter per mode.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
@alekswebnet

Copy link
Copy Markdown
Collaborator

Released in v4.3.0.

Thanks @nvi9, both for the fix and for the test that toggles the media rules directly instead of depending on the host's theme. That made it straightforward to build on in #60, where the guards now match a data-color-scheme attribute the element sets, so the theme no longer depends on inline-style text at all.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants