Added dark mode

src/client/index.html

@@ -25,18 +25,25 @@
         opacity: 0;
       }
 
-      body::before {
+      .bg-image {
         content: "";
+        background-image: url("/images/EuropeBackground.svg");
+        background-position: center;
+        background-attachment: fixed;
+        background-size: cover;
         position: fixed;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
-        backdrop-filter: blur(4px);
-        -webkit-backdrop-filter: blur(4px);
+        filter: blur(4px);
         z-index: -1;
       }
 
+      .dark .bg-image {
+        filter: blur(4px) brightness(0.7);
+      }
+
       /* Critical styles to prevent layout shift */
       .container {
         opacity: 1;
@@ -148,13 +155,17 @@
       </div>
     </div>
 
+    <div class="bg-image"></div>
+
+    <dark-mode-button></dark-mode-button>
+
     <!-- Main container with responsive padding -->
     <div class="flex justify-center items-center flex-grow">
       <div class="container px-4 sm:px-6 lg:px-8 py-4 sm:py-6 lg:py-8">
         <div
           class="relative flex gap-1 items-center max-w-sm sm:max-w-md lg:max-w-lg xl:max-w-xl mx-auto p-2 pb-4"
         >
-          <flag-input></flag-input>
+          <flag-input class="w-[20%] md:w-[15%]"></flag-input>
           <username-input class="w-full"></username-input>
         </div>