WaveFlow/index.html at main · InstaZDLL/WaveFlow · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>WaveFlow</title>
  </head>

  <body>
    <!--
      Theme bootstrap — paints the right mode (dark class + data-theme +
      ambient background) before React mounts so a fresh boot doesn't
      flash white when the default theme is dark. Keeps it minimal: only
      the dark class + ambient color need to be right on the first paint;
      the full accent palette is hydrated by `ThemeProvider`'s effect a
      few ms later, which is invisible against an already-correct bg.
      Mirrors `themes.ts` — `LIGHT_IDS` lists every light preset (6),
      everything else is dark (8). Keep the two tables in sync if a
      preset is added / removed.
    -->
    <script>
      (function () {
        try {
          var id =
            localStorage.getItem("waveflow.theme.id") ||
            (localStorage.getItem("waveflow.theme.is_dark") === "false"
              ? "default"
              : "default-dark");
          var LIGHT_IDS = {
            default: 1,
            "midnight-light": 1,
            "sunset-light": 1,
            "lavender-light": 1,
            "crimson-light": 1,
            "ocean-light": 1,
          };
          var ambient =
            {
              default: "#ffffff",
              "midnight-light": "#e0e7ff",
              "sunset-light": "#fef3c7",
              "lavender-light": "#ede9fe",
              "crimson-light": "#ffe4e6",
              "ocean-light": "#e0f2fe",
              "default-dark": "#121212",
              oled: "#000000",
              midnight: "#0b1020",
              sunset: "#1a0e08",
              lavender: "#15101e",
              crimson: "#19090c",
              ocean: "#081420",
              neon: "#1a0a18",
            }[id] || "#121212";
          var root = document.documentElement;
          root.setAttribute("data-theme", id);
          root.style.setProperty("--ambient-bg", ambient);
          if (!LIGHT_IDS[id]) root.classList.add("dark");
        } catch (_) {
          // localStorage unavailable — fall through to :root defaults.
        }
      })();
    </script>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>