more dark mode colors

client/src/components/layout/Canvas/views/GlobalMapCanvas.jsx

@@ -1,7 +1,6 @@
 import React from "react";
 import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";
 import 'leaflet/dist/leaflet.css';
-import 'src/css/leaflet-darkmode.css';
 
 export default function GlobalMapCanvas() {
   const position = [45.61142478054226, -122.49630033167544]; // [latitude, longitude]

client/src/css/leaflet-darkmode.css

@@ -1,11 +0,0 @@
-/* map dark mode */
-.dark-mode-leaflet .leaflet-tile,
-.dark-mode-leaflet .leaflet-control-zoom-in,
-.dark-mode-leaflet .leaflet-control-zoom-out,
-.dark-mode-leaflet .leaflet-control-attribution {
-  filter: invert(100%) hue-rotate(180deg) brightness(95%) contrast(90%);
-}
-
-.dark-mode-leaflet .leaflet-container {
-  background-color: #1e1e1e; /* dark background for seamless look */
-}

client/src/theme.js

@@ -102,6 +102,12 @@ const config = defineConfig({
     boxShadow: "0 0 10px #c0d2e3ff !important",
     opacity: "1 !important",
     borderRadius: "5px",
+    _dark: {
+      background: "#393c3fff !important",
+      borderColor: "#000000ff !important",
+      boxShadow: "0 0 10px #16181bff !important",
+      opacity: "1 !important",
+      },
     },
     ".react-resizable-handle-se": {
       zIndex: "1",
@@ -109,6 +115,9 @@ const config = defineConfig({
     "*": {
       scrollbarWidth: "thin",
       scrollbarColor: "#a0aec0 transparent",
+      _dark: {
+        scrollbarColor: "#474747ff transparent",
+      }
     },
     "::-webkit-scrollbar": {
       width: "8px",
@@ -116,6 +125,9 @@ const config = defineConfig({
     "::-webkit-scrollbar-thumb": {
       backgroundColor: "rgba(100, 100, 100, 0.4)",
       borderRadius: "4px",
+      _dark: {
+        backgroundColor: "rgba(35, 35, 35, 0.81)",
+      }
     },
     "::-webkit-scrollbar-track": {
       background: "transparent",
@@ -147,9 +159,7 @@ const config = defineConfig({
         base100: { value: {base: "#f6f9faff", _dark: "#1617199e"}},
         base200: { value: {base: "#e6ecf1ff", _dark: "#242424"}},
         base300: { value: {base: "#d3dae4ff", _dark: "#0a0b0bff"}},
-        // primary: { value: {base: "#9cd855", _dark: "#629631"}},
         primary: { value: {base: "#2B98F8", _dark: "#2B98F8"}},
-        // primaryLt: { value: {base: "#c9e9a0", _dark: "#92948e"}},
         primaryLt: { value: {base: "#98cdffff", _dark: "#98cdffff"}},
         secondaryBG: { value: {base: "#EDF1F1", _dark: "#121212"}},
         border: {value: {base: "#000000", _dark: "#CBCBCB"}},