✨ new logo

README.md

@@ -1,7 +1,5 @@
 <div align="center">
-<a href="https://www.anu.edu.au/" target="_blank">
-   <img src="public/img/logo.svg" alt="ANU logo">
-</a>
+<img width="96px" height="96px" src="public/img/logo.svg" alt="Vidat logo">
 
 # Vidat
 

package.json

@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "@quasar/extras": "^1.12.5",
+    "@vueuse/core": "^8.0.1",
     "jszip": "^3.7.1",
     "lodash.clonedeep": "^4.5.0",
     "monaco-editor": "^0.32.1",

src/App.vue

@@ -26,6 +26,12 @@
                 size="md"
             >
               <img
+                  v-if="q.dark.isActive"
+                  src="/img/logo-dark.svg"
+                  alt="logo"
+              >
+              <img
+                  v-else
                   src="/img/logo.svg"
                   alt="logo"
               >
@@ -97,6 +103,7 @@
 </template>
 
 <script setup>
+import { useFavicon, usePreferredDark } from '@vueuse/core'
 import { storeToRefs } from 'pinia'
 import { useQuasar } from 'quasar'
 import { computed } from 'vue'
@@ -291,11 +298,16 @@ if (showPopup) {
     preferenceStore.showPopup = false
   }
 }
+// un-save notice
 document.addEventListener('beforeunload', event => {
   if (annotationStore.hasVideo && !mainStore.isSaved) {
     event.returnValue = 'The annotations are not saved!'
   }
 })
+// auto change favicon
+const isDark = usePreferredDark()
+const favicon = computed(() => isDark.value ? '/img/logo-dark.svg' : '/img/logo.svg')
+useFavicon(favicon)
 </script>
 
 <style lang="sass">

src/pages/annotation/components/AnnotationSkeleton.vue

@@ -1,6 +1,13 @@
 <template>
   <div class="column flex-center">
     <img
+        v-if="q.dark.isActive"
+        style="width: 150px; padding: 100px 0 50px 0;"
+        src="/img/logo-dark.svg"
+        alt="Logo"
+    >
+    <img
+        v-else
         style="width: 150px; padding: 100px 0 50px 0;"
         src="/img/logo.svg"
         alt="Logo"
@@ -48,10 +55,12 @@
 </template>
 
 <script setup>
+import { useQuasar } from 'quasar'
 import VersionBadge from '~/components/VersionBadge.vue'
 import { useAnnotation } from '~/hooks/annotation.js'
 import { useVideo } from '~/hooks/video.js'
 
+const q = useQuasar()
 const { handleOpen } = useVideo()
 const { handleLoad } = useAnnotation()
 </script>