Я использую 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
}
}
Этот способ работает как шарм, но у меня есть небольшая проблема, которую я хочу избежать. Я установил тему по умолчанию в constructor файла app-components.ts перед знаменитым platform.ready().then(...), который скрывает заставку. Моя проблема в том, что когда экран-заставка скрывается, я вижу свое приложение с его макетом, но без применения правильной темы. Я вижу весь белый фон и все черные цвета в течение небольшого промежутка времени, затем применяется тема по умолчанию. Я импортирую свои пользовательские темы в variables.scss, я пытался импортировать их и в app.scss, но поведение остается прежним. Кажется, что перед импортом тем он применяет макет в app.scss и только после этого применяет импортированную тему со всеми ее цветами. Кто-то уже видел что-то подобное?
