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

feat: toggle meta theme-color with mode (#348)

Browse Source 
* feat: toggle meta theme-color with mode

* chore: fix lint
This commit is contained in:
云游君 2022-05-07 05:09:44 +08:00 committed by GitHub
parent abedef1b2e
commit 21b800509b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 6 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
index.html
View File

@ -7,7 +7,6 @@
<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">
<meta name="theme-color" content="#ffffff">
<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

6
src/App.vue
View File

@ -2,10 +2,16 @@
// 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'
useHead({ useHead({
title: 'Vitesse', title: 'Vitesse',
meta: [ meta: [
{ name: 'description', content: 'Opinionated Vite Starter Template' }, { name: 'description', content: 'Opinionated Vite Starter Template' },
{
name: 'theme-color',
content: computed(() => isDark.value ? '#00aba9' : '#ffffff'),
},
], ],
}) })
</script> </script>