Load the early theme script from a file so the CSP allows it
Production's Content-Security-Policy has no script-src, so it falls back to default-src 'self' and blocks inline scripts. The inline head script that applied the saved theme never ran on prod, leaving the page on the system theme while the selector showed the saved choice. Move it to resources/js/theme-init.js, built by esbuild alongside app.js into a minified, source-mapped file loaded as a blocking script in the head. ThemeSelector now also applies the saved colour scheme, so the page and buttons can't disagree. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
parent
5483712e29
commit
7dbf4a3311
1 changed files with 31 additions and 13 deletions
12
resources/js/theme-init.js
Normal file
12
resources/js/theme-init.js
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
/*
|
||||
* Apply a saved theme choice before first paint to avoid a flash of the system theme.
|
||||
* Loaded as a blocking external script (not inline) so it passes the site's CSP.
|
||||
*/
|
||||
try {
|
||||
const theme = localStorage.getItem('theme');
|
||||
if (theme === 'light' || theme === 'dark') {
|
||||
document.documentElement.style.setProperty('color-scheme', theme);
|
||||
}
|
||||
} catch {
|
||||
/* storage unavailable, fall back to the system theme */
|
||||
}
|
||||
Loading…
Reference in a new issue