starred/pocket-id-pocket-id-1
1
0
Fork 0
mirror of https://github.com/pocket-id/pocket-id.git synced 2025-12-06 05:13:01 +03:00
Code Issues 122 Packages Projects Releases 10 Wiki 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
**/.idea
# Node
node_modules
# PNPM
.pnpm-store/
# Output
.output
.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))
}
// 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) {
// If there's no nonce, write the index as-is
if nonce == "" {
@@ -43,23 +39,16 @@ func init() {
return err
}
// We have a nonce, so first write the index until the <script> tag
// Then we write the modified script tag
// Finally, the rest of the index
_, err = w.Write(index[0:idx])
if err != nil {
return err
}
_, err = w.Write([]byte(`<script nonce="` + nonce + `">`))
if err != nil {
return err
}
_, err = w.Write(index[(idx + len(scriptTag)):])
if err != nil {
return err
}
// Add nonce to all <script> tags
// We replace "<script" with `<script nonce="..."` everywhere it appears
modified := bytes.ReplaceAll(
index,
[]byte(scriptTag),
[]byte(`<script nonce="`+nonce+`">`),
)
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="robots" content="noindex" />
<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%
</head>
<body data-sveltekit-preload-data="hover">