Feature/Move theme system from core to client-side ThemeProvider (#4108)

**Add approved & assigned issue number here:** Resolves #2549 ## Description: Themes are purely for the client's rendering, and the server doesn't need context on them. This PR moves `Theme.ts` from `src/core/configuration` to `src/client/theme` and moves affiliation colors to `render-settings.json`. This is to support the ability to add additional themes more quickly, such as colorblind-friendly themes. No visible changes occur from this refactor. ## Please complete the following: - [X] I have added screenshots for all UI updates - [X] I process any text displayed to the user through translateText() and I've added it to the en.json file - [X] I have added relevant tests to the test directory ## Please put your Discord username so you can be contacted if a bug or regression is found: jetaviz --------- Co-authored-by: Josh Harris <josh@wickedsick.com>
2026-07-19 00:03:01 +00:00 · 2026-06-02 09:32:08 +00:00
parent d8c127a462
commit 2c8a66625c
23 changed files with 150 additions and 88 deletions
@@ -0,0 +1,62 @@
+import { Colord, colord } from "colord";
+import { TerrainType } from "../../core/game/Game";
+import { GameMap, TileRef } from "../../core/game/GameMap";
+import { PastelTheme } from "./PastelTheme";
+
+export class PastelThemeDark extends PastelTheme {
+  private darkShore = colord("rgb(134,133,88)");
+
+  private darkWater = colord("rgb(14,11,30)");
+  private darkShorelineWater = colord("rgb(50,50,50)");
+
+  // | Terrain Type      | Magnitude | Base Color Logic                                | Visual Description    |
+  // | :---------------- | :-------- | :---------------------------------------------- | :-------------------- |
+  // | **Shore (Land)**  | N/A       | Fixed: `rgb(134, 133, 88)`                    | Dark olive.           |
+  // | **Plains**        | 0 - 9     | `rgb(140, 170, 88)` - `rgb(140, 152, 88)`   | Muted green.          |
+  // | **Highland**      | 10 - 19   | `rgb(170, 153, 108)` - `rgb(188, 171, 126)` | Dark earth tone.      |
+  // | **Mountain**      | 20 - 30   | `rgb(190, 190, 190)` - `rgb(195, 195, 195)` | Dark gray.            |
+  // | **Water (Shore)** | 0         | Fixed: `rgb(50, 50, 50)`                      | Dark gray/black.      |
+  // | **Water (Deep)**  | 1 - 10+   | `rgb(22, 19, 38)` - `rgb(14, 11, 30)`       | Very dark blue/black. |
+
+  terrainColor(gm: GameMap, tile: TileRef): Colord {
+    const mag = gm.magnitude(tile);
+    if (gm.isShore(tile)) {
+      return this.darkShore;
+    }
+    switch (gm.terrainType(tile)) {
+      case TerrainType.Ocean:
+      case TerrainType.Lake: {
+        const w = this.darkWater.rgba;
+        if (gm.isShoreline(tile) && gm.isWater(tile)) {
+          return this.darkShorelineWater;
+        }
+        if (gm.magnitude(tile) < 10) {
+          return colord({
+            r: Math.max(w.r + 9 - mag, 0),
+            g: Math.max(w.g + 9 - mag, 0),
+            b: Math.max(w.b + 9 - mag, 0),
+          });
+        }
+        return this.darkWater;
+      }
+      case TerrainType.Plains:
+        return colord({
+          r: 140,
+          g: 170 - 2 * mag,
+          b: 88,
+        });
+      case TerrainType.Highland:
+        return colord({
+          r: 150 + 2 * mag,
+          g: 133 + 2 * mag,
+          b: 88 + 2 * mag,
+        });
+      case TerrainType.Mountain:
+        return colord({
+          r: 180 + mag / 2,
+          g: 180 + mag / 2,
+          b: 180 + mag / 2,
+        });
+    }
+  }
+}