Add Graphics Settings name color toggle and unit tests

Adds a single "Name color" toggle (Colored / Black) to the Graphics
Settings modal, backed by a `darkNames` boolean in the override schema
that derives the five underlying name-rendering fields
(fill/outline player-color flags + static outline RGB). Forcing the
outline RGB to 0 in dark mode is what makes the shader's defaultFill
ramp actually render black — flipping the boolean uniforms alone
wasn't enough because the fill is derived from uOutlineColor when
fillUsePlayerColor is false.

Flips the render-settings.json defaults so black names are the
renderer baseline; the modal's no-override state follows the JSON
source of truth. Adds tests covering schema parse behavior and the
generateRenderSettings derivation for each override field.

src/client/hud/layers/GraphicsSettingsModal.ts

@@ -137,6 +137,17 @@ export class GraphicsSettingsModal extends LitElement implements Controller {
     this.patchName({ cullThreshold: value });
   }
 
+  private currentDarkNames(): boolean {
+    return (
+      this.userSettings.graphicsOverrides().name?.darkNames ??
+      !renderDefaults.name.fillUsePlayerColor
+    );
+  }
+
+  private onToggleNamesColored() {
+    this.patchName({ darkNames: !this.currentDarkNames() });
+  }
+
   private onResetClick() {
     this.userSettings.setGraphicsOverrides({});
     this.requestUpdate();
@@ -147,6 +158,7 @@ export class GraphicsSettingsModal extends LitElement implements Controller {
 
     const nameScale = this.currentNameScale();
     const nameCull = this.currentNameCull();
+    const namesColored = !this.currentDarkNames();
 
     return html`
       <div
@@ -233,6 +245,25 @@ export class GraphicsSettingsModal extends LitElement implements Controller {
               </div>
             </div>
 
+            <button
+              class="flex gap-3 items-center w-full text-left p-3 hover:bg-slate-700 rounded-sm text-white transition-colors"
+              @click=${this.onToggleNamesColored}
+            >
+              <div class="flex-1">
+                <div class="font-medium">
+                  ${translateText("graphics_setting.colored_names_label")}
+                </div>
+                <div class="text-sm text-slate-400">
+                  ${translateText("graphics_setting.colored_names_desc")}
+                </div>
+              </div>
+              <div class="text-sm text-slate-400">
+                ${namesColored
+                  ? translateText("graphics_setting.colored")
+                  : translateText("graphics_setting.black")}
+              </div>
+            </button>
+
             <div class="border-t border-slate-600 pt-3 mt-4">
               <button
                 class="flex gap-3 items-center w-full text-left p-3 hover:bg-slate-700 rounded-sm text-white transition-colors"

src/client/render/gl/GraphicsOverrides.ts

@@ -6,6 +6,7 @@ export const GraphicsOverridesSchema = z
       .object({
         nameScaleFactor: z.number(),
         cullThreshold: z.number(),
+        darkNames: z.boolean(),
       })
       .partial(),
   })

src/client/render/gl/RenderSettings.ts

@@ -279,6 +279,19 @@ export function generateRenderSettings(
   if (overrides.name?.cullThreshold !== undefined) {
     settings.name.cullThreshold = overrides.name.cullThreshold;
   }
+  if (overrides.name?.darkNames !== undefined) {
+    const dark = overrides.name.darkNames;
+    // Dark: black fill + player-colored outline. Force outline RGB to black
+    // so the shader's defaultFill ramp (mix(uOutlineColor, black, fillT))
+    // collapses to pure black regardless of ambient.
+    // Colored: player-colored fill + white outline (defaults from JSON).
+    settings.name.fillUsePlayerColor = !dark;
+    settings.name.outlineUsePlayerColor = dark;
+    const channel = dark ? 0 : 1;
+    settings.name.outlineR = channel;
+    settings.name.outlineG = channel;
+    settings.name.outlineB = channel;
+  }
   return settings;
 }
 

src/client/render/gl/render-settings.json

@@ -160,11 +160,11 @@
     "nameScaleCap": 3,
     "troopSizeMultiplier": 0.6,
     "outlineWidth": 1.4,
-    "outlineR": 1.0,
-    "outlineG": 1.0,
-    "outlineB": 1.0,
-    "outlineUsePlayerColor": false,
-    "fillUsePlayerColor": true,
+    "outlineR": 0.0,
+    "outlineG": 0.0,
+    "outlineB": 0.0,
+    "outlineUsePlayerColor": true,
+    "fillUsePlayerColor": false,
     "emojiRowOffset": 1.4,
     "statusRowOffset": 1.4
   },