From 21b800509be3e3030d8620fdb64a809522f5de12 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=91=E6=B8=B8=E5=90=9B?= <me@yunyoujun.cn>
Date: Sat, 7 May 2022 05:09:44 +0800
Subject: [PATCH] feat: toggle meta theme-color with mode (#348)

* feat: toggle meta theme-color with mode

* chore: fix lint
---
 index.html  | 1 -
 src/App.vue | 6 ++++++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/index.html b/index.html
index b49c04f..626a87b 100644
--- a/index.html
+++ b/index.html
@@ -7,7 +7,6 @@
   <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">
-  <meta name="theme-color" content="#ffffff">
   <script>
     (function() {
       const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
diff --git a/src/App.vue b/src/App.vue
index b64968a..a7120d7 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,10 +2,16 @@
 // 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'
+
 useHead({
   title: 'Vitesse',
   meta: [
     { name: 'description', content: 'Opinionated Vite Starter Template' },
+    {
+      name: 'theme-color',
+      content: computed(() => isDark.value ? '#00aba9' : '#ffffff'),
+    },
   ],
 })
 </script>