buzz/desktop/index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/buzz.svg?v=20260610" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
    <!--
      Boot background: the document must be painted before the app bundle (and
      its stylesheets) load so cold boot never flashes ahead of the loading
      gate. The window itself is also painted pre-document via `backgroundColor`
      in tauri.conf.json. The body paints its own themed background once the app
      CSS loads, so this never shows through after boot.

      The linked stylesheet (boot.css) applies the initial black background.
      Kept as a <link> rather than an inline <style> to avoid Tauri's nonce
      injection for style-src (see boot.css for the full rationale).

      The inline script below reads the cached theme background (same
      `buzz-theme-cache` entry ThemeProvider writes) and applies it synchronously
      so the boot color matches the themed loading gate — no black flash on light
      themes. On the first-ever launch (no cache yet) it seeds the light/dark
      class from the OS color scheme, matching the Buzz theme in System mode
      that ThemeProvider applies moments later — no wrong-scheme flash before
      it loads.
    -->
    <link rel="stylesheet" href="/boot.css" />
    <script>
      (() => {
        var cached, bg, parsed;
        try {
          cached = window.localStorage.getItem("buzz-theme-cache");
          if (!cached) {
            // No stored theme: the default is Buzz following the OS scheme,
            // so seed the matching class (and backdrop) now. Otherwise the
            // setup gate would paint the wrong scheme until ThemeProvider
            // loads asynchronously.
            if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
              document.documentElement.classList.add("dark");
            } else {
              document.documentElement.classList.add("light");
              document.documentElement.style.backgroundColor = "#fff";
            }
            return;
          }
          parsed = JSON.parse(cached);
          bg = parsed.vars["--background"];
          if (bg) document.documentElement.style.backgroundColor = `hsl(${bg})`;
          // Match the cached light/dark class so themed vars resolve correctly
          // before ThemeProvider mounts.
          document.documentElement.classList.add(parsed.isDark ? "dark" : "light");
        } catch {
          /* fall back to the black default above */
        }
      })();
    </script>
  </head>

  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>