[5.x] PDF.js CSS bundled without scoping sets color-scheme: light dark on :root, breaking light mode form elements #14138
Description
Bug description
Since v5.73.x, the compiled app.js CSS bundle has grown from ~8 KB to ~226 KB.
It now includes the full PDF.js stylesheet unscoped, which sets the following rule globally:
:root {
color-scheme: light dark;
}Because color-scheme: light dark on :root instructs the browser to render native
form elements (inputs, selects, textareas) according to the OS color scheme, inputs
without an explicit background-color will appear dark when the OS is in dark mode —
even if the Statamic CP is explicitly set to light mode.
How to reproduce
- Set your OS to dark mode
- Set the Statamic CP to light mode (not auto)
- Open the Control Panel
- Observe the Global Search input (.global-search .search-input) — it renders with a dark background despite the CP being in light mode
The .search-input element has no explicit background-color in light mode (only dark:bg-dark-600 via Tailwind). With color-scheme: light dark applied to :root by the PDF.js CSS, the browser applies OS-native dark styling to the input, overriding the expected appearance.
Old bundle (app-443191f7.css): ~7.6 KB — no color-scheme declaration
New bundle (app-002af9bf.css): ~225.9 KB — includes PDF.js CSS with unscoped :root { color-scheme: light dark }
Expected Behavior
The PDF.js CSS should be scoped to its own container element (e.g. .pdf-viewer or similar) and must not affect :root or any global scope outside the viewer.
Workaround
Adding the following to a custom CP CSS file resolves the issue:
html:not(.dark) {
color-scheme: light;
}Logs
Environment
- Statamic: v5.73.11
- PHP: 8.2
- Browser: Chromium-based / Firefox (any browser that respects color-scheme)
- OS: macOS / Windows with dark mode enabled, Statamic CP set to light modeInstallation
Existing Laravel app
Additional details
No response