add dark theme

webapp/src/App.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { RouterView, useRouter } from 'vue-router'
-import { computed, ref, watch } from 'vue'
+import { computed, ref, watch, onMounted } from 'vue'
 import { useTheme } from 'vuetify';
 
 const theme = useTheme();
@@ -11,8 +11,20 @@ const isFullscreen = computed(() => router.currentRoute.value?.query.fullscreen
 function toggleTheme() {
   const newTheme = theme.global.name.value === 'dark' ? 'light' : 'dark';
   theme.global.name.value = newTheme;
+  localStorage.setItem('theme', newTheme);
 }
 
+onMounted(() => {
+  const savedTheme = localStorage.getItem('theme');
+  if (savedTheme) {
+    theme.global.name.value = savedTheme;
+  } else {
+    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    theme.global.name.value = prefersDark ? 'dark' : 'light';
+    localStorage.setItem('theme', theme.global.name.value);
+  }
+});
+
 const items = [
   { title: 'Home', icon: 'mdi-home', to: '/' },
   { title: 'Map', icon: 'mdi-map', to: '/map' },
@@ -63,9 +75,9 @@ watch(() => theme.global.name.value, (newTheme) => {
 
         <v-spacer></v-spacer>
 
-        <!-- <v-btn icon>
+        <v-btn icon>
           <v-icon @click="toggleTheme">mdi-theme-light-dark</v-icon>
-        </v-btn> -->
+        </v-btn>
       </v-app-bar>
 
       <v-navigation-drawer

webapp/src/components/LeafletMap.vue

@@ -25,6 +25,7 @@ import 'leaflet/dist/leaflet.css';
 import 'leaflet.markercluster';
 import 'leaflet.markercluster/dist/MarkerCluster.Default.css';
 import 'leaflet.markercluster/dist/MarkerCluster.css';
+import { useTheme } from 'vuetify';
 
 const MARKER_COLOR = 'rgb(63,84,243)';
 
@@ -132,6 +133,8 @@ function createMarker(alpr: ALPR): Marker | CircleMarker {
   });
 }
 
+const theme = useTheme();
+
 function bindPopup(marker: L.CircleMarker | L.Marker, alpr: ALPR): L.CircleMarker | L.Marker {
   marker.bindPopup('');
 
@@ -149,7 +152,11 @@ function bindPopup(marker: L.CircleMarker | L.Marker, alpr: ALPR): L.CircleMarke
           }
         });
       }
-    }).use(createVuetify()).mount(popupContent);
+    }).use(createVuetify({
+      theme: {
+        defaultTheme: theme.global.name.value,
+      },
+    })).mount(popupContent);
 
     e.popup.setContent(popupContent);
   });

webapp/src/views/PrivacyPolicy.vue

@@ -9,7 +9,7 @@
 
     <h2>Information We Collect</h2>
     <p>
-      DeFlock does not collect, store, or process any personal information about our users. We use local storage in your browser to anonymously identify first-time visitors for the purpose of showing an introductory message as well as to persist application state. This data cannot be used to identify you personally. We do not use cookies, analytics, or tracking technologies on our website.
+      DeFlock does not collect, store, or process any personal information about our users. We use local storage in your browser to anonymously identify first-time visitors for the purpose of showing an introductory message as well as to persist application state, including your dark/light theme preference. This data cannot be used to identify you personally. We do not use cookies, analytics, or tracking technologies on our website.
     </p>
 
     <h2>Third-Party Services</h2>