dbx/apps/desktop/index.html at 800212892e81f689b64b666b7717001abe89f325 · t8y2/dbx · 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
67
68
69
70
<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/png" href="/favicon.png" />
    <link rel="stylesheet" href="/connection-dialog-legacy.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>DBX</title>
    <style>
      html,
      body,
      #root {
        background-color: rgb(255 255 255);
      }

      html.dark,
      html.dark body,
      html.dark #root {
        background-color: rgb(19 20 22);
      }

      /* This framework-independent fallback is painted while the detached WebView loads its Vue shell. */
      #root:empty {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100vh;
        font-family: system-ui, sans-serif;
        color: #888;
        font-size: 13px;
      }

      #root:empty::after {
        content: "Loading…";
      }
    </style>
    <script data-dbx-startup-theme>
      (() => {
        const root = document.documentElement;
        let mode = null;
        let cornerStyle = null;

        // localStorage can throw when WebView storage is unavailable; keep the existing light fallback.
        try {
          mode = localStorage.getItem("dbx-theme");
          cornerStyle = localStorage.getItem("dbx-corner-style");
        } catch {}

        const followsSystem = mode === "system" || mode === "soft-system";
        let dark = mode === "dark" || mode === "soft-dark";

        if (followsSystem) {
          try {
            dark = window.matchMedia("(prefers-color-scheme: dark)").matches;
          } catch {
            dark = false;
          }
        }

        root.classList.toggle("dark", dark);
        root.dataset.cornerStyle = cornerStyle === "none" || cornerStyle === "small" ? cornerStyle : "large";
        root.style.colorScheme = dark ? "dark" : "light";
      })();
    </script>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>