fix: favicon dark mode (antfu-collective#359)

adamspagge · May 16, 2022 · 2c29e41 · 2c29e41
1 parent 0a8ef07
commit 2c29e41
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 11 deletions.
diff --git a/index.html b/index.html
@@ -3,12 +3,11 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
   <link rel="apple-touch-icon" href="/pwa-192x192.png">
   <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#00aba9">
   <meta name="msapplication-TileColor" content="#00aba9">
   <script>
-    (function() {
+    (function () {
       const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
       const setting = localStorage.getItem('vueuse-color-scheme') || 'auto'
       if (setting === 'dark' || (prefersDark && setting !== 'light'))

diff --git a/public/favicon-dark.svg b/public/favicon-dark.svg
diff --git a/public/favicon.svg b/public/favicon.svg
diff --git a/src/App.vue b/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>
 

diff --git a/src/composables/dark.ts b/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()