Currently, I am using Ionic in combination with Angular to create an App. I have introduced dynamic theming by adding two .scss files into my theme folder. In my app.scss file, I define the layout of components without colors, while all color styles are stored in the theme-*.scss files. To implement a theme change, I utilize a class on the ion-nav element within my app.html file, as shown below:
<div [class]="selectedTheme">
<ion-nav [root]="rootPage" ></ion-nav>
</div>
The selectedTheme variable is a string that corresponds to the name of the theme. By triggering an event like (click) or (ionChange), I can seamlessly switch the color scheme of my app.
A typical theme-*.scss file has the structure depicted below:
.dark-theme {
ion-header {
//colors
}
ion-content {
//colors
}
}
This method works effectively, but there is a minor issue that I would like to resolve. I set the default theme in the constructor function of app-components.ts prior to the execution of platform.ready().then(...) function, which conceals the splashscreen. The problem arises when the splashscreen disappears and for a brief moment, I observe my app's layout with white backgrounds and black colors before the correct theme is applied. Despite attempting to import the custom themes in variables.scss and app.scss, the behavior remains consistent. It appears that the layout defined in app.scss is being applied first, followed by the imported theme along with its colors. Has anyone encountered a similar situation?