Dynamic Theming Ionic Issue

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?

I am confused about what your exact issue is. **1. proper component , wrong theme 2. no component and just white background and black color.** What is your state? — Hyuck Kang, Jul 25 '18 at 15:09
On start up, the splashscreen hides. For a moment I can see my app with no theme: all backgrounds are white, and all text colors are black. Then, after some milliseconds the theme is applied. Why it isn't applied in the same moment of the other css code present in app.scss? — james watt, Jul 25 '18 at 15:15

score 0 · Answer 1 · answered Jul 25 '18 at 16:50

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.

Dynamic Theming Ionic Issue

1 Answers1