From 3d6781b463cf00806aef01028581c6836bfc8c5f Mon Sep 17 00:00:00 2001
From: Max <112043822+Maxaubert@users.noreply.github.com>
Date: Sun, 4 Oct 2026 04:08:56 +0200
Subject: [PATCH] fix(ui): setup uses the chosen theme (#359)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01KPUNAWcwghXdHCApcKKjSG
---
 src/version.h                  |  4 ++--
 ui/src/Onboarding.svelte       |  5 ++++-
 ui/src/controls/Preview.svelte |  2 +-
 ui/tests/onboarding.spec.js    | 15 +++++++++++++++
 4 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/src/version.h b/src/version.h
index 31eec90..addde5f 100644
--- a/src/version.h
+++ b/src/version.h
@@ -4,7 +4,7 @@
 
 #define WIND_VER_MAJOR 0
 #define WIND_VER_MINOR 22
-#define WIND_VER_PATCH 4
+#define WIND_VER_PATCH 5
 
 // String form for logs/snapshot/UI. Keep in sync with the numeric parts above.
-#define WIND_VERSION_STR "0.22.4"
+#define WIND_VERSION_STR "0.22.5"
diff --git a/ui/src/Onboarding.svelte b/ui/src/Onboarding.svelte
index 513a36c..4ec5032 100644
--- a/ui/src/Onboarding.svelte
+++ b/ui/src/Onboarding.svelte
@@ -3,7 +3,10 @@
   import { setConfig, windowControl } from './bridge.js';
   import { ic } from './lib/icons.js';
   import KeybindCapture from './lib/KeybindCapture.svelte';
+  import { normalizePalette } from './design/themes.js';
   export let onDone;
+  // The chosen theme (#359), from the host's first-paint config like Settings. A first run has none: Wind grey.
+  const palette = normalizePalette(window.__windInit && window.__windInit.values && window.__windInit.values.uiPalette);
   let cur = 0;
   const N = 3;
   // Keybinds start blank (Unbound) and are ACTUALLY cleared in the ini on mount, not just shown as
@@ -29,7 +32,7 @@
   const zoomInRow  = { label:'Zoom in',  desc:'Hold to magnify',  buttonKey:'zoomInButton',  vkKey:'zoomInVk',  modsKey:'zoomInMods',  buttonModsKey:'zoomInButtonMods' };
   const zoomOutRow = { label:'Zoom out', desc:'Hold to zoom back', buttonKey:'zoomOutButton', vkKey:'zoomOutVk', modsKey:'zoomOutMods', buttonModsKey:'zoomOutButtonMods' };
 </script>
-<div class="wnd win">
+<div class="wnd win" data-palette={palette}>
   <div class="caption" style="app-region:drag;-webkit-app-region:drag">
     <div class="tbtns" style="app-region:no-drag;-webkit-app-region:no-drag">
       <button class="tbtn" title="Minimize" aria-label="Minimize" on:click={() => windowControl('minimize')}>{@html ic.min}</button>
diff --git a/ui/src/controls/Preview.svelte b/ui/src/controls/Preview.svelte
index beafc75..624299b 100644
--- a/ui/src/controls/Preview.svelte
+++ b/ui/src/controls/Preview.svelte
@@ -23,7 +23,7 @@
   const visible = (r) => !r.showIf || String(values[r.showIf.key]) === String(r.showIf.eq);
   const set = (key, val) => { values[key] = val; calls.push([key, val]); };
   const extra = {
-    runningModel: 'hybrid', mpoNeedsRestart: false, version: '0.22.4',
+    runningModel: 'hybrid', mpoNeedsRestart: false, version: '0.22.5',
     onRestart: () => calls.push('restart'), onAction: (a) => calls.push(['action', a]),
     onRepo: () => calls.push('repo'),
     pick: async () => 'RDR2.exe',
diff --git a/ui/tests/onboarding.spec.js b/ui/tests/onboarding.spec.js
index 01ca94d..7688b60 100644
--- a/ui/tests/onboarding.spec.js
+++ b/ui/tests/onboarding.spec.js
@@ -50,3 +50,18 @@ test('onboarding saves the modifiers of a click bind (#285)', async ({ page }) =
   expect(await last('zoomInButton')).toBe('3');
   expect(await last('zoomInButtonMods')).toBe('3');
 });
+
+test('setup uses the chosen theme, and Wind grey on a first run (#359)', async ({ page }) => {
+  await page.addInitScript(() => { window.__windInit = { values: { uiPalette: 'ember' } }; });
+  await page.goto('/?mode=onboard');
+  await expect(page.getByRole('heading', { name: 'Welcome to Wind' })).toBeVisible();
+  await expect(page.locator('.wnd.win')).toHaveAttribute('data-palette', 'ember');
+  const ember = await page.locator('.wnd.win').evaluate((el) => getComputedStyle(el).getPropertyValue('--bg').trim());
+  await page.evaluate(() => { delete window.__windInit; });
+  const first = await page.context().newPage();
+  await first.goto('/?mode=onboard');
+  await expect(first.locator('.wnd.win')).toHaveAttribute('data-palette', 'grey');
+  const grey = await first.locator('.wnd.win').evaluate((el) => getComputedStyle(el).getPropertyValue('--bg').trim());
+  expect(ember).not.toBe('');
+  expect(ember).not.toBe(grey);   // the theme's own background, not Wind grey's
+});