frontend-modern/index.html

Rama main · réplica de lectura del repositorio original.

<!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>