テーマのカスタマイズ
Ionic は、アプリケーション全体のデフォルトテーマを変更するために、コンポーネント全体で使用できるいくつかのグローバル変数を提供します。次のセクションでは、さまざまなテーマ変数を用途別に分類しています: Application Colors, Stepped Colors
アプリケーションの配色
アプリケーションカラーは、Ionic の複数の場所で使用されています。これらは、ブランドにマッチしたダークパレットやテーマを簡 単に作成するのに便利です。
背景とテキストの色変数は、RGB である必要があります: rgb format. なぜ rgb
プロパティも必要であるかは The Alpha Problem をご覧ください。
Name | Description |
---|---|
--ion-background-color | Background color of the entire app |
--ion-background-color-rgb | Background color of the entire app, rgb format |
--ion-text-color | Text color of the entire app |
--ion-text-color-rgb | Text color of the entire app, rgb format |
--ion-backdrop-color | Color of the Backdrop component |
--ion-backdrop-opacity | Opacity of the Backdrop component |
--ion-overlay-background-color | Background color of the overlays |
--ion-border-color | Border color |
--ion-box-shadow-color | Box shadow color |
--ion-tab-bar-background | Background of the Tab Bar |
--ion-tab-bar-background-focused | Background of the focused Tab Bar |
--ion-tab-bar-border-color | Border color of the Tab Bar |
--ion-tab-bar-color | Color of the Tab Bar |
--ion-tab-bar-color-selected | Color of the selected Tab Button |
--ion-toolbar-background | Background of the Toolbar |
--ion-toolbar-border-color | Border color of the Toolbar |
--ion-toolbar-color | Color of the components in the Toolbar |
--ion-toolbar-segment-color | Color of the Segment Buttons in the Toolbar |
--ion-toolbar-segment-color-checked | Color of the checked Segment Buttons in the Toolbar |
--ion-toolbar-segment-background | Background of the Segment Buttons in the Toolbar |
--ion-toolbar-segment-background-checked | Background of the Segment Buttons in the Toolbar |
--ion-toolbar-segment-indicator-color | Color of the Segment Button indicator in the Toolbar |
--ion-item-background | Background of the Item |
--ion-item-border-color | Border color of the Item |
--ion-item-color | Color of the components in the Item |
--ion-placeholder-color | Color of the placeholder in Inputs |
ステップカラー
Ionic テーマをカスタマイズするためのさまざまな方法を検討した結果、1 つの背景色またはテキスト色しか使用できないことがわかりました。デザイン全体を通して重要性と深度を暗示するためには、背景色とテキスト色の色合いを変える必要があります。このパターンに対応するために、ステップカラーを作成しました。
background 変数(--ion-background-color)とtext変数(--ion-text-color
)を更新すると、ほとんどのコンポーネントでアプリの見た目が変わりますが、特定の Ionic コンポーネントでは見た目が崩れたり、壊れたりすることがあります。これは、暗いパレットを適用するとより明らかになります。
一部のコンポーネントでは、背景よりも暗い、またはテキストよりも明るい色合いを使用しています。たとえば、item の見出しテキストは、私たちのデフォルトのテキストカラーよりも数段階明るい色である #404040
になります。一方、ローディングコンポーネントの背景は白よりも濃い色 #f2f2f2
になります。私達はこれらのわずかな変化を定義するために、ステップカラーを利用します。アプリケーションの背景色やテキストの色を更新するときは、ステップカラーを更新することが重要です。
Ionic では、テキストカラーと背景カラーを別々に更新できるように、別々のステップカラーを提供しています。これは、テキストと背景の両方のステップカラーを使用するコンポーネントに便利で、ハイコントラストパレットを効果的に実装できます。
デフォルトでは、Ionic の段階的なテキストカラーは、デフォルトのテキストカラー値#000000
から始まり、背景カラー値#ffffff
と増加するパーセンテージで混合します。Ionic の背景の段階的な色は、デフォルトの背景色値 #ffffff
から始まり、増加する割合でテキスト色値 #000000
と混ざります。ステップカラーの完全なリストは、以下のジェネレータに示されています。
Stepped Color Generator
アプリのカスタム背景色とテキスト色のテーマを作成します。以下の背景色またはテキスト色の 16 進数値を更新し、生成されたコードを Ionic プロジェクトに直接コピー&ペーストしてください。
Background
Text
:root {
--ion-background-color: #ffffff
;
--ion-background-color-rgb: 255,255,255
;
--ion-text-color: #000000
;
--ion-text-color-rgb: 0,0,0
;
--ion-text-color-step-50: #0d0d0d
;
--ion-text-color-step-100: #1a1a1a
;
--ion-text-color-step-150: #262626
;
--ion-text-color-step-200: #333333
;
--ion-text-color-step-250: #404040
;
--ion-text-color-step-300: #4d4d4d
;
--ion-text-color-step-350: #595959
;
--ion-text-color-step-400: #666666
;
--ion-text-color-step-450: #737373
;
--ion-text-color-step-500: #808080
;
--ion-text-color-step-550: #8c8c8c
;
--ion-text-color-step-600: #999999
;
--ion-text-color-step-650: #a6a6a6
;
--ion-text-color-step-700: #b3b3b3
;
--ion-text-color-step-750: #bfbfbf
;
--ion-text-color-step-800: #cccccc
;
--ion-text-color-step-850: #d9d9d9
;
--ion-text-color-step-900: #e6e6e6
;
--ion-text-color-step-950: #f2f2f2
;
--ion-background-color-step-50: #f2f2f2
;
--ion-background-color-step-100: #e6e6e6
;
--ion-background-color-step-150: #d9d9d9
;
--ion-background-color-step-200: #cccccc
;
--ion-background-color-step-250: #bfbfbf
;
--ion-background-color-step-300: #b3b3b3
;
--ion-background-color-step-350: #a6a6a6
;
--ion-background-color-step-400: #999999
;
--ion-background-color-step-450: #8c8c8c
;
--ion-background-color-step-500: #808080
;
--ion-background-color-step-550: #737373
;
--ion-background-color-step-600: #666666
;
--ion-background-color-step-650: #595959
;
--ion-background-color-step-700: #4d4d4d
;
--ion-background-color-step-750: #404040
;
--ion-background-color-step-800: #333333
;
--ion-background-color-step-850: #262626
;
--ion-background-color-step-900: #191919
;
--ion-background-color-step-950: #0d0d0d
;
}