map has dark mode

client/src/theme.js

@@ -95,6 +95,52 @@ const widgetRecipe = defineSlotRecipe({
 });
 
 const config = defineConfig({
+  globalCss: {
+    ".react-grid-placeholder": {
+    background: "#c0d2e3ff !important",
+    borderColor: "#a9b6c2ff !important",
+    boxShadow: "0 0 10px #c0d2e3ff !important",
+    opacity: "1 !important",
+    borderRadius: "5px",
+    },
+    ".react-resizable-handle-se": {
+      zIndex: "1",
+    },
+    "*": {
+      scrollbarWidth: "thin",
+      scrollbarColor: "#a0aec0 transparent",
+    },
+    "::-webkit-scrollbar": {
+      width: "8px",
+    },
+    "::-webkit-scrollbar-thumb": {
+      backgroundColor:" rgba(100, 100, 100, 0.4)",
+      borderRadius: "4px",
+    },
+    "::-webkit-scrollbar-track": {
+      background: "transparent",
+    },
+    '.leaflet-tile': {
+      _dark: {
+        filter: "invert(100%) hue-rotate(180deg) brightness(95%) contrast(90%)",
+      }
+    },
+    '.leaflet-control-zoom-in .leaflet-control-zoom-out .leaflet-control-attribution .leaflet-container': {
+      _dark: {
+        filter: "invert(100%) hue-rotate(180deg) brightness(95%) contrast(90%)",
+      }
+    },
+    '.leaflet-control-attribution': {
+      _dark: {
+        filter: "invert(100%) hue-rotate(180deg) brightness(95%) contrast(90%)",
+      }
+    },
+    '.leaflet-container': {
+      _dark: {
+        filter: "invert(100%) hue-rotate(180deg) brightness(95%) contrast(90%)",
+      }
+    },
+  },
   theme: {
     semanticTokens: {
       colors: {