Темная тема для Ionic 4

Question

В Ionic 3 я мог бы легко применить темную тему к своему приложению, добавив всего одну строку к своему variables.scss:

@import "ionic.theme.dark";

Возможно ли это в Ionic 4 так просто?И если да, то как?

Answer 1

Вы должны сделать свою собственную переменную CSS.В качестве примера

:root {
  .red-theme {
    // your colors --ion-color-primary etc
  }
}

и используйте RendererFactory2 для получения дополнительной информации, которую вы можете увидеть по этой ссылке

Answer 2

Вы должны создать правило в variables.scss следующим образом:

:root {
  ...
}

.ion-color-special {
  --ion-color-base: #faa;
  --ion-color-base-rgb: 38, 36, 58;
  --ion-color-contrast: #ffffff;
  --ion-color-contrast-rgb: #ffffff;
  --ion-color-shade: #100f19;
  --ion-color-tint: #493535;
}

Часть класса special является названием темы.Имена, которые уже включены в правила :root {} (например, dark), не могут быть созданы таким образом.

Вы должны передать имя темы атрибуту color каждого ионного компонента.например:

<ion-button color="special">Press me</ion-button>

Если вы хотите использовать тему в неионном теге, например <p>, вам нужно указать css, как цвета темы влияют на ваш элемент или элементы:

p {
  background: var(--ion-color-base);
  color: var(--ion-color-contrast);
}

А затем вы просто добавляете класс к элементу, который должен иметь тему:

<p class="ion-color-special">Lorem ipsum</p>

Answer 3

Я думаю, вы должны объявить свою тему в переменной css

https://beta.ionicframework.com/docs/theming/color-generator