refactor(theme): remove localStorage, use only Nostr for persistence

- Remove localStorage.setItem/getItem from theme.ts
- Simplify early boot script to just default to system theme
- Theme now loads purely from NIP-78 settings
- Prevents race conditions between localStorage and Nostr settings
This commit is contained in:
Gigi
2025-10-14 09:34:54 +02:00
parent 65051c9c1f
commit 69febf4356
2 changed files with 3 additions and 35 deletions

View File

@@ -26,21 +26,9 @@
<meta name="twitter:title" content="Boris - Nostr Bookmarks" />
<meta name="twitter:description" content="Your reading list for the Nostr world. A minimal nostr client for bookmark management with highlights." />
<!-- Early theme application to prevent FOUC -->
<!-- Default to system theme until settings load from Nostr -->
<script>
(function() {
try {
var theme = localStorage.getItem('theme') || 'system';
if (theme === 'system') {
var systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
document.documentElement.className = 'theme-system';
} else {
document.documentElement.className = 'theme-' + theme;
}
} catch (e) {
document.documentElement.className = 'theme-system';
}
})();
document.documentElement.className = 'theme-system';
</script>
</head>
<body>

View File

@@ -32,33 +32,13 @@ export function applyTheme(theme: Theme): void {
// Listen for system theme changes
mediaQueryListener = (e: MediaQueryListEvent) => {
console.log('🎨 System theme changed to:', e.matches ? 'dark' : 'light')
// The CSS media query handles the color changes
// We just need to update localStorage for no-FOUC on next load
localStorage.setItem('theme-system-current', e.matches ? 'dark' : 'light')
// The CSS media query handles the color changes automatically
}
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', mediaQueryListener)
// Store current system theme for no-FOUC on next boot
localStorage.setItem('theme-system-current', getSystemTheme())
} else {
root.classList.add(`theme-${theme}`)
}
// Persist to localStorage for early boot application
localStorage.setItem('theme', theme)
console.log('🎨 Applied theme:', theme)
}
/**
* Get the current theme from localStorage or default to 'system'
*/
export function getStoredTheme(): Theme {
const stored = localStorage.getItem('theme')
if (stored === 'dark' || stored === 'light' || stored === 'system') {
return stored
}
return 'system'
}