Dynamic Theming Ionic Issue - html

Question

I'm using Ionic with Angular to develop an App. I intruduced dynamic theming adding two .scss files into my theme folder. I've got app.scss where I define only the layout of my components without colors. All colors are in the theme-*.scss files. To apply a theme I use a class over <ion-nav> element into my app.html. Something like this:
<div [class]="selectedTheme">
<ion-nav [root]="rootPage" ></ion-nav>
</div>
The selectedTheme is a string that assume the name of my theme so when I change it with an event such (click) or (ionChange) I can change the colours of my app.
A file theme-*.scss has the following structure:
.dark-theme {
ion-header {
//colors
}
ion-content {
//colors
}
}
This way works like a charm, but I've got a little issue I want to avoid. I set the default theme in constructor of app-components.ts file, before the famous platform.ready().then(...) that hides the splashscreen. My issue is that when the splashscreen hides I can see my app with its layout but without the correct theme applied. I see all white backgrounds and all black colors for a small amount of time, then the default theme is applied. I'm importing my custom themes in variables.scss, I tried to import them also in app.scss but the behaviour remain the same. It seem that before import the themes it applies the layout in app.scss and only after it applies the imported theme with all its colours. Someone has already see something like this?

Answer 1

I think that your issue is caused by timing of first paint which is an attribute on browsers. The webview where ionic runs can be consider as a sort of browser. So, same issue occurs.
why-first-paint-is-happening-before-domcontentloaded is a great explanation related to your question.
This page talks about first paint can start before DOM is fully loaded.
Especially, the below cited paragraph from the link describes same phenomenon of your app.
E.g. the parser obviously cannot emit Element nodes before processing
all of its attributes, but it can emit the node while still processing
its child tree. And the renderer may render the node without its
children. And it may be rendered with incomplete styles only to
undergo a reflow later, e.g. when javascript inserts another style
sheet or simply because the child nodes which have yet to be inserted
affect how it will be rendered.
In conclusion, you can not guarantee DOM is loaded before painting. So, I think that practical solution is hiding your splash screen a little bit later.