feat: custom source image for apple dark splash screens (#31)

playground/pwa-assets.config.mts

@@ -1,4 +1,5 @@
 import { createAppleSplashScreens, defineConfig, minimal2023Preset } from '@vite-pwa/assets-generator/config'
+import { readFile } from 'node:fs/promises'
 
 export default defineConfig({
   headLinkOptions: {
@@ -7,10 +8,15 @@ export default defineConfig({
   preset: {
     ...minimal2023Preset,
     appleSplashScreens: createAppleSplashScreens({
+      async darkImageResolver(imageName) {
+        return imageName === 'pwa/public/favicon.svg'
+            ? await readFile('pwa/public/splash-dark.svg')
+            : undefined
+      },
       padding: 0.3,
       resizeOptions: { fit: 'contain', background: 'white' },
-      // to test issue #28
-      //darkResizeOptions: { fit: 'contain', background: 'black' },
+      // to test issue #28, comment the line below
+      darkResizeOptions: { fit: 'contain', background: 'black' },
       linkMediaOptions: {
         log: true,
         addMediaScreen: true,

src/api/apple-icons-helper.ts

@@ -95,17 +95,36 @@ export function resolveAppleSplashScreensInstructions(
 
   sizesMap.clear()
 
+  // eslint-disable-next-line n/prefer-global/buffer
+  const cache: Record<string, Promise<Buffer>> = {}
+  const originalName = imageAssets.originalName!
+
+  // eslint-disable-next-line n/prefer-global/buffer
+  const imageResolver = (dark: boolean): Promise<Buffer> => {
+    if (!dark || typeof appleSplashScreens.darkImageResolver !== 'function')
+      return Promise.resolve(image)
+
+    const cached = cache[originalName]
+    if (cached)
+      return cached
+
+    return cache[originalName] = appleSplashScreens
+      .darkImageResolver(originalName)
+      .then(darkImage => Promise.resolve(darkImage ?? image))
+  }
+
   for (const size of splashScreens) {
     const name = resolveName(size.landscape, size.size, size.dark)
     const url = `${imageAssets.basePath}${name}`
-    const promise = () => generateMaskableAsset('png', image, size.size, {
+    const promise = () => imageResolver(size.dark === true).then(i => generateMaskableAsset('png', i, size.size, {
       padding: size.padding,
       resizeOptions: {
         ...size.resizeOptions,
         background: size.resizeOptions?.background ?? (size.dark ? 'black' : 'white'),
       },
       outputOptions: size.png,
-    })
+    }))
+
     instructions.appleSplashScreen[url] = {
       name,
       url,
@@ -159,6 +178,7 @@ function resolveAppleSplashScreens(
       sizes,
       name = defaultSplashScreenName,
       png: usePng = {},
+      darkImageResolver,
     } = useAppleSplashScreens
 
     // Initialize defaults
@@ -186,6 +206,7 @@ function resolveAppleSplashScreens(
       xhtml = false,
     } = useLinkMediaOptions
     appleSplashScreens = {
+      darkImageResolver,
       padding,
       sizes,
       linkMediaOptions: {

src/api/instructions-resolver.ts

@@ -89,7 +89,10 @@ export async function resolveInstructions(imageAssets: ImageAssets) {
   return instructions
 }
 
-async function resolvePreset(preset: BuiltInPreset | Preset, faviconPreset?: HtmlLinkPreset): Promise<[Preset, HtmlLinkPreset]> {
+async function resolvePreset(
+  preset: BuiltInPreset | Preset,
+  faviconPreset?: HtmlLinkPreset,
+): Promise<[preset: Preset, htmlLinkPreset: HtmlLinkPreset]> {
   if (typeof preset === 'object')
     return [preset, faviconPreset ?? 'default']
 

src/splash.ts

@@ -95,6 +95,15 @@ export const AllAppleDeviceNames = Array.from(Object.keys(appleSplashScreenSizes
 
 export function createAppleSplashScreens(
   options: {
+    /**
+     * The image to use for generating dark apple splash screens assets.
+     *
+     * By default, it will use the original image.
+     *
+     * @param imageName The image name configured in images.
+     */
+    // eslint-disable-next-line n/prefer-global/buffer
+    darkImageResolver?: (imageName: string) => Promise<Buffer | undefined>
     padding?: number
     resizeOptions?: ResizeOptions
     darkResizeOptions?: ResizeOptions
@@ -105,6 +114,7 @@ export function createAppleSplashScreens(
   devices: AppleDeviceName[] = AllAppleDeviceNames,
 ) {
   const {
+    darkImageResolver,
     padding,
     resizeOptions,
     darkResizeOptions,
@@ -114,6 +124,7 @@ export function createAppleSplashScreens(
   } = options
 
   return {
+    darkImageResolver,
     sizes: devices.map(deviceName => appleSplashScreenSizes[deviceName]),
     padding,
     resizeOptions,
@@ -127,6 +138,15 @@ export function createAppleSplashScreens(
 export function combinePresetAndAppleSplashScreens(
   preset: Preset,
   options: {
+    /**
+     * The image to use for generating dark apple splash screens assets.
+     *
+     * By default, it will use the original image.
+     *
+     * @param imageName The image name configured in images.
+     */
+    // eslint-disable-next-line n/prefer-global/buffer
+    darkImageResolver?: (imageName: string) => Promise<Buffer | undefined>
     padding?: number
     resizeOptions?: ResizeOptions
     darkResizeOptions?: ResizeOptions

src/types.ts

@@ -83,6 +83,15 @@ export interface AppleTouchStartupImageOptions {
 }
 
 export interface AppleSplashScreens {
+  /**
+   * The image to use for generating dark apple splash screens assets.
+   *
+   * By default, it will use the original image.
+   *
+   * @param imageName The image name configured in images.
+   */
+  // eslint-disable-next-line n/prefer-global/buffer
+  darkImageResolver?: (imageName: string) => Promise<Buffer | undefined>
   sizes: AppleDeviceSize[]
   /**
    * The padding to add to the splash screen.
@@ -124,6 +133,8 @@ export interface AppleSplashScreens {
 }
 
 export interface ResolvedAppleSplashScreens {
+  // eslint-disable-next-line n/prefer-global/buffer
+  darkImageResolver?: (imageName: string) => Promise<Buffer | undefined>
   padding: number
   sizes: AppleDeviceSize[]
   linkMediaOptions: Required<AppleTouchStartupImageOptions>