Pulse/frontend-modern/index.html
2026-03-18 16:06:30 +00:00

56 lines
2.1 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
<meta name="theme-color" content="#000000" />
<link rel="icon" type="image/svg+xml" href="/logo.svg" />
<title>Pulse</title>
<!-- Inline critical styles to prevent flash of unstyled content -->
<style nonce="__CSP_NONCE__">
/* Apply theme immediately before any CSS loads */
html { background-color: #f3f4f6; } /* gray-100 */
html.dark { background-color: #111827; } /* gray-900 */
body { margin: 0; min-height: 100vh; }
#root { min-height: 100vh; }
/* Hide content until app is ready to prevent layout shift */
#root:empty {
display: flex;
align-items: center;
justify-content: center;
background-color: inherit;
}
</style>
<!-- Apply theme immediately from localStorage to prevent flash -->
<script nonce="__CSP_NONCE__">
(function() {
try {
var themePreference = localStorage.getItem('pulseThemePreference');
var legacyDarkMode = localStorage.getItem('darkMode');
var legacyBootstrapMode = localStorage.getItem('pulse_dark_mode');
var prefersDark;
if (themePreference === 'dark') {
prefersDark = true;
} else if (themePreference === 'light') {
prefersDark = false;
} else if (legacyDarkMode === 'true' || legacyDarkMode === 'false') {
prefersDark = legacyDarkMode === 'true';
} else if (legacyBootstrapMode === 'true' || legacyBootstrapMode === 'false') {
prefersDark = legacyBootstrapMode === 'true';
} else {
prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
}
document.documentElement.classList.toggle('dark', prefersDark);
} catch (e) {}
})();
</script>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script src="/src/index.tsx" type="module"></script>
</body>
</html>