Added dark mode

src/client/Main.ts

@@ -1,7 +1,5 @@
 import { ClientGameRunner, joinLobby } from "./ClientGameRunner";
-import backgroundImage from "../../resources/images/EuropeBackground.svg";
 import favicon from "../../resources/images/Favicon.svg";
-
 import "./PublicLobby";
 import "./UsernameInput";
 import "./styles.css";
@@ -16,15 +14,20 @@ import "./FlagInput";
 import { FlagInput } from "./FlagInput";
 import page from "page";
 import { PublicLobby } from "./PublicLobby";
+import { UserSettings } from "../core/game/UserSettings";
+import "./DarkModeButton";
+import { DarkModeButton } from "./DarkModeButton";
 
 class Client {
   private gameStop: () => void;
 
   private usernameInput: UsernameInput | null = null;
   private flagInput: FlagInput | null = null;
+  private darkModeButton: DarkModeButton | null = null;
 
   private joinModal: JoinPrivateLobbyModal;
   private publicLobby: PublicLobby;
+  private userSettings: UserSettings = new UserSettings();
 
   constructor() {}
 
@@ -34,6 +37,13 @@ class Client {
       consolex.warn("Flag input element not found");
     }
 
+    this.darkModeButton = document.querySelector(
+      "dark-mode-button",
+    ) as DarkModeButton;
+    if (!this.darkModeButton) {
+      consolex.warn("Dark mode button element not found");
+    }
+
     this.usernameInput = document.querySelector(
       "username-input",
     ) as UsernameInput;
@@ -92,6 +102,11 @@ class Client {
         }
       });
 
+    if (this.userSettings.darkMode()) {
+      document.body.classList.add("dark");
+    } else {
+      document.body.classList.remove("dark");
+    }
     page("/join/:lobbyId", (ctx) => {
       const lobbyId = ctx.params.lobbyId;
 
@@ -151,8 +166,6 @@ document.addEventListener("DOMContentLoaded", () => {
   new Client().initialize();
 });
 
-document.body.style.backgroundImage = `url(${backgroundImage})`;
-
 function setFavicon(): void {
   const link = document.createElement("link");
   link.type = "image/x-icon";