web-dev-qa-db-fra.com

Thème sombre pour Ionic 4

Dans Ionic 3, je pouvais facilement appliquer un thème sombre à mon application en ajoutant une seule ligne à mon variables.scss:

@import "ionic.theme.dark";

Est-ce toujours possible dans Ionic 4 aussi simple que cela? Et si oui, comment?

ionic4
6
Markus

Je pense que vous devriez déclarer votre thème en variable css 

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

2
Bassam

Vous devez créer une règle dans variables.scss comme ceci:

: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;
}

La partie special de la classe est le nom du thème. Les noms qui sont déjà inclus dans les règles :root {} (par exemple, dark) ne peuvent pas être créés de cette manière.

Vous devez passer le nom du thème à l'attribut color de chaque composant ionique, comme ceci:

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

Si vous souhaitez utiliser le thème dans une balise non ionique comme un <p>, vous devez spécifier avec css la manière dont les couleurs du thème affectent votre ou vos éléments:

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

Et puis vous ajoutez juste la classe à l'élément qui doit avoir le thème:

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

Vous devez créer votre propre variable CSS. Par exemple

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

et utilisez RendererFactory2 pour plus d’informations que vous pouvez voir sur ce link

0
TehGaz7