web-dev-qa-db-ja.com

Ionic 4のダークテーマ

Ionic 3では、variables.scssに1行追加するだけでアプリにダークテーマを簡単に適用できます

@import "ionic.theme.dark";

Ionic 4はそれと同じくらい簡単ですか？そしてもしそうなら、どのように？

ionic4
11
Markus

テーマを変数cssで宣言する必要があると思います

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

3
Bassam

次のように、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）は、この方法では作成できません。

次のように、各ionicコンポーネントの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>
1
David Villamizar

独自のCSS変数を作成する必要があります。例として

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

この上で見ることができる詳細については、RendererFactory2を使用してください link

0
TehGaz7