动态主题离子问题答案

【问题标题】：Dynamic Theming Ionic Issue动态主题离子问题
【发布时间】：2019-01-02 08:14:32
【问题描述】：

我正在使用 Ionic 和 Angular 来开发应用程序。我引入了动态主题，将两个.scss 文件添加到我的theme 文件夹中。我有app.scss，我只定义了我的组件的布局，没有颜色。所有颜色都在theme-*.scss 文件中。为了应用主题，我在<ion-nav> 元素上使用了一个类到我的app.html 中。像这样的：

<div [class]="selectedTheme">
  <ion-nav [root]="rootPage" ></ion-nav>
</div>

selectedTheme 是一个假定我的主题名称的字符串，因此当我使用 (click) 或 (ionChange) 等事件更改它时，我可以更改我的应用程序的颜色。

文件theme-*.scss 具有以下结构：

.dark-theme {
  ion-header {
    //colors
  }
  ion-content {
    //colors
  }
}

这种方法很有效，但我有一个小问题要避免。我在app-components.ts 文件的constructor 中设置了默认主题，位于隐藏启动画面的著名platform.ready().then(...) 之前。我的问题是，当闪屏隐藏时，我可以看到我的应用程序的布局，但没有应用正确的主题。我在短时间内看到所有白色背景和所有黑色，然后应用默认主题。我在variables.scss 中导入我的自定义主题，我也尝试在app.scss 中导入它们，但行为保持不变。似乎在导入主题之前，它会在app.scss 中应用布局，并且只有在它应用导入的主题及其所有颜色之后。有人已经看到过类似的东西吗？

【问题讨论】：

我对您的确切问题感到困惑。 1。正确的组件，错误的主题 2. 没有组件，只有白色背景和黑色。 你的状态是什么？
启动时，闪屏会隐藏。有一会儿我可以看到我的应用程序没有主题：所有背景都是白色的，所有文本颜色都是黑色的。然后，几毫秒后应用主题。为什么它没有在 app.scss 中存在的其他 css 代码的同一时刻应用？

标签： html css angular ionic-framework theming

【解决方案1】：

我认为您的问题是由 timing of first paint 引起的，这是浏览器的一个属性。 ionic 运行的 webview 可以被视为一种浏览器。所以，会出现同样的问题。

why-first-paint-is-happening-before-domcontentloaded 是与您的问题相关的一个很好的解释。

本页讨论第一次绘制可以在 DOM 完全加载之前开始。

特别是，链接中以下引用的段落描述了您的应用程序的相同现象。

例如解析器显然不能在处理之前发出 Element 节点它的所有属性，但它可以在仍在处理的同时发出节点它的子树。并且渲染器可以在没有节点的情况下渲染节点孩子们。它可能会以不完整的样式呈现，仅用于稍后进行回流，例如当javascript插入另一种样式时表或仅仅因为尚未插入的子节点影响它的渲染方式。

总之，你不能保证 DOM 是在绘制之前加载的。所以，我认为实用的解决方案是稍后隐藏你的启动画面。

【讨论】：