swift – IOS – Make Non-Clear Standing Bar Capacitor & Subsequent.JS

I’ve a IOS software that was created from a subsequent.js web site utilizing Capacitor.

I’ve the folling capacitor configuration:

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

const config: CapacitorConfig = {
    appId: 'identify.app',
    appName: 'app identify',
    webDir: 'public',
    server: {
        url: 'https://www.appURL.com',
        cleartext: true,
    },
    ios: {
        contentInset: 'automated',
    },
    plugins: {
        StatusBar: {
            type: 'DARK',
            backgroundColor: '#ffffff',
        },
    },
};

export default config;

I additionally intialise it in my _app.js file like this:

import 'normalize.css';
import '@types/bootstrap.css';
import React, { useEffect } from 'react';
import '@types/snipcart.css';
import '@fortawesome/fontawesome-free/css/all.min.css';
import 'nprogress/nprogress.css';
import '@types/siteV3.css';
import { SSRProvider } from '@react-aria/ssr';
import { StatusBar, Model } from '@capacitor/status-bar';

operate MyApp({ Part, pageProps }) {
    useEffect(() => {
        const setStatusBar = async () => {
            strive {
                await StatusBar.setStyle({ type: Model.Darkish });
                await StatusBar.setBackgroundColor({ shade: '#ffffff' });
                // Ensures the standing bar is just not clear
                await StatusBar.present();
            } catch (error) {
                console.error('Error setting standing bar:', error);
            }
        };

        // Solely initialize the standing bar if operating on a local platform
        if (typeof window !== 'undefined' && window.Capacitor) {
            setStatusBar();
        }
    }, []);

    return (
        <SSRProvider>
            <Part {...pageProps} />
        </SSRProvider>
    );
}

export default MyApp;

The place of the app content material is now excellent, however once I scroll the you’ll be able to see the content material contained in the standing bar.

I would like the standing bar to be NON-transparent so its only a stable color.

What am I lacking, how can this be carried out?