fix(ui): setup uses the chosen theme (#359)

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"

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>

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',

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
+});