fix(ui): prevent light flash on dark startup (#5637)

* fix(ui): prevent light flash on dark startup

* fix(window): apply initial dark/light theme to prevent white flash

* refactor(boot): optimize config fetch and theme fallback

* fix: system theme detection

* fix(window): remove black flash before loader by aligning initial paint with theme

src/index.html

@@ -9,8 +9,93 @@
     />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Clash Verge</title>
+    <style>
+      :root {
+        --initial-bg: #f5f5f5;
+        --initial-text: #333;
+        --initial-spinner-track: #e3e3e3;
+        --initial-spinner-top: #3498db;
+        --bg-color: var(--initial-bg);
+        --text-color: var(--initial-text);
+        --spinner-track: var(--initial-spinner-track);
+        --spinner-top: var(--initial-spinner-top);
+        color-scheme: light;
+      }
+
+      @media (prefers-color-scheme: dark) {
+        :root {
+          --initial-bg: #2e303d;
+          --initial-text: #ffffff;
+          --initial-spinner-track: #3a3a3a;
+          --initial-spinner-top: #0a84ff;
+          --bg-color: var(--initial-bg);
+          --text-color: var(--initial-text);
+          --spinner-track: var(--initial-spinner-track);
+          --spinner-top: var(--initial-spinner-top);
+          color-scheme: dark;
+        }
+      }
+
+      html,
+      body {
+        width: 100%;
+        height: 100%;
+        margin: 0;
+        background: var(--bg-color);
+        color: var(--text-color);
+      }
+
+      #root {
+        width: 100%;
+        height: 100%;
+      }
+
+      #initial-loading-overlay {
+        position: fixed;
+        inset: 0;
+        background: var(--bg-color);
+        color: var(--text-color);
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        z-index: 9999;
+        font-family:
+          -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+        transition: opacity 0.3s ease;
+      }
+
+      #initial-loading-overlay[data-hidden="true"] {
+        opacity: 0;
+        pointer-events: none;
+      }
+
+      .initial-spinner {
+        width: 40px;
+        height: 40px;
+        border: 3px solid var(--spinner-track);
+        border-top: 3px solid var(--spinner-top);
+        border-radius: 50%;
+        animation: initial-spin 1s linear infinite;
+      }
+
+      @keyframes initial-spin {
+        0% {
+          transform: rotate(0deg);
+        }
+        100% {
+          transform: rotate(360deg);
+        }
+      }
+    </style>
   </head>
   <body>
+    <div id="initial-loading-overlay">
+      <div class="initial-spinner"></div>
+      <div style="font-size: 14px; opacity: 0.7; margin-top: 20px">
+        Loading Clash Verge...
+      </div>
+    </div>
     <div id="root"></div>
     <script type="module" src="./main.tsx"></script>
   </body>