cool styling

webapp/src/App.vue

@@ -1,6 +1,14 @@
 <script setup lang="ts">
 import { RouterView } from 'vue-router'
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
+import { useTheme } from 'vuetify';
+
+const theme = useTheme();
+
+function toggleTheme() {
+  const newTheme = theme.global.name.value === 'dark' ? 'light' : 'dark';
+  theme.global.name.value = newTheme;
+}
 
 const items = [
   { title: 'Map', icon: 'mdi-map', to: '/' },
@@ -11,6 +19,17 @@ const items = [
   { title: 'Contact', icon: 'mdi-email', to: '/contact' },
 ]
 const drawer = ref(false)
+
+watch(() => theme.global.name.value, (newTheme) => {
+  const root = document.documentElement;
+  if (newTheme === 'dark') {
+    root.style.setProperty('--df-background-color', 'rgb(33, 33, 33)');
+    root.style.setProperty('--df-text-color', '#ccc');
+  } else {
+    root.style.setProperty('--df-background-color', 'white');
+    root.style.setProperty('--df-text-color', 'black');
+  }
+});
 </script>
 
 <template>
@@ -26,6 +45,10 @@ const drawer = ref(false)
       </v-toolbar-title>
 
       <v-spacer></v-spacer>
+
+      <v-btn icon>
+        <v-icon @click="toggleTheme">mdi-theme-light-dark</v-icon>
+      </v-btn>
     </v-app-bar>
 
     <v-navigation-drawer

webapp/src/assets/main.css

@@ -7,3 +7,16 @@ a {
 a:hover {
   text-decoration: underline;
 }
+
+:root {
+  --df-background-color: rgb(33,33,33);
+  --df-text-color: #ccc;
+}
+
+.leaflet-popup-content-wrapper, .leaflet-popup-tip, .leaflet-bar a {
+  background: var(--df-background-color) !important;
+}
+
+.leaflet-bar a {
+  color: var(--df-text-color) !important;
+}

webapp/src/main.ts

@@ -13,6 +13,9 @@ import '@mdi/font/css/materialdesignicons.css' // Ensure you are using css-loade
 const vuetify = createVuetify({
   components,
   directives,
+  theme: {
+    defaultTheme: 'dark',
+  }
 })
 
 const app = createApp(App)

webapp/src/views/HomeView.vue

@@ -39,8 +39,9 @@
           </v-text-field>
         </form>
       </l-control>
+      <!-- url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" -->
       <l-tile-layer
-        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+        :url="mapTileUrl"
         layer-type="base"
         name="OpenStreetMap"
       />
@@ -62,12 +63,13 @@ import { useRouter } from 'vue-router'
 import type { Ref } from 'vue';
 import { BoundingBox } from '@/services/apiService';
 import { getALPRs, geocodeQuery } from '@/services/apiService';
-import { useDisplay } from 'vuetify';
+import { useDisplay, useTheme } from 'vuetify';
 import DFMapMarker from '@/components/DFMapMarker.vue';
 import type { ALPR } from '@/types';
 
 const DEFAULT_ZOOM = 12;
 
+const theme = useTheme();
 const zoom: Ref<number> = ref(DEFAULT_ZOOM);
 const center: Ref<any|null> = ref(null);
 const bounds: Ref<BoundingBox|null> = ref(null);
@@ -77,6 +79,11 @@ const router = useRouter();
 const { xs } = useDisplay();
 
 const canRefreshMarkers = computed(() => zoom.value >= 10);
+const mapTileUrl = computed(() =>
+  theme.global.name.value === 'dark' ?
+    'https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}{r}.png' :
+    'https://tiles.stadiamaps.com/tiles/osm_bright/{z}/{x}/{y}{r}.png'
+);
 
 const alprsInView: Ref<ALPR[]> = ref([]);
 const bboxForLastRequest: Ref<BoundingBox|null> = ref(null);