feat: switch theme color on theme toggling (elk-zone#454)

Co-authored-by: Anthony Fu <[email protected]>
likui628 · Dec 19, 2022 · db8c2ad · db8c2ad
1 parent 6eef0fe
commit db8c2ad
Show file tree

Hide file tree

Showing 19 changed files with 35 additions and 101 deletions.
diff --git a/composables/pwa/index.ts b/composables/pwa/index.ts
@@ -3,6 +3,10 @@ import { useRegisterSW } from 'virtual:pwa-register/vue'
 export const usePWA = () => {
   const online = useOnline()
 
+  useHead({
+    meta: [{ id: 'theme-color', name: 'theme-color', content: computed(() => isDark.value ? '#111111' : '#ffffff') }],
+  })
+
   const {
     needRefresh,
     updateServiceWorker,

diff --git a/config/pwa.ts b/config/pwa.ts
@@ -31,12 +31,14 @@ const pwa: VitePWANuxtOptions = {
         sizes: '512x512',
         type: 'image/png',
       },
+      /*
       {
         src: 'logo.svg',
         sizes: '250x250',
         type: 'image/png',
         purpose: 'any maskable',
       },
+*/
     ],
   },
   injectManifest: {

diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -4,7 +4,7 @@ import { isCI, isDevelopment } from 'std-env'
 import { i18n } from './config/i18n'
 import { pwa } from './config/pwa'
 
-const isPreview = process.env.PULL_REQUEST === 'true'
+const isPreview = process.env.PULL_REQUEST === 'true' || process.env.CONTEXT === 'deploy-preview' || process.env.CONTEXT === 'dev'
 
 export default defineNuxtConfig({
   typescript: {
@@ -110,14 +110,10 @@ export default defineNuxtConfig({
         class: 'overflow-x-hidden',
       },
       link: [
-        { rel: 'icon', type: 'image/png', href: '/favicon.png' },
-        { rel: 'alternate icon', type: 'image/x-icon', href: '/favicon.ico' },
-        { rel: 'icon', type: 'image/png', href: '/favicon-16x16.png', sizes: '16x16' },
-        { rel: 'icon', type: 'image/png', href: '/favicon-32x32.png', sizes: '32x32' },
-        { rel: 'mask-icon', href: '/safari-pinned-tab.svg', color: '#ffffff' },
-        { rel: 'apple-touch-icon', href: '/apple-touch-icon.png', sizes: '180x180' },
+        { rel: 'icon', href: '/favicon.ico', sizes: 'any' },
+        { rel: 'icon', type: 'image/svg+xml', href: '/favicon.svg' },
+        { rel: 'apple-touch-icon', href: '/apple-touch-icon.png' },
       ],
-      meta: [{ name: 'theme-color', content: '#ffffff' }],
     },
   },
   i18n,

diff --git a/public-dev/apple-touch-icon.png b/public-dev/apple-touch-icon.png
diff --git a/public-dev/favicon-16x16.png b/public-dev/favicon-16x16.png
diff --git a/public-dev/favicon-32x32.png b/public-dev/favicon-32x32.png
diff --git a/public-dev/favicon.ico b/public-dev/favicon.ico
diff --git a/public-dev/favicon.png b/public-dev/favicon.png
diff --git a/public-dev/favicon.svg b/public-dev/favicon.svg
diff --git a/public-dev/logo.svg b/public-dev/logo.svg
diff --git a/public-dev/pwa-192x192.png b/public-dev/pwa-192x192.png
diff --git a/public-dev/pwa-512x512.png b/public-dev/pwa-512x512.png
diff --git a/public/apple-touch-icon.png b/public/apple-touch-icon.png
diff --git a/public/favicon-16x16.png b/public/favicon-16x16.png
diff --git a/public/favicon-32x32.png b/public/favicon-32x32.png
diff --git a/public/logo.svg b/public/logo.svg
diff --git a/public/pwa-192x192.png b/public/pwa-192x192.png
diff --git a/public/pwa-512x512.png b/public/pwa-512x512.png