diff --git a/src/components/maps/MapLayersSelector.tsx b/src/components/maps/MapLayersSelector.tsx
index 29d57715b..ac5286e94 100644
--- a/src/components/maps/MapLayersSelector.tsx
+++ b/src/components/maps/MapLayersSelector.tsx
@@ -22,19 +22,19 @@ const MapLayersSelector: React.FC<Props> = ({ emit }) => {
     <>
       <Popover.Root>
         <Popover.Trigger asChild>
-          <button className='absolute bottom-20 left-3 bg-white rounded p-1.5 shadow'>
+          <button className='absolute bottom-20 left-3 bg-base-100 rounded p-1.5 shadow'>
             <span>
               <img
-                className='w-12 h-12 md:w-16 md:h-16 rounded border-[1px] border-slate-300'
+                className='w-12 h-12 md:w-16 md:h-16 rounded border-[1px] border-base-300'
                 src={mapImgUrl}
                 alt='Currently selected maptiler layer'
               />
-              <span className={`break-word text-[0.65rem] absolute bottom-2 left-1/2 -translate-x-1/2 ${mapName === 'satellite' ? 'text-white' : ''}`}>{mapName}</span>
+              <span className={`break-word text-[0.65rem] absolute bottom-2 left-1/2 -translate-x-1/2 ${mapName === 'satellite' ? 'text-base-100' : ''}`}>{mapName}</span>
             </span>
           </button>
         </Popover.Trigger>
         <Popover.Portal>
-          <Popover.Content className=' pt-1.5 bg-white rounded grid grid-cols-1' side='top' sideOffset={20}>
+          <Popover.Content className=' pt-1.5 bg-base-100 rounded grid grid-cols-1' side='top' sideOffset={20}>
             <button className='cursor-pointer col-span-1'>
               {Object.keys(MAP_STYLES).map((key) => {
                 const mapKey = key as keyof typeof MAP_STYLES
@@ -43,7 +43,7 @@ const MapLayersSelector: React.FC<Props> = ({ emit }) => {
                   <div className='px-1.5' key={key} onClick={() => emitMap(key)}>
                     <span className='grid grid-cols-1 justify-items-center'>
                       <img
-                        className='w-12 h-12 md:w-16 md:h-16 rounded col-span-1 shadow border-[1px] border-slate-300'
+                        className='w-12 h-12 md:w-16 md:h-16 rounded col-span-1 shadow border-[1px] border-base-300'
                         src={imgUrl}
                         alt='Currently selected maptiler layer'
                       />
@@ -53,7 +53,7 @@ const MapLayersSelector: React.FC<Props> = ({ emit }) => {
                 )
               })}
             </button>
-            <Popover.Arrow className='fill-[white]' />
+            <Popover.Arrow className='fill-[base-100]' />
           </Popover.Content>
         </Popover.Portal>
       </Popover.Root>