From 985873eb73268549890be9d4b292e97ae3922ac4 Mon Sep 17 00:00:00 2001
From: Will Freeman <hohosanta@me.com>
Date: Mon, 21 Jul 2025 13:00:36 -0600
Subject: [PATCH] add dark theme

---
 webapp/src/App.vue                   | 18 +++++++++++++++---
 webapp/src/components/LeafletMap.vue |  9 ++++++++-
 webapp/src/views/PrivacyPolicy.vue   |  2 +-
 3 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/webapp/src/App.vue b/webapp/src/App.vue
index aaf982d..87a2d09 100644
--- a/webapp/src/App.vue
+++ b/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
diff --git a/webapp/src/components/LeafletMap.vue b/webapp/src/components/LeafletMap.vue
index 6d0759b..b19513c 100644
--- a/webapp/src/components/LeafletMap.vue
+++ b/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);
   });
diff --git a/webapp/src/views/PrivacyPolicy.vue b/webapp/src/views/PrivacyPolicy.vue
index 849792d..dcffb1b 100644
--- a/webapp/src/views/PrivacyPolicy.vue
+++ b/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>