hxx/vitesse
1
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Activity

fix: favicon dark mode (#359)

Browse Source
This commit is contained in:
ハン / Han 2022-05-16 12:07:37 +09:00 committed by GitHub
parent 0a8ef07345
commit 2c29e41d52
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 15 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
index.html
View File

@ -3,12 +3,11 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <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="apple-touch-icon" href="/pwa-192x192.png">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#00aba9"> <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#00aba9">
<meta name="msapplication-TileColor" content="#00aba9"> <meta name="msapplication-TileColor" content="#00aba9">
<script> <script>
(function() { (function () {
const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
const setting = localStorage.getItem('vueuse-color-scheme') || 'auto' const setting = localStorage.getItem('vueuse-color-scheme') || 'auto'
if (setting === 'dark' || (prefersDark && setting !== 'light')) if (setting === 'dark' || (prefersDark && setting !== 'light'))

3
public/favicon-dark.svg Normal file
View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none">
<path fill-rule="evenodd" clip-rule="evenodd" d="M27.562 26L17.17 8.928l2.366-3.888L17.828 4L16 7.005L14.17 4l-1.708 1.04l2.366 3.888L4.438 26H2v2h28v-2zM16 10.85L25.22 26H17v-8h-2v8H6.78z" fill="white" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 311 B

10
public/favicon.svg
View File

@ -1,9 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"> <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none">
<style> <path fill-rule="evenodd" clip-rule="evenodd" d="M27.562 26L17.17 8.928l2.366-3.888L17.828 4L16 7.005L14.17 4l-1.708 1.04l2.366 3.888L4.438 26H2v2h28v-2zM16 10.85L25.22 26H17v-8h-2v8H6.78z" fill="#222" />
path { fill: #222; }
@media (prefers-color-scheme: dark) {
path { fill: #ffffff; }
}
</style>
<path d="M27.562 26L17.17 8.928l2.366-3.888L17.828 4L16 7.005L14.17 4l-1.708 1.04l2.366 3.888L4.438 26H2v2h28v-2zM16 10.85L25.22 26H17v-8h-2v8H6.78z" />
</svg> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 347 B

After

Width:  |  Height:  |  Size: 310 B

9
src/App.vue
View File

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

1
src/composables/dark.ts
View File

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