show a snackbar when user is on the maps page and switches to dark mode

webapp/src/App.vue

@@ -5,6 +5,7 @@ import { useTheme } from 'vuetify';
 
 const theme = useTheme();
 const router = useRouter();
+const snackbar = ref({ show: false, text: '' });
 const isDark = computed(() => theme.name.value === 'dark');
 const isFullscreen = computed(() => router.currentRoute.value?.query.fullscreen === 'true');
 
@@ -12,6 +13,13 @@ function toggleTheme() {
   const newTheme = theme.global.name.value === 'dark' ? 'light' : 'dark';
   theme.global.name.value = newTheme;
   localStorage.setItem('theme', newTheme);
+
+  if (newTheme === 'dark' && router.currentRoute.value.path === '/map') {
+    snackbar.value = {
+      show: true,
+      text: "Dark maps aren't available yet :("
+    };
+  }
 }
 
 onMounted(() => {
@@ -127,6 +135,24 @@ watch(() => theme.global.name.value, (newTheme) => {
     <v-main>
       <RouterView />
     </v-main>
+
+    <v-snackbar
+      close-delay="2000"
+      v-model="snackbar.show"
+      color="grey-darken-3"
+    >
+      <v-icon start>mdi-theme-light-dark</v-icon>
+      {{ snackbar.text }}
+      <template v-slot:actions>
+        <v-btn
+          color="blue"
+          variant="text"
+          @click="snackbar.show = false"
+        >
+          <v-icon>mdi-close</v-icon>
+        </v-btn>
+      </template>
+    </v-snackbar>
   </v-app>
 </template>