fix: favicon dark mode (#359)

src/App.vue

@@ -2,7 +2,7 @@
 // https://github.com/vueuse/head
 // you can use this to manipulate the document head in any components,
 // they will be rendered correctly in the html results with vite-ssg
-import { isDark } from '~/composables'
+import { isDark, preferredDark } from '~/composables'
 
 useHead({
   title: 'Vitesse',
@@ -13,6 +13,13 @@ useHead({
       content: computed(() => isDark.value ? '#00aba9' : '#ffffff'),
     },
   ],
+  link: [
+    {
+      rel: 'icon',
+      type: 'image/svg+xml',
+      href: computed(() => preferredDark.value ? '/favicon-dark.svg' : '/favicon.svg'),
+    },
+  ],
 })
 </script>
 

src/composables/dark.ts

@@ -1,3 +1,4 @@
 // these APIs are auto-imported from @vueuse/core
 export const isDark = useDark()
 export const toggleDark = useToggle(isDark)
+export const preferredDark = usePreferredDark()