feat(ui): map canvas follows light/dark theme; fix invisible gear control

The map view now selects a DARK_THEME or LIGHT_THEME palette from the
resolved app theme and threads it through every primitive builder, so
the canvas, planets, ship groups, cargo routes, battle/bombing markers,
fog, reach + selection rings, pending-Send tracks, and the pick overlay
all switch with the rest of the chrome. A theme flip remounts the
renderer preserving the camera — Pixi bakes the background at init and
every primitive bakes its colour at build, so a live re-tint is not
possible on the same instance.

This also fixes the reported bug: the gear-popover trigger and the
loading overlay hardcoded a dark navy background, so in light theme the
gear was invisible (dark icon on dark chip) until hover flipped it to a
white chip. Both now use the --color-surface-overlay token and read
correctly in both themes.

The light palette mirrors the dark one role-for-role, darkened /
saturated for contrast on a light background while keeping the incoming,
battle, and bombing accents vivid. The values are a first pass meant to
be refined during the F8 manual-QA loop.

Removes the now-dead "Phase 35" references from the code and lifts the
map-recoloring prohibition from the design-system / renderer docs; the
battle scene stays a fixed-palette data-viz surface.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

ui/frontend/tests/battle-markers.test.ts

@@ -5,11 +5,9 @@ import { describe, expect, it } from "vitest";
 import type { GameReport } from "../src/api/game-state";
 import {
 	battleMarkerStrokeWidth,
-	BATTLE_MARKER_COLOR,
-	BOMBING_MARKER_COLOR_DAMAGED,
-	BOMBING_MARKER_COLOR_WIPED,
 	buildBattleAndBombingMarkers,
 } from "../src/map/battle-markers";
+import { DARK_THEME, LIGHT_THEME } from "../src/map/world";
 import { EMPTY_SHIP_GROUPS } from "./helpers/empty-ship-groups";
 
 describe("battleMarkerStrokeWidth", () => {
@@ -87,9 +85,10 @@ describe("buildBattleAndBombingMarkers", () => {
 		const out = buildBattleAndBombingMarkers(report);
 		const lines = out.primitives.filter((p) => p.kind === "line");
 		expect(lines).toHaveLength(2);
-		// Same yellow colour, 5 px wide for a 100-shot battle.
+		// Same colour (dark-palette default), 5 px wide for a 100-shot
+		// battle.
 		for (const l of lines) {
-			expect(l.style.strokeColor).toBe(BATTLE_MARKER_COLOR);
+			expect(l.style.strokeColor).toBe(DARK_THEME.battleMarker);
 			expect(l.style.strokeWidthPx).toBe(5);
 		}
 		// First line: top-left → bottom-right corner of the planet square.
@@ -184,7 +183,61 @@ describe("buildBattleAndBombingMarkers", () => {
 		const out = buildBattleAndBombingMarkers(report);
 		const rings = out.primitives.filter((p) => p.kind === "circle");
 		expect(rings).toHaveLength(2);
-		expect(rings[0].style.strokeColor).toBe(BOMBING_MARKER_COLOR_DAMAGED);
-		expect(rings[1].style.strokeColor).toBe(BOMBING_MARKER_COLOR_WIPED);
+		expect(rings[0].style.strokeColor).toBe(DARK_THEME.bombingDamaged);
+		expect(rings[1].style.strokeColor).toBe(DARK_THEME.bombingWiped);
+	});
+
+	it("paints markers with the supplied palette's colours", () => {
+		const report = makeReport({
+			planets: [
+				{
+					number: 4,
+					name: "Test",
+					kind: "local",
+					x: 10,
+					y: 20,
+					size: 50,
+					resources: 0,
+					industryStockpile: 0,
+					materialsStockpile: 0,
+					population: 0,
+					colonists: 0,
+					industry: 0,
+					freeIndustry: 0,
+					production: "MAT",
+					owner: null,
+				},
+			],
+			battles: [
+				{ id: "11111111-1111-1111-1111-111111111111", planet: 4, shots: 3 },
+			],
+			bombings: [
+				{
+					planetNumber: 4,
+					planet: "Test",
+					owner: "X",
+					attacker: "Y",
+					production: "MAT",
+					industry: 0,
+					population: 0,
+					colonists: 0,
+					industryStockpile: 0,
+					materialsStockpile: 0,
+					attackPower: 1,
+					wiped: true,
+				},
+			],
+		});
+
+		const out = buildBattleAndBombingMarkers(report, LIGHT_THEME);
+		const lines = out.primitives.filter((p) => p.kind === "line");
+		const rings = out.primitives.filter((p) => p.kind === "circle");
+		for (const l of lines) {
+			expect(l.style.strokeColor).toBe(LIGHT_THEME.battleMarker);
+		}
+		expect(rings[0].style.strokeColor).toBe(LIGHT_THEME.bombingWiped);
+		// The accents are deliberately distinct between the palettes.
+		expect(LIGHT_THEME.battleMarker).not.toBe(DARK_THEME.battleMarker);
+		expect(LIGHT_THEME.bombingWiped).not.toBe(DARK_THEME.bombingWiped);
 	});
 });

ui/frontend/tests/fog-paint-ops.test.ts

@@ -15,9 +15,14 @@
 
 import { describe, expect, test } from "vitest";
 
-import { FOG_COLOR, fogPaintOps } from "../src/map/render";
+import { fogPaintOps } from "../src/map/render";
+import { DARK_THEME } from "../src/map/world";
 
-const BG_COLOR = 0x0a0e1a;
+// The fog colour now lives on the theme; the renderer passes
+// `theme.fog` to `fogPaintOps`. These ops tests pin the pure
+// projection, so they reference the dark palette's value directly.
+const FOG_COLOR = DARK_THEME.fog;
+const BG_COLOR = DARK_THEME.background;
 const WORLD = { width: 1000, height: 800 };
 
 describe("fogPaintOps — no-wrap mode", () => {

ui/frontend/tests/map-cargo-routes.test.ts

@@ -13,12 +13,9 @@ import type {
 } from "../src/api/game-state";
 import {
 	ROUTE_LINE_ID_PREFIX,
-	STYLE_ROUTE_CAP,
-	STYLE_ROUTE_COL,
-	STYLE_ROUTE_EMP,
-	STYLE_ROUTE_MAT,
 	buildCargoRouteLines,
 } from "../src/map/cargo-routes";
+import { DARK_THEME, LIGHT_THEME } from "../src/map/world";
 import { EMPTY_SHIP_GROUPS } from "./helpers/empty-ship-groups";
 
 function makePlanet(overrides: Partial<ReportPlanet>): ReportPlanet {
@@ -146,10 +143,25 @@ describe("buildCargoRouteLines", () => {
 			if (existing === undefined) styleByPriority.set(line.priority, line.style);
 			else expect(existing).toBe(line.style);
 		}
-		expect(styleByPriority.get(8)).toBe(STYLE_ROUTE_COL);
-		expect(styleByPriority.get(7)).toBe(STYLE_ROUTE_CAP);
-		expect(styleByPriority.get(6)).toBe(STYLE_ROUTE_MAT);
-		expect(styleByPriority.get(5)).toBe(STYLE_ROUTE_EMP);
+		// Default (dark) palette colours, one per load type.
+		expect(styleByPriority.get(8)?.strokeColor).toBe(DARK_THEME.routeCol);
+		expect(styleByPriority.get(7)?.strokeColor).toBe(DARK_THEME.routeCap);
+		expect(styleByPriority.get(6)?.strokeColor).toBe(DARK_THEME.routeMat);
+		expect(styleByPriority.get(5)?.strokeColor).toBe(DARK_THEME.routeEmp);
+	});
+
+	test("uses the supplied palette's stroke colours", () => {
+		const report = makeReport(
+			[
+				makePlanet({ number: 1, x: 100, y: 100 }),
+				makePlanet({ number: 2, x: 200, y: 100 }),
+			],
+			1,
+			[{ loadType: "COL", destinationPlanetNumber: 2 }],
+		);
+		const [shaft] = buildCargoRouteLines(report, undefined, LIGHT_THEME);
+		expect(shaft.style.strokeColor).toBe(LIGHT_THEME.routeCol);
+		expect(LIGHT_THEME.routeCol).not.toBe(DARK_THEME.routeCol);
 	});
 
 	test("line ids carry the ROUTE_LINE_ID_PREFIX high bit", () => {

ui/frontend/tests/map-theme.test.ts

@@ -0,0 +1,144 @@
+// Coverage for the map's light / dark palette threading. The map
+// renderer follows the resolved app theme: `map.svelte` selects
+// `DARK_THEME` or `LIGHT_THEME` and threads it through every primitive
+// builder so the canvas, planets, ship groups, routes, markers, and
+// overlays all switch with the rest of the chrome. These tests pin the
+// palette plumbing — that the builders honour the supplied palette and
+// that the two palettes actually differ role-for-role — without booting
+// Pixi. The per-builder colour tests (battle-markers, cargo-routes,
+// selection-ring) cover their own surfaces; this spec covers the
+// planet, ship-group, and reach-ring paths plus the palette invariants.
+
+import { describe, expect, test } from "vitest";
+
+import type { GameReport, ReportPlanet } from "../src/api/game-state";
+import { computeReachCircles } from "../src/map/reach-circles";
+import { reportToWorld } from "../src/map/state-binding";
+import { DARK_THEME, LIGHT_THEME, type Theme } from "../src/map/world";
+import { EMPTY_SHIP_GROUPS } from "./helpers/empty-ship-groups";
+
+function makeReport(overrides: Partial<GameReport> = {}): GameReport {
+	return {
+		turn: 1,
+		mapWidth: 4000,
+		mapHeight: 4000,
+		planetCount: 0,
+		planets: [],
+		race: "",
+		localShipClass: [],
+		routes: [],
+		localPlayerDrive: 0,
+		localPlayerWeapons: 0,
+		localPlayerShields: 0,
+		localPlayerCargo: 0,
+		...EMPTY_SHIP_GROUPS,
+		...overrides,
+	};
+}
+
+function makePlanet(overrides: Partial<ReportPlanet>): ReportPlanet {
+	return {
+		number: 0,
+		name: "",
+		x: 0,
+		y: 0,
+		kind: "local",
+		owner: null,
+		size: null,
+		resources: null,
+		industryStockpile: null,
+		materialsStockpile: null,
+		industry: null,
+		population: null,
+		colonists: null,
+		production: null,
+		freeIndustry: null,
+		...overrides,
+	};
+}
+
+function planetFill(
+	kind: ReportPlanet["kind"],
+	theme?: Theme,
+): number | undefined {
+	const { world } = reportToWorld(
+		makeReport({ planets: [makePlanet({ number: 1, kind })] }),
+		theme,
+	);
+	return world.primitives[0]?.style.fillColor;
+}
+
+describe("map palette threading", () => {
+	test("planet glyphs default to the dark palette", () => {
+		expect(planetFill("local")).toBe(DARK_THEME.planetLocal);
+	});
+
+	test("planet glyphs follow the supplied palette per kind", () => {
+		expect(planetFill("local", LIGHT_THEME)).toBe(LIGHT_THEME.planetLocal);
+		expect(planetFill("other", LIGHT_THEME)).toBe(LIGHT_THEME.planetOther);
+		expect(planetFill("uninhabited", LIGHT_THEME)).toBe(
+			LIGHT_THEME.planetUninhabited,
+		);
+		expect(planetFill("unidentified", LIGHT_THEME)).toBe(
+			LIGHT_THEME.planetUnidentified,
+		);
+	});
+
+	test("incoming-group accent follows the palette", () => {
+		const report = makeReport({
+			planets: [
+				makePlanet({ number: 1, x: 0, y: 0, kind: "local" }),
+				makePlanet({ number: 2, x: 100, y: 0, kind: "local" }),
+			],
+			incomingShipGroups: [
+				{ origin: 1, destination: 2, distance: 10, speed: 5, mass: 1 },
+			],
+		});
+		for (const theme of [DARK_THEME, LIGHT_THEME]) {
+			const { world, hitLookup } = reportToWorld(report, theme);
+			// Locate the clickable incoming point via the hit-lookup.
+			let incomingId: number | null = null;
+			for (const [id, target] of hitLookup) {
+				if (
+					target.kind === "shipGroup" &&
+					target.ref.variant === "incoming"
+				) {
+					incomingId = id;
+					break;
+				}
+			}
+			expect(incomingId).not.toBeNull();
+			const point = world.primitives.find((p) => p.id === incomingId);
+			expect(point?.style.fillColor).toBe(theme.shipIncoming);
+		}
+	});
+
+	test("reach rings follow the supplied palette", () => {
+		const dark = computeReachCircles({ x: 0, y: 0 }, 100, 1000, 1000, "torus");
+		expect(dark[0]?.style.strokeColor).toBe(DARK_THEME.reachCircle);
+		const light = computeReachCircles(
+			{ x: 0, y: 0 },
+			100,
+			1000,
+			1000,
+			"torus",
+			LIGHT_THEME,
+		);
+		expect(light[0]?.style.strokeColor).toBe(LIGHT_THEME.reachCircle);
+	});
+});
+
+describe("palette invariants", () => {
+	test("the two palettes define the same fields", () => {
+		expect(Object.keys(LIGHT_THEME).sort()).toEqual(
+			Object.keys(DARK_THEME).sort(),
+		);
+	});
+
+	test("the canvas background and accents differ between palettes", () => {
+		expect(LIGHT_THEME.background).not.toBe(DARK_THEME.background);
+		expect(LIGHT_THEME.shipIncoming).not.toBe(DARK_THEME.shipIncoming);
+		expect(LIGHT_THEME.battleMarker).not.toBe(DARK_THEME.battleMarker);
+		expect(LIGHT_THEME.bombingWiped).not.toBe(DARK_THEME.bombingWiped);
+	});
+});

ui/frontend/tests/pending-send-routes.test.ts

@@ -12,6 +12,7 @@ import type {
 } from "../src/api/game-state";
 import type { OrderCommand } from "../src/sync/order-types";
 import { buildPendingSendLines } from "../src/map/pending-send-routes";
+import { DARK_THEME, LIGHT_THEME } from "../src/map/world";
 
 function planet(overrides: Partial<ReportPlanet> & Pick<ReportPlanet, "number" | "x" | "y">): ReportPlanet {
 	return {
@@ -108,7 +109,29 @@ describe("buildPendingSendLines", () => {
 		expect(line.x2).toBe(110);
 		expect(line.y2).toBe(100);
 		expect(line.style.strokeDashPx).toBeGreaterThan(0);
-		expect(line.style.strokeColor).toBe(0x66bb6a);
+		expect(line.style.strokeColor).toBe(DARK_THEME.pendingSend);
+	});
+
+	test("uses the supplied palette's dashed-line colour", () => {
+		const report = makeReport({
+			planets: [SOURCE_PLANET, DEST_PLANET],
+			localShipGroups: [localGroup({ id: GROUP_ID, destination: 1 })],
+		});
+		const cmd: OrderCommand = {
+			kind: "sendShipGroup",
+			id: "cmd-1",
+			groupId: GROUP_ID,
+			destinationPlanetNumber: 2,
+		};
+		const lines = buildPendingSendLines(
+			report,
+			[cmd],
+			{ "cmd-1": "valid" },
+			undefined,
+			LIGHT_THEME,
+		);
+		expect(lines[0]?.style.strokeColor).toBe(LIGHT_THEME.pendingSend);
+		expect(LIGHT_THEME.pendingSend).not.toBe(DARK_THEME.pendingSend);
 	});
 
 	test("uses the torus-shortest path across the seam", () => {

ui/frontend/tests/selection-ring.test.ts

@@ -1,10 +1,7 @@
 import { describe, expect, it } from "vitest";
 
-import {
-	computeSelectionRing,
-	SELECTION_RING_COLOR,
-	SELECTION_RING_ID,
-} from "../src/map/selection-ring";
+import { computeSelectionRing, SELECTION_RING_ID } from "../src/map/selection-ring";
+import { DARK_THEME, LIGHT_THEME } from "../src/map/world";
 
 const planets = [
 	{ number: 1, x: 10, y: 20 },
@@ -29,8 +26,15 @@ describe("computeSelectionRing", () => {
 			y: 40,
 			hitSlopPx: 0,
 		});
-		expect(ring?.style.strokeColor).toBe(SELECTION_RING_COLOR);
+		// Defaults to the dark palette.
+		expect(ring?.style.strokeColor).toBe(DARK_THEME.selectionRing);
 		// Sits outside the planet marker (radius 6 world units).
 		expect(ring?.radius ?? 0).toBeGreaterThan(6);
 	});
+
+	it("uses the supplied palette's ring colour", () => {
+		const ring = computeSelectionRing(planets, 2, LIGHT_THEME);
+		expect(ring?.style.strokeColor).toBe(LIGHT_THEME.selectionRing);
+		expect(LIGHT_THEME.selectionRing).not.toBe(DARK_THEME.selectionRing);
+	});
 });