index.html

<!doctype html>
<html lang="en" data-theme="dark">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta
      name="description"
      content="OpenRadar is a map-first desktop weather radar with flat and globe navigation."
    />
    <meta name="theme-color" content="#070b10" />
    <!-- The app's own icon, at the two sizes a tab and a task switcher ask
         for. Without these the webview requests /favicon.ico on every launch
         and logs a 404, which is the first error in the console of a working
         build. Copied from the icons the installer already ships. -->
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon.png" />
    <link
      rel="icon"
      type="image/png"
      sizes="128x128"
      href="/openradar-128.png"
    />
    <title>OpenRadar</title>
    <script>
      // The theme, before anything is painted.
      //
      // `data-theme` above is the default, and the workspace only corrected it
      // once React had mounted and read the settings, so every cold start on
      // the light theme painted dark chrome over a near-black stage and then
      // flipped. That flash was the first thing a light-theme reader saw.
      //
      // Read from a mirror rather than from the settings themselves: on the
      // desktop the settings live in a Tauri store behind an async command,
      // which cannot be reached before first paint. `useAppearance` writes
      // this key every time it applies a theme, so it is right from the second
      // launch onwards and the first launch is the default anyway.
      //
      // Tauri hashes local inline scripts at compile time and appends the hash
      // to `script-src`, so this runs under the app's own CSP, which carries
      // no `unsafe-inline`.
      try {
        var held = localStorage.getItem("openradar.theme");
        if (held === "light" || held === "dark") {
          document.documentElement.dataset.theme = held;
          document
            .querySelector('meta[name="theme-color"]')
            .setAttribute("content", held === "light" ? "#e9eef4" : "#070b10");
        }
      } catch (ignored) {
        // A window with no storage at all keeps the default.
      }
    </script>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>