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

@@ -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);
     };