Michael Freno
ee31b88612
- Add @property declarations for all 28 animatable color tokens ensuring smooth 500ms transitions between light/dark modes - Remove invalid @theme block from inside @media (prefers-color-scheme: dark) that was causing Tailwind v4 to use dark values as defaults - Add FOUC-prevention inline script in entry-server.tsx that applies theme class before first paint - Integrate useTheme() hook in app.tsx for meta theme-color updates and system preference change listener
25 lines
868 B
TypeScript
25 lines
868 B
TypeScript
// @refresh reload
|
|
import { createHandler, StartServer } from "@solidjs/start/server";
|
|
|
|
export default createHandler(() => (
|
|
<StartServer
|
|
document={({ assets, children, scripts }) => (
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<link rel="icon" href="/favicon.ico" />
|
|
<script
|
|
innerHTML={`(function(){var t=localStorage.getItem('shieldai-theme');if(t==='light')return;if(t==='dark'){document.documentElement.classList.add('dark');return}if(window.matchMedia('(prefers-color-scheme:dark)').matches)document.documentElement.classList.add('dark')})()`}
|
|
/>
|
|
{assets}
|
|
</head>
|
|
<body>
|
|
<div id="app">{children}</div>
|
|
{scripts}
|
|
</body>
|
|
</html>
|
|
)}
|
|
/>
|
|
));
|