fix preview stuff

resources/lang/en.json

@@ -1234,6 +1234,8 @@
   },
   "preview": {
     "finish": "Finish preview",
+    "light_theme": "Light theme",
+    "dark_theme": "Dark theme",
     "complete_title": "Preview Complete",
     "complete_subtitle": "Like what you see? Make it yours.",
     "exit": "Back to menu",

src/client/hud/layers/PreviewFinishButton.ts

@@ -2,28 +2,38 @@ import { html, LitElement } from "lit";
 import { customElement, state } from "lit/decorators.js";
 import { EventBus } from "../../../core/EventBus";
 import { GameView } from "../../../core/game/GameView";
+import { UserSettings } from "../../../core/game/UserSettings";
 import "../../components/baseComponents/Button";
 import { Controller } from "../../Controller";
+import { RefreshGraphicsEvent } from "../../InputHandler";
+import { translateText } from "../../Utils";
 
 /**
- * Always-on overlay button shown only during a skin preview. Clicking it ends
- * the preview by opening <preview-complete-modal>. The preview itself never
- * auto-ends, so this is the player's way out.
+ * Top-of-screen toolbar shown only during a skin preview. Lets the player flip
+ * the map between light/dark themes to see the cosmetic both ways, and finish
+ * the preview (the preview never auto-ends) — which opens
+ * <preview-complete-modal>.
  */
 @customElement("preview-finish-button")
 export class PreviewFinishButton extends LitElement implements Controller {
   public game: GameView;
   public eventBus: EventBus;
 
+  private userSettings = new UserSettings();
+
   @state()
   private isPreview = false;
 
+  @state()
+  private isDark = false;
+
   createRenderRoot() {
     return this;
   }
 
   init() {
     this.isPreview = this.game?.config().isPreview() ?? false;
+    this.isDark = this.userSettings.darkMode();
     this.requestUpdate();
   }
 
@@ -36,10 +46,27 @@ export class PreviewFinishButton extends LitElement implements Controller {
     modal?.show?.();
   }
 
+  private toggleTheme() {
+    // Same path the in-game settings toggle uses: flip the darkMode setting
+    // (a listener maps it to the renderer's day/night mode) and force a redraw.
+    this.userSettings.toggleDarkMode();
+    this.eventBus.emit(new RefreshGraphicsEvent());
+    this.isDark = this.userSettings.darkMode();
+  }
+
   render() {
     if (!this.isPreview) return html``;
     return html`
-      <div class="fixed bottom-6 left-1/2 -translate-x-1/2 z-[10005]">
+      <div
+        class="fixed top-6 left-1/2 -translate-x-1/2 z-[10005] flex items-center gap-2"
+      >
+        <o-button
+          variant="secondary"
+          .title=${this.isDark
+            ? translateText("preview.light_theme")
+            : translateText("preview.dark_theme")}
+          @click=${this.toggleTheme}
+        ></o-button>
         <o-button
           variant="primary"
           translationKey="preview.finish"

src/client/styles.css

@@ -667,10 +667,11 @@ news-button .active button::after {
 
 /* Cinematic skin-preview mode: hide the normal in-game HUD so the player can
    just watch their previewed cosmetic spread across the map. The game canvas,
-   <preview-finish-button>, and <preview-complete-modal> stay visible. */
+   the bottom build bar (<unit-display>), <preview-finish-button>, and
+   <preview-complete-modal> stay visible; the Ctrl+click build popup
+   (<build-menu>) is hidden. */
 body.preview-mode build-menu,
 body.preview-mode control-panel,
-body.preview-mode unit-display,
 body.preview-mode attacks-display,
 body.preview-mode chat-display,
 body.preview-mode events-display,