From c612dcd5f702bb8362a1078854db98c847848b2c Mon Sep 17 00:00:00 2001
From: Werner Kramer <werner.kramer@vortech.nl>
Date: Fri, 29 Mar 2024 15:33:54 +0100
Subject: [PATCH] Map automatic coupled to ui theme

---
 src/services/useBaseLayers/index.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/services/useBaseLayers/index.ts b/src/services/useBaseLayers/index.ts
index b4167ea4..d255b736 100644
--- a/src/services/useBaseLayers/index.ts
+++ b/src/services/useBaseLayers/index.ts
@@ -2,7 +2,7 @@ import type { MaybeRefOrGetter, ShallowRef } from 'vue'
 import { shallowRef, toValue, watchEffect } from 'vue'
 import Basemaps from '@/assets/base-layers.json'
 import { MglDefaults } from 'vue-maplibre-gl'
-import { usePreferredDark } from '@vueuse/core'
+import { useDark } from '@vueuse/core'
 
 export interface UseBaseLayersReturn {
   baseLayerStyle: ShallowRef<string | object>
@@ -15,7 +15,7 @@ export function useBaseLayers(
   const baseLayerStyle = shallowRef<string | object>(MglDefaults.style)
   const baseLayers = shallowRef<(string | object)[]>(Basemaps.baseLayers)
 
-  const prefersDark = usePreferredDark()
+  const isDark = useDark()
 
   watchEffect(() => {
     const _layerId = toValue(layerId)
@@ -23,7 +23,7 @@ export function useBaseLayers(
       (layer: any) => layer.id === _layerId,
     )
     if (layerDefinition?.automatic) {
-      if (prefersDark.value === true) {
+      if (isDark.value === true) {
         const themedLayer = Basemaps.baseLayers.find(
           (layer: any) => layer.id === layerDefinition.automatic.dark,
         )