From 1e8905275b9981176536c393510a5b982afa858f Mon Sep 17 00:00:00 2001
From: guygubaby <guygubaby@gmail.com>
Date: Mon, 25 Apr 2022 00:00:11 +0800
Subject: [PATCH] feat(theme-color): toggle theme color along with dark mode
 using useHead (#20)

* feat(theme-color): toggle theme color along with dark mode

* feat(theme-color): toggle theme color along with dark mode using useHead

Co-authored-by: bryce <1907004005@gmail.com>
---
 index.html  |  1 -
 src/App.vue | 10 +++++++++-
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index 8c77653..dba0e0e 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">
   <meta name="description" content="好的，今天我们来做菜！">
   <title>隔离食用手册</title>
   <script>
diff --git a/src/App.vue b/src/App.vue
index 1acc982..4b54e13 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,11 +1,19 @@
 <script setup lang="ts">
+import { isDark } from '~/composables'
 // 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
 useHead({
   title: '隔离食用手册',
   meta: [
-    { name: 'description', content: '好的，今天我们来做菜！' },
+    {
+      name: 'description',
+      content: '好的，今天我们来做菜！',
+    },
+    {
+      name: 'theme-color',
+      content: computed(() => isDark.value ? '#121212' : '#fff'),
+    },
   ],
 })
 </script>