Ionic angular app - dark mode toggle not affects part of components in iOS

Question

I'm writing Ionic app and I have some strange problem with manual selecting dark/auto/light mode but only on iOS.

So, I have page called "Settings" in my app where user can find 3 buttons for selecting color mode: Dark, Auto, Light. Clicking on any of these buttons works fine because I can see DOM changes in developer tools but color mode changes are applied only to one component on this page without refreshing it. Refresh or changing page makes color mode changes visible.

This is what happens after clicking on one of these buttons:

toggleDarkTheme = (darkMode: OptionsToggle): void => {
    this.darkModeStatus = darkMode;
    if (darkMode === OptionsToggle.on) {
        document.body.classList.toggle('dark', true);
    }
    if (darkMode === OptionsToggle.off) {
        document.body.classList.toggle('dark', false);
    }
    if (darkMode === OptionsToggle.auto) {
        const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
        document.body.classList.toggle('dark', prefersDark.matches);
        this.handleColorSchemeChangeListener(prefersDark);
    }
}

handleColorSchemeChangeListener = (prefersDark: MediaQueryList): void => {
    prefersDark.addEventListener('change', (e) => {
        if (this.darkModeStatus === OptionsToggle.auto) {
            document.body.classList.toggle('dark', e.matches);
        }
    });
};

This is example of my variables.scss file structure:

:root {
    /** some colors varialbes are here **/
}
body.dark {
    /** some colors varialbes are here **/
}

This is example of settings page component structure:

<ion-header>
    <ion-toolbar>
        <ion-buttons slot="start">
           <app-top-left-back-btn> // this component is changing its colors immediately after clicking on color mode buttons but rest of this page is still the same
           </app-top-left-back-btn>
        </ion-buttons>
        <ion-title>Settings</ion-title>
    </ion-toolbar>
    <app-tabs> // this is comopnent with tabs for ngSwitch which you can see below and after clicking button to change color mode it looks the same but if I click on any tab from this component then it is changing colors 
    </app-tabs>
</ion-header>
<ion-content>
    <ng-container [ngSwitch]="currentTab">
        <ng-container *ngSwitchCase="'user'">
            // some stuff
        </ng-container>
        <ng-container *ngSwitchCase="'app'">
            // some stuff
            <app-options-toggle (action)="setDarkMode($event)"> // this is comopnent with buttons to change color mode
            </app-options-toggle>
            // some stuff
        </ng-container>
        <ng-container *ngSwitchCase="'location'">
            // some stuff
        </ng-container>
    </ng-container>
</ion-content>

So here you can find simple example step by step of this problem:

1. User clicks on Dark, Auto or Light button
2. toggleDarkTheme() is called and changes are made correctly
3. one component of Settings page is changing its colors to match selected color mode
4. other components and elements of this page looks still the same as in previous color mode
5. clicking on any tab from component causes changes of colors of clicked element to match selected color mode
6. refreshing page, going to other page or clicking through developer tools in html elements (some magic) causes changes of colors and everything start to looks fine.

Here you can see gif which is showing behavior:

This problem appears only in iOS and it looks like DOM changes are not propagated correctly to part of html elements. When I manually add or remove class "dark" to body tag in developer tools then everything works fine.

Thanks for your help.