Changed bg map

src/components/BikeClusterLayer.vue

@@ -21,19 +21,19 @@ defineProps<{
 <style lang="scss">
 .marker-cluster div {
   font-family: var(--default-font-family);
-  font-size: .9em;
+  font-size: .95em;
 }
 
 .marker-cluster span {
   font-weight: var(--font-weight-bold);
-  opacity: .85;
+  opacity: .5;
 }
 
 .marker-cluster-small {
-  background-color: color-mix(in srgb, var(--color-green-400) 10%, transparent);
+  background-color: color-mix(in srgb, var(--color-green-400) 7.5%, transparent);
 
   div {
-    background-color: color-mix(in srgb, var(--color-green-400) 15%, transparent);
+    background-color: color-mix(in srgb, var(--color-green-400) 10%, transparent);
   }
 }
 
@@ -41,7 +41,7 @@ defineProps<{
   background-color: color-mix(in srgb, var(--color-amber-500) 12.5%, transparent);
 
   div {
-    background-color: color-mix(in srgb, var(--color-amber-500) 20%, transparent);
+    background-color: color-mix(in srgb, var(--color-amber-500) 15%, transparent);
   }
 }
 
@@ -49,7 +49,7 @@ defineProps<{
   background-color: color-mix(in srgb, var(--color-rose-500) 15%, transparent);
 
   div {
-    background-color: color-mix(in srgb, var(--color-rose-500) 25%, transparent);
+    background-color: color-mix(in srgb, var(--color-rose-500) 20%, transparent);
   }
 }
 </style>

src/components/BikeMap.vue

@@ -8,7 +8,7 @@ globalThis.L = L
 import { useMap } from '@/stores/map'
 import type { ApiResponse } from '@/types/Api'
 import type { BikeParking } from '@/types/Bikes'
-import { API_BASE_URL, API_LIMIT, MAP_TILELAYER_URL, SpotAccess, SpotType } from '@/utils/const'
+import { API_BASE_URL, API_LIMIT, MAP_TILELAYER_URL_DARK, MAP_TILELAYER_URL_LIGHT, SpotAccess, SpotType } from '@/utils/const'
 import { useQuery } from '@pinia/colada'
 import { LControlZoom, LIcon, LMap, LMarker, LTileLayer } from '@vue-leaflet/vue-leaflet'
 import BikeFilters from './BikeFilters.vue'
@@ -16,9 +16,15 @@ import { computed, ref, useTemplateRef } from 'vue'
 import { storeToRefs } from 'pinia'
 import BikeClusterLayer from './BikeClusterLayer.vue'
 import { PhCircleNotch, PhMapPin } from '@phosphor-icons/vue'
+import { useDark } from '@vueuse/core'
 
 // Map setup
 const mapRef = useTemplateRef<{ leafletObject: Map }>('map')
+const isDark = useDark({ storageKey: "theme" })
+
+const mapTilelayer = computed(() => {
+  return isDark.value ? MAP_TILELAYER_URL_DARK : MAP_TILELAYER_URL_LIGHT
+})
 
 // Data fetching
 const fetchedPages = ref(0)
@@ -114,7 +120,7 @@ function handleClickGeoloc() {
       <LMap ref="map" :min-zoom v-model:zoom="zoom" :center="center" :max-bounds :max-bounds-viscosity
         :options="extraOptions" :useGlobalLeaflet="true">
         <LControlZoom position="bottomright" />
-        <LTileLayer v-once :url="MAP_TILELAYER_URL" layer-type="base" />
+        <LTileLayer v-once :url="mapTilelayer" layer-type="base" />
 
         <LMarker v-if="userCoords" :lat-lng="[userCoords.latitude, userCoords.longitude]">
           <LIcon>

src/components/BikeMarker.vue

@@ -84,7 +84,7 @@ const isMarkerVisible = computed(() => isMarkerVisibleLayers.value && isMarkerVi
       { 'korrigo': park.condition_acces === KORRIGO_KEY },
       { 'highlight': park.type === BOXED_KEY || park.type === COVERED_KEY },
     )">
-      <PhBicycle v-if="park.type === UNCOVERED_KEY" size="18" />
+      <PhBicycle v-if="park.type === UNCOVERED_KEY" size="18" weight="fill" />
       <PhWarehouse v-else-if="park.type === COVERED_KEY" size="18" weight="light" />
       <PhSquareHalf v-else-if="park.type === BOXED_KEY" size="18" weight="light" />
       <PhLockKey v-else-if="park.condition_acces === KORRIGO_KEY" size="18" weight="fill" />
@@ -95,8 +95,10 @@ const isMarkerVisible = computed(() => isMarkerVisibleLayers.value && isMarkerVi
 <style lang="scss">
 .leaflet-marker-icon:not(.marker-cluster) {
   border-radius: 50%;
-  color: var(--color-muted-foreground);
-  background-color: var(--color-background);
+  color: color-mix(in srgb, var(--color-foreground) 80%, var(--color-background));
+  background-color: color-mix(in srgb, var(--color-background) 85%, var(--color-foreground));
+  border: 1px solid color-mix(in srgb, var(--color-muted-foreground) 50%, var(--color-background));
+  box-shadow: var(--shadow);
   display: grid;
   place-items: center;
 

src/utils/const.ts

@@ -1,5 +1,5 @@
-export const MAP_TILELAYER_URL =
-  'https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}{r}.png'
+export const MAP_TILELAYER_URL_LIGHT = 'http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png'
+export const MAP_TILELAYER_URL_DARK = 'http://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png'
 
 export const API_BASE_URL =
   'https://data.rennesmetropole.fr/api/explore/v2.1/catalog/datasets/parkings_velos_sur_rennes_metropole/records'