4 files changed, 22 insertions, 8 deletions
diff --git a/modern/src/map/main/MapAccuracy.js b/modern/src/map/main/MapAccuracy.js
index 089389bd..3c48c788 100644
--- a/modern/src/map/main/MapAccuracy.js
+++ b/modern/src/map/main/MapAccuracy.js
@@ -2,14 +2,19 @@ import { useEffect } from 'react';
 import { useSelector } from 'react-redux';
 import circle from '@turf/circle';
 
+import { useTheme } from '@mui/styles';
 import { map } from '../core/MapView';
 
 const MapAccuracy = () => {
   const id = 'accuracy';
 
+  const theme = useTheme();
+
   const positions = useSelector((state) => ({
     type: 'FeatureCollection',
-    features: Object.values(state.positions.items).filter((position) => position.accuracy > 0).map((position) => circle([position.longitude, position.latitude], position.accuracy * 0.001)),
+    features: Object.values(state.positions.items)
+      .filter((position) => position.accuracy > 0)
+      .map((position) => circle([position.longitude, position.latitude], position.accuracy * 0.001)),
   }));
 
   useEffect(() => {
@@ -29,8 +34,8 @@ const MapAccuracy = () => {
         ['==', '$type', 'Polygon'],
       ],
       paint: {
-        'fill-color': '#3bb2d0',
-        'fill-outline-color': '#3bb2d0',
+        'fill-color': theme.palette.colors.geometry,
+        'fill-outline-color': theme.palette.colors.geometry,
         'fill-opacity': 0.25,
       },
     });
diff --git a/modern/src/map/main/MapGeofence.js b/modern/src/map/main/MapGeofence.js
index 71d5cb6e..b62cd378 100644
--- a/modern/src/map/main/MapGeofence.js
+++ b/modern/src/map/main/MapGeofence.js
@@ -1,12 +1,15 @@
 import { useEffect } from 'react';
 import { useSelector } from 'react-redux';
 
+import { useTheme } from '@mui/styles';
 import { map } from '../core/MapView';
 import { geofenceToFeature } from '../core/mapUtil';
 
 const MapGeofence = () => {
   const id = 'geofences';
 
+  const theme = useTheme();
+
   const geofences = useSelector((state) => state.geofences.items);
 
   useEffect(() => {
@@ -26,8 +29,8 @@ const MapGeofence = () => {
         ['==', '$type', 'Polygon'],
       ],
       paint: {
-        'fill-color': '#3bb2d0',
-        'fill-outline-color': '#3bb2d0',
+        'fill-color': theme.palette.colors.geometry,
+        'fill-outline-color': theme.palette.colors.geometry,
         'fill-opacity': 0.1,
       },
     });
@@ -36,7 +39,7 @@ const MapGeofence = () => {
       id: 'geofences-line',
       type: 'line',
       paint: {
-        'line-color': '#3bb2d0',
+        'line-color': theme.palette.colors.geometry,
         'line-width': 2,
       },
     });
diff --git a/modern/src/map/main/MapLiveRoutes.js b/modern/src/map/main/MapLiveRoutes.js
index 09319cff..a675afa0 100644
--- a/modern/src/map/main/MapLiveRoutes.js
+++ b/modern/src/map/main/MapLiveRoutes.js
@@ -1,12 +1,15 @@
 import { useEffect, useState } from 'react';
 
 import { useSelector } from 'react-redux';
+import { useTheme } from '@mui/styles';
 import { map } from '../core/MapView';
 import { usePrevious } from '../../reactHelper';
 
 const MapLiveRoutes = () => {
   const id = 'liveRoute';
 
+  const theme = useTheme();
+
   const selectedDeviceId = useSelector((state) => state.devices.selectedId);
   const currentDeviceId = usePrevious(selectedDeviceId);
 
@@ -34,7 +37,7 @@ const MapLiveRoutes = () => {
         'line-cap': 'round',
       },
       paint: {
-        'line-color': '#3bb2d0',
+        'line-color': theme.palette.colors.geometry,
         'line-width': 2,
       },
     });
diff --git a/modern/src/map/main/PoiMap.js b/modern/src/map/main/PoiMap.js
index 3ca344c5..a5185c75 100644
--- a/modern/src/map/main/PoiMap.js
+++ b/modern/src/map/main/PoiMap.js
@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react';
 import { kml } from '@tmcw/togeojson';
 
+import { useTheme } from '@mui/styles';
 import { map } from '../core/MapView';
 import { useEffectAsync } from '../../reactHelper';
 import { usePreference } from '../../common/util/preferences';
@@ -8,6 +9,8 @@ import { usePreference } from '../../common/util/preferences';
 const PoiMap = () => {
   const id = 'poi';
 
+  const theme = useTheme();
+
   const poiLayer = usePreference('poiLayer');
 
   const [data, setData] = useState(null);
@@ -32,7 +35,7 @@ const PoiMap = () => {
         type: 'circle',
         paint: {
           'circle-radius': 5,
-          'circle-color': '#3bb2d0',
+          'circle-color': theme.palette.colors.geometry,
         },
       });
       map.addLayer({