how to apply different styles to react leaftlet map based on state - css

Question

I want to apply these certain styles to my react leaflet map when the user clicks a button to signal that they want a dark themed map or a light themed one but I am not entirely sure how to go about setting up the styles object properly I have created a function to determine the state being light or dark to decide what styles to apply to the map and then the function but not sure if I should have a state for the styles or if I should just have separate style objects and I am also not entirely sure how to adjust the react leaflet map to apply a dark themed to it I have looked around but cannot seem to find any resources on how to
Map component:
import react from 'react';
import { useState, useEffect} from 'react';
import { MapContainer, TileLayer, Popup} from 'react-leaflet';
import MapComp from './MapComp';
function Map() {
const [activities, setActivities] = useState([]);
const [polylines, setPolylines] = useState(null); // as empty array value is still truthy
const [isLoading, setIsLoading] = useState(true);
const [mapMode, setMapMode] = useState('light');
const [mapStyle, setMapStyle] = useState({});
/*
*/
function changeMapStyle() {
if(mapMode === 'light') {
setMapMode('dark');
}
else {
setMapMode('light');
}
}
return (
<>
<button onClick={changeMapStyle}>Change Map style</button>
<MapComp className={`${mapMode}`} style={{ width: "100%", height: "calc(100vh - 4rem)" }}/>
</>
)
}
export default Map;
unsure about this file as I do not think the styles apply correctly to the map. Styles where sourced at https://github.com/pkrasicki/issviewer/blob/master/public/css/dark-theme.css
these styles where applied to vanilla js so that is why I am unsure.
style file:
.dark {
--background: rgb(40, 44, 54);
--nav-background: rgba(0, 0, 0, 0.7);
--text: rgba(255, 255, 255, 0.85);
--link: rgb(122, 191, 255);
--link-hover: rgb(143, 200, 253);
--text-label-color: rgb(255, 95, 95);
--location-input-bg: rgba(0, 0, 0, 0.2);
--location-input-color: rgba(255, 255, 255, 0.9);
--location-input-border: transparent;
--map-background: #1f1f1f;
--map-border: rgba(255, 255, 255, 0.1);
--map-tiles-filter: brightness(0.6) invert(1) contrast(3) hue-rotate(200deg) saturate(0.3) brightness(0.7);
--map-attribution-bg: rgba(0, 0, 0, 0.6);
--map-attribution-color: rgb(161, 161, 161);
--map-zoom-bg: rgb(26, 26, 26);
--map-zoom-border-bottom: rgba(255, 255, 255, 0.3);
--brightness-bar-full: var(--primary);
--spinner-color: var(--primary);
width: "100%";
height: "calc(100vh - 4rem)"
}
.light {
width: "100%";
height: "calc(100vh - 4rem)"
}
#media(prefers-color-scheme: dark) {
:root {
--background: rgb(40, 44, 54);
--nav-background: rgba(0, 0, 0, 0.7);
--text: rgba(255, 255, 255, 0.85);
--link: rgb(122, 191, 255);
--link-hover: rgb(143, 200, 253);
--text-label-color: rgb(255, 95, 95);
--location-input-bg: rgba(0, 0, 0, 0.2);
--location-input-color: rgba(255, 255, 255, 0.9);
--location-input-border: transparent;
--map-background: #1f1f1f;
--map-border: rgba(255, 255, 255, 0.1);
--map-tiles-filter: brightness(0.6) invert(1) contrast(3) hue-rotate(200deg) saturate(0.3) brightness(0.7);
--map-attribution-bg: rgba(0, 0, 0, 0.6);
--map-attribution-color: rgb(161, 161, 161);
--map-zoom-bg: rgb(26, 26, 26);
--map-zoom-border-bottom: rgba(255, 255, 255, 0.3);
--brightness-bar-full: var(--primary);
--spinner-color: var(--primary);
}
}