feat: add full @property declarations and fix theme system

- 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
2026-05-25 13:14:30 -04:00
parent aa69c0ecc4
commit ee31b88612
3 changed files with 155 additions and 24 deletions
--- a/web/src/entry-server.tsx
+++ b/web/src/entry-server.tsx
@@ -9,6 +9,9 @@ export default createHandler(() => (
          <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>