How to fix wrong background color when using View Transitions API in Capacitor

If you are trying to use View Transitions API with Capacitor 5, 6 or later, and you are having issue with a black background being shown while your View Transition runs, you can fix this by setting the backgroundColor in the capacitor.config.js|ts file.

For example, here is a config that sets the background color to white:

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
    appId: 'app.your.app',
    appName: 'Your App',
    webDir: 'build',
    backgroundColor: '#ffffff',
};

export default config;

You will need to rebuild and restart your app to see the new background color. See additional Capacitor docs.