map has dark mode

client/src/components/layout/Dashboard.jsx

@@ -9,6 +9,7 @@ export default function Dashboard() {
   const recipe = useRecipe({ key: "dashboard" });
   const styles = recipe();
 
+  const [darkMode, setDarkMode] = useState(false);
   // Lifted State - defaults to widget dashboard
   const [view, setView] = useState("widget");
   const [layout, setLayout] = useState([
@@ -19,41 +20,17 @@ export default function Dashboard() {
 
   return (
     <>
-      <Global // change the background color of widget shadow when moving
-        styles={css`
-          .react-grid-placeholder {
-            background: #c0d2e3ff !important;
-            border-color: #a9b6c2ff !important;
-            box-shadow: 0 0 10px #c0d2e3ff !important;
-            opacity: 1 !important;
-            border-radius: 5px;
-          }
+    {/* <Global styles={css`
+      .leaflet-tile,
+      .leaflet-control-zoom-in,
+      .leaflet-control-zoom-out,
+      .leaflet-control-attribution {
+        filter: invert(100%) hue-rotate(180deg) brightness(95%) contrast(90%);
+      }
 
-          .react-resizable-handle-se {
-            position: absolute;
-            bottom: 0;
-            z-index: 1;
-            border-radius: 5px;
-          }
-
-          * {
-            scrollbar-width: thin;              /* Firefox */
-            scrollbar-color: #a0aec0 transparent; /* Firefox */
-          }
-
-          /* Chrome, Edge, Safari */
-          ::-webkit-scrollbar {
-            width: 8px;
-          }
-          ::-webkit-scrollbar-thumb {
-            background-color: rgba(100, 100, 100, 0.4);
-            border-radius: 4px;
-          }
-          ::-webkit-scrollbar-track {
-            background: transparent;
-          }
-        `}
-      />
+      .leaflet-container {
+        background-color: #1e1e1e;
+       */}
       <Grid css={styles}
         templateRows="1fr 11fr"
         templateColumns="1fr 20fr"
@@ -68,12 +45,15 @@ export default function Dashboard() {
         </GridItem>
         <GridItem colSpan={1}>
           <Sidebar 
+            darkMode={ darkMode }
+            setDarkMode={ setDarkMode }
             view={ view }
             onChangeView={ setView }
           />
         </GridItem>
         <GridItem colSpan={1} width="100%" overflow="auto">
           <Canvas 
+            darkMode={ darkMode }
             view={ view }
             setView={ setView }
             layout={ layout }