mirrors/pocket-id
1
0
Fork 0
mirror of https://github.com/pocket-id/pocket-id.git synced 2026-02-04 15:04:43 +00:00
Code Activity

fix: Prevent blinding FOUC in dark mode (#1054)

Browse Source
This commit is contained in:
Mufeed Ali
2025-10-27 01:10:25 +05:30
committed by GitHub
parent c9308472a9
commit 8f98d8c0b4
3 changed files with 27 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
.gitignore vendored
View File

@@ -1,8 +1,12 @@
# JetBrains # JetBrains
**/.idea **/.idea
# Node
node_modules node_modules
# PNPM
.pnpm-store/
# Output # Output
.output .output
.vercel .vercel

29
backend/frontend/frontend_included.go
View File

@@ -32,10 +32,6 @@ func init() {
panic(fmt.Errorf("failed to read index.html: %w", iErr)) panic(fmt.Errorf("failed to read index.html: %w", iErr))
} }
// Get the position of the first <script> tag
idx := bytes.Index(index, []byte(scriptTag))
// Create writeIndexFn, which adds the CSP tag to the script tag if needed
writeIndexFn = func(w io.Writer, nonce string) (err error) { writeIndexFn = func(w io.Writer, nonce string) (err error) {
// If there's no nonce, write the index as-is // If there's no nonce, write the index as-is
if nonce == "" { if nonce == "" {
@@ -43,23 +39,16 @@ func init() {
return err return err
} }
// We have a nonce, so first write the index until the <script> tag // Add nonce to all <script> tags
// Then we write the modified script tag // We replace "<script" with `<script nonce="..."` everywhere it appears
// Finally, the rest of the index modified := bytes.ReplaceAll(
_, err = w.Write(index[0:idx]) index,
if err != nil { []byte(scriptTag),
return err []byte(`<script nonce="`+nonce+`">`),
} )
_, err = w.Write([]byte(`<script nonce="` + nonce + `">`))
if err != nil {
return err
}
_, err = w.Write(index[(idx + len(scriptTag)):])
if err != nil {
return err
}
return nil _, err = w.Write(modified)
return err
} }
} }

15
frontend/src/app.html
View File

@@ -6,7 +6,20 @@
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="robots" content="noindex" /> <meta name="robots" content="noindex" />
<link rel="manifest" href="/app.webmanifest" /> <link rel="manifest" href="/app.webmanifest" />
<link rel="apple-touch-icon" href="/img/static-logo-512.png"> <link rel="apple-touch-icon" href="/img/static-logo-512.png" />
<script>
try {
const mode = localStorage.getItem('mode-watcher-mode') || 'system';
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
const isDark = mode === 'dark' || (mode === 'system' && prefersDark);
document.documentElement.classList.toggle('dark', isDark);
document.documentElement.style.colorScheme = isDark ? 'dark' : 'light';
} catch (e) {
// Ignore errors
// Failing to set theme is not critical
}
</script>
%sveltekit.head% %sveltekit.head%
</head> </head>
<body data-sveltekit-preload-data="hover"> <body data-sveltekit-preload-data="hover">