feat: add web manifest dark theme variants (#947)

composables/setups.ts

@@ -3,6 +3,7 @@ import type { LocaleObject } from '#i18n'
 
 export function setupPageHeader() {
   const { locale, locales, t } = useI18n()
+  const colorMode = useColorMode()
   const buildInfo = useBuildInfo()
 
   const localeMap = (locales.value as LocaleObject[]).reduce((acc, l) => {
@@ -26,7 +27,7 @@ export function setupPageHeader() {
       ? () => [{
           key: 'webmanifest',
           rel: 'manifest',
-          href: `/manifest-${locale.value}.webmanifest`,
+          href: `/manifest-${locale.value}${colorMode.value === 'dark' ? '-dark' : ''}.webmanifest`,
         }]
       : [],
   })

modules/pwa/i18n.ts

@@ -74,6 +74,31 @@ export const createI18n = async (): Promise<LocalizedWebManifest> => {
         },
       ],
     }
+    acc[`${lang}-dark`] = {
+      scope: '/',
+      id: '/',
+      start_url: '/',
+      display: 'standalone',
+      lang,
+      name,
+      short_name,
+      description,
+      dir,
+      background_color: '#111111',
+      theme_color: '#111111',
+      icons: [
+        {
+          src: 'pwa-192x192.png',
+          sizes: '192x192',
+          type: 'image/png',
+        },
+        {
+          src: 'pwa-512x512.png',
+          sizes: '512x512',
+          type: 'image/png',
+        },
+      ],
+    }
 
     return acc
   }, {} as LocalizedWebManifest)

modules/pwa/index.ts

@@ -41,10 +41,10 @@ export default defineNuxtModule<VitePWANuxtOptions>({
         throw new Error('Remove vite-plugin-pwa plugin from Vite Plugins entry in Nuxt config file!')
 
       webmanifests = await createI18n()
-      const generateManifest = (locale: string) => {
-        const manifest = webmanifests![locale]
+      const generateManifest = (entry: string) => {
+        const manifest = webmanifests![entry]
         if (!manifest)
-          throw new Error(`No webmanifest found for locale ${locale}`)
+          throw new Error(`No webmanifest found for locale/theme ${entry}`)
         return JSON.stringify(manifest)
       }
       viteInlineConfig.plugins.push({
@@ -54,12 +54,12 @@ export default defineNuxtModule<VitePWANuxtOptions>({
           if (options.disable || !bundle)
             return
 
-          Object.keys(webmanifests!).map(l => [l, `manifest-${l}.webmanifest`]).forEach(([l, fileName]) => {
+          Object.keys(webmanifests!).map(wm => [wm, `manifest-${wm}.webmanifest`]).forEach(([wm, fileName]) => {
             bundle[fileName] = {
               isAsset: true,
               type: 'asset',
               name: undefined,
-              source: generateManifest(l),
+              source: generateManifest(wm),
               fileName,
             }
           })
@@ -107,9 +107,9 @@ export default defineNuxtModule<VitePWANuxtOptions>({
 
         viteServer.middlewares.stack.push({ route: webManifest, handle: emptyHandle })
         if (webmanifests) {
-          Object.keys(webmanifests).forEach((locale) => {
+          Object.keys(webmanifests).forEach((wm) => {
             viteServer.middlewares.stack.push({
-              route: `${nuxt.options.app.baseURL}manifest-${locale}.webmanifest`,
+              route: `${nuxt.options.app.baseURL}manifest-${wm}.webmanifest`,
               handle: emptyHandle,
             })
           })
@@ -138,6 +138,11 @@ export default defineNuxtModule<VitePWANuxtOptions>({
               'Content-Type': 'application/manifest+json',
             },
           }
+          nitroConfig.routeRules![`/manifest-${locale.code}-dark.webmanifest`] = {
+            headers: {
+              'Content-Type': 'application/manifest+json',
+            },
+          }
         }
       })
       nuxt.hook('nitro:init', (nitro) => {