From 8eb879aff4f0f13310b2dc42693da08710f3ac1a Mon Sep 17 00:00:00 2001
From: bijx <bsamiee@hotmail.com>
Date: Tue, 10 Mar 2026 15:59:08 -0400
Subject: [PATCH] Fix: Coordinate Grid text is now white when dark mode is
 enabled (#3396)

## Description:

When the game was on dark mode, seeing the coordinate text on oceans
became impossible. Now we check for dark mode in the layer to change the
text color accordingly.

Light Mode:
<img width="3430" height="1669" alt="image"
src="https://github.com/user-attachments/assets/181d53f5-b218-4f85-9d06-7e80f5d20004"
/>

Dark Mode:
<img width="3488" height="1706" alt="image"
src="https://github.com/user-attachments/assets/8a8e3951-31b4-448d-bc87-7fabd105e5fb"
/>


## 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
- [x] I confirm I have thoroughly tested these changes and take full
responsibility for any bugs introduced

## Please put your Discord username so you can be contacted if a bug or
regression is found:

bijx
---
 src/client/graphics/layers/CoordinateGridLayer.ts | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/client/graphics/layers/CoordinateGridLayer.ts b/src/client/graphics/layers/CoordinateGridLayer.ts
index 64c211750..afa15fcdb 100644
--- a/src/client/graphics/layers/CoordinateGridLayer.ts
+++ b/src/client/graphics/layers/CoordinateGridLayer.ts
@@ -153,6 +153,7 @@ export class CoordinateGridLayer implements Layer {
     const bottomRight = this.transformHandler.worldToScreenCoordinates(
       new Cell(width, height),
     );
+    const darkMode = this.game.config().userSettings()?.darkMode() ?? false;
     return [
       width,
       height,
@@ -163,6 +164,7 @@ export class CoordinateGridLayer implements Layer {
       topLeft.y.toFixed(2),
       bottomRight.x.toFixed(2),
       bottomRight.y.toFixed(2),
+      darkMode ? "1" : "0",
     ].join("|");
   }
 
@@ -268,10 +270,13 @@ export class CoordinateGridLayer implements Layer {
 
     context.font = "12px monospace";
 
+    const isDarkMode = this.game.config().userSettings()?.darkMode() ?? false;
     const drawLabel = (text: string, x: number, y: number) => {
       context.textAlign = "left";
       context.textBaseline = "top";
-      context.fillStyle = "rgba(20, 20, 20, 0.9)";
+      context.fillStyle = isDarkMode
+        ? "rgba(255, 255, 255, 0.9)"
+        : "rgba(20, 20, 20, 0.9)";
       context.fillText(text, x, y);
     };