From b6b930ebb9e196e784f01a1d2ed42ca282021dda Mon Sep 17 00:00:00 2001
From: Jason <jasonzhu081207@gmail.com>
Date: Sun, 10 May 2026 22:29:39 +0800
Subject: [PATCH] feat: enhance splash screen with dynamic theme support and
 improved styling

---
 electron/main.ts   |  18 +-
 public/splash.html | 523 ++++++++++++++++++++++++++++-----------------
 2 files changed, 343 insertions(+), 198 deletions(-)

diff --git a/electron/main.ts b/electron/main.ts
index 1a6809a..e9bc512 100644
--- a/electron/main.ts
+++ b/electron/main.ts
@@ -1001,6 +1001,8 @@ function createAgreementWindow() {
  */
 function createSplashWindow(): BrowserWindow {
   const isDev = !!process.env.VITE_DEV_SERVER_URL
+  const splashThemeId = configService?.get('themeId') || 'cloud-dancer'
+  const splashThemeMode = configService?.get('theme') || 'system'
   const iconPath = isDev
     ? join(__dirname, '../public/icon.ico')
     : (process.platform === 'darwin' 
@@ -1008,8 +1010,8 @@ function createSplashWindow(): BrowserWindow {
         : join(process.resourcesPath, 'icon.ico'))
 
   splashWindow = new BrowserWindow({
-    width: 856,
-    height: 540,
+    width: 680,
+    height: 460,
     resizable: false,
     frame: false,
     transparent: true,
@@ -1027,9 +1029,17 @@ function createSplashWindow(): BrowserWindow {
   })
 
   if (isDev) {
-    splashWindow.loadURL(`${process.env.VITE_DEV_SERVER_URL}splash.html`)
+    const splashUrl = new URL('splash.html', process.env.VITE_DEV_SERVER_URL)
+    splashUrl.searchParams.set('themeId', splashThemeId)
+    splashUrl.searchParams.set('themeMode', splashThemeMode)
+    splashWindow.loadURL(splashUrl.toString())
   } else {
-    splashWindow.loadFile(join(__dirname, '../dist/splash.html'))
+    splashWindow.loadFile(join(__dirname, '../dist/splash.html'), {
+      query: {
+        themeId: splashThemeId,
+        themeMode: splashThemeMode
+      }
+    })
   }
 
   splashWindow.once('ready-to-show', () => {
diff --git a/public/splash.html b/public/splash.html
index 8295a56..aa32404 100644
--- a/public/splash.html
+++ b/public/splash.html
@@ -4,23 +4,65 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>WeFlow</title>
+  <script>
+    (function initSplashMode() {
+      var params = new URLSearchParams(window.location.search || "");
+      var mode = params.get("themeMode") || params.get("mode") || "system";
+      var themeId = params.get("themeId") || "cloud-dancer";
+      var mq = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)");
+      var resolved = mode === "dark" || (mode === "system" && mq && mq.matches) ? "dark" : "light";
+
+      document.documentElement.setAttribute("data-theme", themeId);
+      document.documentElement.setAttribute("data-theme-mode", mode);
+      document.documentElement.setAttribute("data-mode", resolved);
+    })();
+  </script>
   <style>
     :root {
-      --primary: #8b7355;
-      --primary-rgb: 139, 115, 85;
-      --on-primary: #ffffff;
-      --window-bg: transparent;
-      --card-bg: #ffffff;
-      --card-bg-solid: #ffffff;
-      --card-border: rgba(0, 0, 0, 0.06);
-      --text-primary: #171717;
-      --text-secondary: #6f6f6f;
-      --text-tertiary: #9a9a9a;
-      --track-bg: rgba(0, 0, 0, 0.06);
-      --logo-surface: #f4f4f5;
-      --card-gloss-start: rgba(255, 255, 255, 0.62);
-      --card-gloss-end: rgba(255, 255, 255, 0);
-      --shadow: none;
+      --surface-start: #ffffff;
+      --surface-end: #f8f9fc;
+      --surface-glass: rgba(255, 255, 255, 0.78);
+      --surface-glass-end: rgba(255, 255, 255, 0.52);
+      --accent: #5b6abf;
+      --accent-rgb: 91, 106, 191;
+      --accent-hot: #364491;
+      --logo-highlight: #5b6abf;
+      --ambient-glow: rgba(91, 106, 191, 0.08);
+      --core-glow: rgba(91, 106, 191, 0.16);
+      --text: #1a1b1e;
+      --text-muted: #5f6368;
+      --text-faint: #9aa0a6;
+      --border-subtle: rgba(0, 0, 0, 0.05);
+      --loader-track: rgba(0, 0, 0, 0.03);
+      --shadow-window:
+        0 24px 60px rgba(23, 27, 38, 0.10),
+        0 4px 12px rgba(23, 27, 38, 0.04),
+        inset 0 1px 0 rgba(255, 255, 255, 1);
+      --radius-window: 24px;
+      --ease-ambient: cubic-bezier(0.2, 0.8, 0.2, 1);
+      --font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
+    }
+
+    [data-mode="dark"] {
+      --surface-start: #14171d;
+      --surface-end: #0b0d10;
+      --surface-glass: rgba(255, 255, 255, 0.10);
+      --surface-glass-end: rgba(255, 255, 255, 0.02);
+      --accent: #7c8deb;
+      --accent-rgb: 124, 141, 235;
+      --accent-hot: #ffffff;
+      --logo-highlight: #ffffff;
+      --ambient-glow: rgba(124, 141, 235, 0.08);
+      --core-glow: rgba(124, 141, 235, 0.28);
+      --text: #f0f0f0;
+      --text-muted: #8b92a5;
+      --text-faint: #4e5569;
+      --border-subtle: rgba(255, 255, 255, 0.06);
+      --loader-track: rgba(255, 255, 255, 0.03);
+      --shadow-window:
+        0 24px 80px rgba(0, 0, 0, 0.60),
+        inset 0 1px 0 rgba(255, 255, 255, 0.05);
+      --radius-window: 20px;
     }
 
     * {
@@ -34,9 +76,9 @@
       width: 100%;
       height: 100%;
       overflow: hidden;
-      background: var(--window-bg);
-      color: var(--text-primary);
-      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
+      background: transparent;
+      color: var(--text);
+      font-family: var(--font);
       -webkit-font-smoothing: antialiased;
       user-select: none;
     }
@@ -48,100 +90,152 @@
     }
 
     .splash-shell {
-      width: 100%;
-      height: 100%;
-      min-width: 0;
-      min-height: 0;
+      width: 600px;
+      height: 380px;
+      max-width: calc(100vw - 64px);
+      max-height: calc(100vh - 64px);
       position: relative;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
       overflow: hidden;
-      border-radius: 18px;
-      border: none;
-      background:
-        linear-gradient(180deg, var(--card-gloss-start) 0%, var(--card-gloss-end) 48%),
-        var(--card-bg-solid);
-      box-shadow: var(--shadow);
+      border-radius: var(--radius-window);
+      border: 1px solid var(--border-subtle);
+      background: linear-gradient(145deg, var(--surface-start), var(--surface-end));
+      box-shadow: var(--shadow-window);
       isolation: isolate;
-      animation: shellIn 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
+      animation: windowAppear 800ms var(--ease-ambient) both;
     }
 
     .splash-shell::before {
       content: "";
       position: absolute;
-      inset: 0;
+      width: 200%;
+      height: 200%;
+      left: -50%;
+      top: -50%;
+      background: radial-gradient(circle at 50% 40%, var(--ambient-glow) 0%, transparent 44%);
       pointer-events: none;
-      background:
-        linear-gradient(90deg, transparent 0%, rgba(var(--primary-rgb), 0.035) 48%, transparent 100%),
-        linear-gradient(180deg, rgba(var(--primary-rgb), 0.045) 0%, transparent 32%);
-      opacity: 0.9;
       z-index: -1;
     }
 
     .brand-stage {
-      position: absolute;
-      inset: 0;
-      display: grid;
-      place-items: center;
-      padding-bottom: 42px;
-    }
-
-    .brand-lockup {
+      position: relative;
+      z-index: 2;
       display: flex;
       flex-direction: column;
       align-items: center;
+      margin-top: -20px;
       text-align: center;
-      animation: contentIn 460ms cubic-bezier(0.22, 1, 0.36, 1) 80ms both;
+      animation: contentIn 560ms var(--ease-ambient) 90ms both;
     }
 
-    .logo-tile {
-      width: 80px;
-      height: 80px;
+    .logo-core {
+      width: 64px;
+      height: 64px;
+      border-radius: 20px;
       display: grid;
       place-items: center;
-      border-radius: 16px;
-      background: var(--logo-surface);
-      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 10px 24px rgba(0, 0, 0, 0.04);
-      margin-bottom: 25px;
-      overflow: hidden;
+      margin-bottom: 24px;
+      background: linear-gradient(135deg, var(--surface-glass), var(--surface-glass-end));
+      border: 1px solid rgba(255, 255, 255, 0.18);
+      backdrop-filter: blur(12px) saturate(1.16);
+      -webkit-backdrop-filter: blur(12px) saturate(1.16);
+      animation: coreBreathe 3200ms ease-in-out infinite alternate;
     }
 
-    .logo {
-      width: 58px;
-      height: 58px;
-      object-fit: contain;
-      border-radius: 14px;
+    [data-mode="light"] .logo-core {
+      border-color: rgba(255, 255, 255, 0.82);
+    }
+
+    [data-mode="dark"] .logo-core {
+      border-color: rgba(255, 255, 255, 0.10);
+    }
+
+    .logo-mark {
+      width: 32px;
+      height: 32px;
+      color: var(--accent);
       display: block;
+      filter: drop-shadow(0 0 8px rgba(var(--accent-rgb), 0.18));
+    }
+
+    [data-mode="light"] .logo-mark .mark-base {
+      color: var(--text-faint);
+      opacity: 0.42;
+    }
+
+    [data-mode="dark"] .logo-mark .mark-base {
+      color: var(--accent);
+      opacity: 1;
     }
 
     .app-name {
-      font-size: 25px;
-      line-height: 1.2;
-      font-weight: 700;
-      letter-spacing: 0;
-      color: var(--text-primary);
-      margin-bottom: 10px;
+      font-size: 24px;
+      line-height: 1.18;
+      font-weight: 600;
+      letter-spacing: 0.02em;
+      color: var(--text);
+      margin-bottom: 6px;
+    }
+
+    [data-mode="dark"] .app-name {
+      text-shadow: 0 2px 10px rgba(0, 0, 0, 0.50);
     }
 
     .app-desc {
-      font-size: 14px;
+      font-size: 13px;
       line-height: 1.5;
+      font-weight: 500;
+      letter-spacing: 0.04em;
+      color: var(--text-muted);
+    }
+
+    [data-mode="dark"] .app-desc {
       font-weight: 400;
-      color: var(--text-secondary);
+      letter-spacing: 0.05em;
     }
 
     .status-row {
       position: absolute;
       left: 32px;
       right: 32px;
-      bottom: 26px;
+      bottom: 24px;
+      z-index: 2;
       display: flex;
-      align-items: center;
+      align-items: flex-end;
       justify-content: space-between;
-      gap: 20px;
-      color: var(--text-tertiary);
-      font-size: 12px;
+      gap: 18px;
+      color: var(--text-faint);
+      font-size: 11px;
       line-height: 1.4;
       font-variant-numeric: tabular-nums;
-      animation: contentIn 460ms cubic-bezier(0.22, 1, 0.36, 1) 160ms both;
+      animation: contentIn 560ms var(--ease-ambient) 170ms both;
+    }
+
+    .progress-text-wrap {
+      min-width: 0;
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      color: var(--text-muted);
+      font-weight: 500;
+    }
+
+    [data-mode="dark"] .progress-text-wrap {
+      color: var(--text-faint);
+      font-weight: 400;
+    }
+
+    .status-dot {
+      width: 4px;
+      height: 4px;
+      flex: 0 0 auto;
+      border-radius: 50%;
+      background: var(--accent);
+      box-shadow: 0 0 6px rgba(var(--accent-rgb), 0.42);
+      animation: dotPulse 1700ms ease-in-out infinite;
     }
 
     .progress-text {
@@ -149,13 +243,20 @@
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
+      letter-spacing: 0.02em;
     }
 
     .version {
       flex-shrink: 0;
+      color: var(--text-faint);
       font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
+      font-size: 10px;
       letter-spacing: 0;
-      opacity: 0.82;
+      opacity: 0.62;
+    }
+
+    [data-mode="dark"] .version {
+      opacity: 0.50;
     }
 
     .progress-track {
@@ -163,88 +264,147 @@
       left: 0;
       right: 0;
       bottom: 0;
-      height: 3px;
-      background: var(--track-bg);
+      z-index: 3;
+      height: 1.5px;
+      background: var(--loader-track);
       overflow: hidden;
     }
 
+    [data-mode="dark"] .progress-track {
+      height: 1px;
+    }
+
     .progress-fill {
+      position: absolute;
+      left: 0;
+      bottom: 0;
       width: 0%;
-      min-width: 0;
       height: 100%;
-      background: var(--primary);
+      min-width: 0;
       border-radius: 0 999px 999px 0;
-      box-shadow: 0 0 18px rgba(var(--primary-rgb), 0.34);
-      transition: width 440ms cubic-bezier(0.22, 1, 0.36, 1);
-      position: relative;
-      overflow: hidden;
+      background: linear-gradient(90deg, transparent 0%, var(--accent) 54%, var(--accent-hot) 100%);
+      box-shadow: 0 0 10px 1px rgba(var(--accent-rgb), 0.30);
+      transition:
+        width 680ms var(--ease-ambient),
+        opacity 260ms ease,
+        left 680ms var(--ease-ambient);
+    }
+
+    .progress-fill::before {
+      content: "";
+      position: absolute;
+      top: -7px;
+      right: -18px;
+      width: 44px;
+      height: 15px;
+      border-radius: 999px;
+      background: rgba(var(--accent-rgb), 0.34);
+      filter: blur(8px);
+      opacity: 0.65;
+      animation: leadingGlow 1800ms ease-in-out infinite;
     }
 
     .progress-fill::after {
       content: "";
       position: absolute;
-      inset: 0;
-      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.42), transparent);
+      inset: -1px 0;
+      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.54), transparent);
       opacity: 0;
       transform: translateX(-100%);
-      animation: sweep 1200ms ease-out;
+      animation: spectralGlide 1500ms ease-out infinite;
+      animation-delay: 180ms;
     }
 
-    .progress-fill.waiting::before {
-      content: "";
-      position: absolute;
-      top: -4px;
-      right: -10px;
-      width: 22px;
-      height: 11px;
+    .progress-fill.waiting {
       border-radius: 999px;
-      background: rgba(var(--primary-rgb), 0.7);
-      filter: blur(5px);
-      animation: waitingPulse 1300ms ease-in-out infinite;
+      transition: none;
+      animation: beamSweep 2500ms var(--ease-ambient) infinite;
     }
 
     @media (prefers-reduced-motion: reduce) {
       .splash-shell,
-      .brand-lockup,
+      .brand-stage,
       .status-row,
+      .logo-core,
+      .status-dot,
       .progress-fill,
-      .progress-fill::after,
-      .progress-fill.waiting::before {
+      .progress-fill::before,
+      .progress-fill::after {
         animation: none !important;
         transition: none !important;
       }
+
+      .progress-fill.waiting {
+        left: 0 !important;
+        width: 70% !important;
+      }
     }
 
-    @keyframes shellIn {
-      from {
+    @keyframes windowAppear {
+      0% {
         opacity: 0;
-        transform: translateY(8px) scale(0.985);
+        transform: scale(0.97) translateY(12px);
       }
-      to {
+      100% {
         opacity: 1;
-        transform: translateY(0) scale(1);
+        transform: scale(1) translateY(0);
       }
     }
 
     @keyframes contentIn {
-      from {
+      0% {
         opacity: 0;
         transform: translateY(8px);
       }
-      to {
+      100% {
         opacity: 1;
         transform: translateY(0);
       }
     }
 
-    @keyframes sweep {
+    @keyframes coreBreathe {
+      0% {
+        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03), 0 0 0 1px rgba(var(--accent-rgb), 0.08);
+        transform: translateY(0);
+      }
+      100% {
+        box-shadow: 0 8px 30px var(--core-glow), 0 0 0 1px rgba(var(--accent-rgb), 0.20);
+        transform: translateY(-3px);
+      }
+    }
+
+    @keyframes dotPulse {
+      0%,
+      100% {
+        opacity: 0.38;
+        transform: scale(0.84);
+      }
+      50% {
+        opacity: 1;
+        transform: scale(1.18);
+      }
+    }
+
+    @keyframes leadingGlow {
+      0%,
+      100% {
+        opacity: 0.38;
+        transform: scaleX(0.78);
+      }
+      50% {
+        opacity: 0.86;
+        transform: scaleX(1.28);
+      }
+    }
+
+    @keyframes spectralGlide {
       0% {
         opacity: 0;
         transform: translateX(-100%);
       }
-      20%,
-      70% {
-        opacity: 1;
+      22%,
+      66% {
+        opacity: 0.58;
       }
       100% {
         opacity: 0;
@@ -252,33 +412,41 @@
       }
     }
 
-    @keyframes waitingPulse {
-      0%,
-      100% {
-        opacity: 0.32;
-        transform: scaleX(0.8);
+    @keyframes beamSweep {
+      0% {
+        left: -30%;
+        width: 0%;
       }
       50% {
-        opacity: 0.92;
-        transform: scaleX(1.45);
+        left: 30%;
+        width: 40%;
+      }
+      100% {
+        left: 100%;
+        width: 10%;
       }
     }
   </style>
 </head>
 <body>
   <main class="splash-shell" id="splash" role="status" aria-live="polite">
-    <section class="brand-stage">
-      <div class="brand-lockup">
-        <div class="logo-tile" aria-hidden="true">
-          <img class="logo" src="./logo.png" alt="">
-        </div>
-        <h1 class="app-name">WeFlow</h1>
-        <p class="app-desc">&#24494;&#20449;&#32842;&#22825;&#35760;&#24405;&#31649;&#29702;&#24037;&#20855;</p>
+    <section class="brand-stage" aria-label="WeFlow">
+      <div class="logo-core" aria-hidden="true">
+        <svg class="logo-mark" viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+          <path class="mark-base" d="M10 24C10 24 14 34 18 34C22 34 24 20 28 20C32 20 38 30 38 30" />
+          <path d="M28 20C32 20 38 30 38 30" stroke="var(--logo-highlight)" opacity="0.82" />
+        </svg>
       </div>
+
+      <h1 class="app-name">WeFlow</h1>
+      <p class="app-desc">&#24494;&#20449;&#32842;&#22825;&#35760;&#24405;&#31649;&#29702;&#24037;&#20855;</p>
     </section>
 
     <div class="status-row">
-      <div class="progress-text" id="progressText">&#27491;&#22312;&#21551;&#21160;...</div>
+      <div class="progress-text-wrap">
+        <div class="status-dot" aria-hidden="true"></div>
+        <div class="progress-text" id="progressText">&#27491;&#22312;&#39044;&#21152;&#36733;&#20250;&#35805;&#36923;&#36753;...</div>
+      </div>
       <div class="version" id="versionText"></div>
     </div>
 
@@ -288,82 +456,45 @@
   </main>
 
   <script>
-    var themePalettes = {
-      "cloud-dancer": {
-        light: { primary: "#8B7355", rgb: "139, 115, 85", onPrimary: "#ffffff" },
-        dark: { primary: "#C9A86C", rgb: "201, 168, 108", onPrimary: "#111111" }
-      },
-      "blossom-dream": {
-        light: { primary: "#D4849A", rgb: "212, 132, 154", onPrimary: "#ffffff" },
-        dark: { primary: "#D19EBB", rgb: "209, 158, 187", onPrimary: "#111111" }
-      },
-      "corundum-blue": {
-        light: { primary: "#4A6670", rgb: "74, 102, 112", onPrimary: "#ffffff" },
-        dark: { primary: "#6A9AAA", rgb: "106, 154, 170", onPrimary: "#111111" }
-      },
-      "kiwi-green": {
-        light: { primary: "#7A9A5C", rgb: "122, 154, 92", onPrimary: "#ffffff" },
-        dark: { primary: "#9ABA7C", rgb: "154, 186, 124", onPrimary: "#111111" }
-      },
-      "spicy-red": {
-        light: { primary: "#8B4049", rgb: "139, 64, 73", onPrimary: "#ffffff" },
-        dark: { primary: "#C06068", rgb: "192, 96, 104", onPrimary: "#ffffff" }
-      },
-      "teal-water": {
-        light: { primary: "#5A8A8A", rgb: "90, 138, 138", onPrimary: "#ffffff" },
-        dark: { primary: "#7ABAAA", rgb: "122, 186, 170", onPrimary: "#111111" }
-      },
-      "geist": {
-        light: { primary: "#444444", rgb: "68, 68, 68", onPrimary: "#ffffff" },
-        dark: { primary: "#ededed", rgb: "237, 237, 237", onPrimary: "#111111" }
-      }
-    };
-
-    function setVar(name, value) {
-      document.documentElement.style.setProperty(name, value);
-    }
+    var themeModeQuery = null;
+    var systemModeQuery = null;
 
     function resolveMode(mode) {
       if (mode === "dark" || mode === "light") return mode;
       return window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
     }
 
-    function applyTheme(themeId, mode) {
-      var palette = themePalettes[themeId] || themePalettes["cloud-dancer"];
-      var resolvedMode = resolveMode(mode);
-      var accent = palette[resolvedMode] || palette.light;
-      var isDark = resolvedMode === "dark";
+    function syncSystemModeListener(mode) {
+      if (!window.matchMedia) return;
+      var nextQuery = window.matchMedia("(prefers-color-scheme: dark)");
 
-      setVar("--primary", accent.primary);
-      setVar("--primary-rgb", accent.rgb);
-      setVar("--on-primary", accent.onPrimary);
-      setVar("--window-bg", "transparent");
-
-      if (isDark) {
-        setVar("--card-bg", "#1f1f1f");
-        setVar("--card-bg-solid", "#1f1f1f");
-        setVar("--card-border", "rgba(255, 255, 255, 0.08)");
-        setVar("--text-primary", "#f1f1f1");
-        setVar("--text-secondary", "#b8b8b8");
-        setVar("--text-tertiary", "#858585");
-        setVar("--track-bg", "rgba(255, 255, 255, 0.09)");
-        setVar("--logo-surface", "#2b2b2b");
-        setVar("--card-gloss-start", "rgba(255, 255, 255, 0.035)");
-        setVar("--card-gloss-end", "rgba(255, 255, 255, 0)");
-        setVar("--shadow", "none");
-      } else {
-        setVar("--card-bg", "#ffffff");
-        setVar("--card-bg-solid", "#ffffff");
-        setVar("--card-border", "rgba(0, 0, 0, 0.06)");
-        setVar("--text-primary", "#171717");
-        setVar("--text-secondary", "#6f6f6f");
-        setVar("--text-tertiary", "#9a9a9a");
-        setVar("--track-bg", "rgba(0, 0, 0, 0.06)");
-        setVar("--logo-surface", "#f4f4f5");
-        setVar("--card-gloss-start", "rgba(255, 255, 255, 0.62)");
-        setVar("--card-gloss-end", "rgba(255, 255, 255, 0)");
-        setVar("--shadow", "none");
+      if (systemModeQuery && systemModeQuery !== nextQuery && systemModeQuery.removeEventListener) {
+        systemModeQuery.removeEventListener("change", handleSystemModeChange);
       }
+
+      systemModeQuery = nextQuery;
+      themeModeQuery = mode;
+
+      if (mode === "system" && nextQuery.addEventListener) {
+        nextQuery.addEventListener("change", handleSystemModeChange);
+      }
+    }
+
+    function handleSystemModeChange() {
+      if (themeModeQuery === "system") {
+        document.documentElement.setAttribute("data-mode", resolveMode("system"));
+      }
+    }
+
+    function applyTheme(themeId, mode) {
+      var safeThemeId = String(themeId || "cloud-dancer");
+      var safeMode = mode === "light" || mode === "dark" || mode === "system" ? mode : "system";
+      var resolvedMode = resolveMode(safeMode);
+
+      document.documentElement.setAttribute("data-theme", safeThemeId);
+      document.documentElement.setAttribute("data-theme-mode", safeMode);
+      document.documentElement.setAttribute("data-mode", resolvedMode);
+      syncSystemModeListener(safeMode);
     }
 
     function updateProgress(percent, text, waiting) {
@@ -372,14 +503,14 @@
       var safePercent = Math.max(0, Math.min(100, Number(percent) || 0));
 
       if (fill) {
-        fill.style.width = safePercent + "%";
         if (waiting) {
           fill.classList.add("waiting");
+          fill.style.left = "";
+          fill.style.width = "";
         } else {
           fill.classList.remove("waiting");
-          fill.style.animation = "none";
-          fill.offsetHeight;
-          fill.style.animation = "";
+          fill.style.left = "0";
+          fill.style.width = safePercent + "%";
         }
       }
 
@@ -393,7 +524,11 @@
       el.textContent = text ? "v" + text.replace(/^v/i, "") : "";
     }
 
-    applyTheme("cloud-dancer", "light");
+    (function bootstrapSplash() {
+      var params = new URLSearchParams(window.location.search || "");
+      applyTheme(params.get("themeId") || "cloud-dancer", params.get("themeMode") || "system");
+      updateProgress(0, "", false);
+    })();
   </script>
 </body>
 </html>