diff --git a/lib/vue/src/components/map/CMap.vue b/lib/vue/src/components/map/CMap.vue
index 8b68d4918..bdb1c3db9 100644
--- a/lib/vue/src/components/map/CMap.vue
+++ b/lib/vue/src/components/map/CMap.vue
@@ -87,7 +87,6 @@
         >
           <font-awesome-icon
             :icon="['fas', 'location-arrow']"
-            class="text-primary"
           />
         </a>
       </l-control>
@@ -294,6 +293,27 @@ export default {
 }
 </script>
 
+<style lang="scss">
+.leaflet-touch .leaflet-bar {
+  border: 1px solid transparent;
+  border-radius: 0.3rem;
+}
+
+.leaflet-bar a {
+  background-color: var(--primary);
+  color: var(--white);
+
+  &:hover {
+    background-color: var(--primary-dark);
+    transition: background-color 0.15s ease;
+  }
+}
+
+[data-color-mode="dark"] .leaflet-bar a {
+  color: var(--black);
+}
+</style>
+
 <style scoped>
 .geosearch-container {
   position: absolute;
diff --git a/server/assets/src/scss/variables/18182031_webapp_variable.scss b/server/assets/src/scss/variables/18182031_webapp_variable.scss
index 38dec4a1d..8b36f9f37 100644
--- a/server/assets/src/scss/variables/18182031_webapp_variable.scss
+++ b/server/assets/src/scss/variables/18182031_webapp_variable.scss
@@ -38,6 +38,8 @@ $gray-700: if(lightness($black) < lightness($white), mix($black, $white, 70%), m
 $gray-800: if(lightness($black) < lightness($white), mix($black, $white, 80%), mix($white, $black, 80%));
 $gray-900: if(lightness($black) < lightness($white), mix($black, $white, 90%), mix($white, $black, 90%));
 
+$primary-dark:   darken($primary, 7.5%) !default;
+
 $yiq-contrasted-threshold: 45; // Our magic number, we can pretend its 42..
 $yiq-text-dark:             $black !default;
 $yiq-text-light:            $white !default;
@@ -48,6 +50,7 @@ $theme-colors: map-merge(
     "white": $white,
     "black": $black,
     "extra-light": $extra-light,
+    "primary-dark": $primary-dark,
   ),
   $theme-colors
 );