7 files changed, 28 insertions, 10 deletions
diff --git a/modern/src/common/theme/palette.js b/modern/src/common/theme/palette.js
index 6a49ba59..1ef57713 100644
--- a/modern/src/common/theme/palette.js
+++ b/modern/src/common/theme/palette.js
@@ -19,5 +19,6 @@ export default {
     medium: amber[700],
     negative: red[500],
     neutral: grey[500],
+    geometry: '#3bb2d0',
   },
 };
diff --git a/modern/src/main/MainPage.js b/modern/src/main/MainPage.js
index 41e51609..5a35dcef 100644
--- a/modern/src/main/MainPage.js
+++ b/modern/src/main/MainPage.js
@@ -104,7 +104,7 @@ const useStyles = makeStyles((theme) => ({
   },
   sidebarToggleBg: {
     backgroundColor: 'white',
-    color: '#777777',
+    color: 'rgba(0, 0, 0, 0.6)',
     '&:hover': {
       backgroundColor: 'white',
     },
diff --git a/modern/src/map/MapRoutePath.js b/modern/src/map/MapRoutePath.js
index 9703bf24..c2ef1d8e 100644
--- a/modern/src/map/MapRoutePath.js
+++ b/modern/src/map/MapRoutePath.js
@@ -1,3 +1,4 @@
+import { useTheme } from '@mui/styles';
 import maplibregl from 'maplibre-gl';
 import { useEffect } from 'react';
 import { useSelector } from 'react-redux';
@@ -6,6 +7,8 @@ import { map } from './core/MapView';
 const MapRoutePath = ({ positions }) => {
   const id = 'replay';
 
+  const theme = useTheme();
+
   const reportColor = useSelector((state) => {
     const position = positions.find(() => true);
     if (position) {
@@ -17,7 +20,7 @@ const MapRoutePath = ({ positions }) => {
         }
       }
     }
-    return '#3bb2d0';
+    return theme.palette.colors.geometry;
   });
 
   useEffect(() => {
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({