Dark mode support in splash-screen generator

[Off2Race]

I'd like to be able to generate the assets for a dark mode splash screen along side the "normal" light mode assets.

Currently, I can call npx ignite-cli generate splash-screen and the generator will read logo.png from ignite/templates/splash-screen and output the necessary assets to assets/images. That will work whether logo.png is the image I want to use for light mode or dark mode. The trouble is that if I do one it will overwrite the other and vice versa. I'd like to be able to generate both sets of assets at the same time so I can reference them from my expo app.json

I suggest adding a --dark parameter that would tell the generate to read logo-dark.png, output assets that start with "splash-logo-dark" instead of "splash-logo," and update app.json accordingly. But there might be other possible solutions.

I'm happy to take a shot at adding this myself and sending a PR. But I thought it would be wise to make sure something like this wasn't already in the works. And that the solution I suggested above is a valid design.

Thanks!

[frankcalise]

@Off2Race hey, thanks for the post! this isn't already in the works, so if you'd like to give it a go yourself we'd be happy to review a PR

[rsoaresdev]

@Off2Race you can do it manually by changing the app.json file:

"plugins": [
  "expo-localization",
  "expo-font",
  [
    "expo-splash-screen",
    {
      "backgroundColor": "#FFFFFF",
      "image": "./assets/images/splash-icon.png",
      "dark": {
        "image": "./assets/images/splash-icon-dark.png",
        "backgroundColor": "#000000"
      },
      "imageWidth": 200
    }
  ]
],

[Off2Race]

Hi, @frankcalise – Thanks for the response. I decided for the time being to use the same logo for both light and dark mode but this sounds like a fun challenge. I'll give it a shot.

Hi, @rsoaresdev – The issue is not the Expo config. If I generate the splash screen assets manually, I'm sure that works. Instead, I want to continue to use the Ignite CLI to generate the assets for me and update the app.json accordingly. We do that for light mode assets. I'd like for it to handle both light and dark mode.