メインコンテンツまでスキップ
Version: v6

高度なカスタマイズ

CSSベースのテーマ設定では、CSSファイルをロードするか、いくつかのCSSプロパティ値を変更することで、アプリの配色をすばやくカスタマイズできます。

theme-color Meta

The theme-color value for a meta tag indicates a color that browsers can use to customize the display of a page or of the surrounding interface. This kind of meta tag can also accept media queries which allow developers to set the theme color for both light and dark modes.

The content value for the theme-color meta must contain a valid CSS Color and cannot contain CSS Variables.

note

The theme-color meta controls the interface theme when running in a web browser or as a PWA and has no effect when an app is deployed using Capacitor or Cordova. If you are looking to customize the area under the status bar, we recommend using the Capacitor Status Bar Plugin.

The example below demonstrates how to use theme-color to style the browser interface on iOS 15.

<meta name="theme-color" media="(prefers-color-scheme: light)" content="#3880ff" />
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#eb445a" />
Light ModeDark Mode
Application with theme-color meta in light modeApplication with theme-color meta in dark mode

The theme-color meta can also be used to customize the toolbar in Safari on macOS Monterey or newer.

Safari on iOS 15 and macOS will automatically determine an appropriate theme color to use, but adding this meta tag is useful if you need more control over the theme.

There is a small subset of colors that browsers will not use as they interfere with the browser interface. For example, setting content="red" will not work in Safari on macOS because that color interferes with the red close button in the toolbar. If you run into this situation, try altering your color selection slightly.

note

Browsers will prefer the theme-color meta over theme in manifest.json if both are present.

For more information, see the MDN theme-color documentation.

Global Variables

While the application and stepped variables in the themes section are useful for changing the colors of an application, often times there is a need for variables that are used in multiple components. The following variables are shared across components to change global padding settings and more.

Application Variables

NameDescription
--ion-font-familyFont family of the app
--ion-statusbar-paddingStatusbar padding top of the app
--ion-safe-area-topAdjust the safe area inset top of the app
--ion-safe-area-rightAdjust the safe area inset right of the app
--ion-safe-area-bottomAdjust the safe area inset bottom of the app
--ion-safe-area-leftAdjust the safe area inset left of the app
--ion-marginAdjust the margin of the Margin attributes
--ion-paddingAdjust the padding of the Padding attributes

Grid Variables

NameDescription
--ion-grid-columnsNumber of columns in the grid
--ion-grid-padding-xsPadding of the grid for xs breakpoints
--ion-grid-padding-smPadding of the grid for sm breakpoints
--ion-grid-padding-mdPadding of the grid for md breakpoints
--ion-grid-padding-lgPadding of the grid for lg breakpoints
--ion-grid-padding-xlPadding of the grid for xl breakpoints
--ion-grid-column-padding-xsPadding of the grid columns for xs breakpoints
--ion-grid-column-padding-smPadding of the grid columns for sm breakpoints
--ion-grid-column-padding-mdPadding of the grid columns for md breakpoints
--ion-grid-column-padding-lgPadding of the grid columns for lg breakpoints
--ion-grid-column-padding-xlPadding of the grid columns for xl breakpoints

Known Limitations with Variables

The Alpha Problem

16進数カラーのアルファ使用については、まだ完全なブラウザサポートはありません。rgba() 関数は、R, G, B, A (Red, Green, Blue, Alpha) のフォーマットのみ利用可能です。次のコードは、rgba()　に受け渡される正しい値と間違った値の例を示しています。

/* These examples use the same color: blueviolet. */
.broken {
  --violet: #8a2be2;

  /* rgba(#8a2be2, .5) */
  color: rgba(var(--violet), 0.5); /* ERROR! Doesn't support hex. */
}

.working {
  --violet-rgb: 138, 43, 226;

  /* rgba(138, 43, 226, .5) */
  color: rgba(var(--violet-rgb), 0.5); /* WORKS! */
}
note

See the CSS Variables section for more information on how to get and set CSS variables.

Ionicはいくつかのコンポーネントで不透明度（アルファ）を​​持つ色を使用します。これが機能するためには、それらのプロパティはRGBフォーマットで提供されなければなりません。末尾にバリエーションがあるプロパティのいずれかを変更する場合、 -rgb で終わる括弧なしのカンマ区切り形式でも提供されることが重要です。以下は、テキストと背景色を変更するための例です。

:root {
  /* These examples use the same color: sienna. */
  --ion-text-color: #a0522d;
  --ion-text-color-rgb: 160, 82, 45;

  /* These examples use the same color: lightsteelblue. */
  --ion-background-color: #b0c4de;
  --ion-background-color-rgb: 176, 196, 222;
}

RGB形式の色はhexプロパティとまったく同じ色ですが、現在は rgba() で使用できることに注意してください。例えば、--ion-text-color-rgb は以下のように利用できます。

body {
  color: rgba(var(--ion-text-color-rgb), 0.25);
}

Variables in Media Queries

メディアクエリ のCSS変数は現在サポートされていませんが、この問題を解決するcustom media queries と custom environment variablesを追加するためのオープンドラフトがあります。ただし、現在のサポート状態では、次の機能は動作しません。

:root {
  --breakpoint: 600px;
}

@media (min-width: var(--breakpoint)) {
  /* Doesn't work :( */
}

CSSカラー変数の変更

Sassの組み込み関数を使用して簡単に色を変更することは可能ですが、現在のところCSS変数で設定された色を変更するのはそれほど簡単ではありません。これは、CSSで RGB or HSL チャネルまたはHSLチャネルを分割してそれぞれの値を変更することで実現できますが、複雑で機能が不足しています。

正確に説明します。基本的に、SassなどのCSSプリプロセッサを使用すると、関数を使用して単一の色を操作できます。たとえば、Sassには次のカラーを作成できます:

// Background color, shade, and tint
$background: #3880ff;
$background-shade: mix(#000, $background, 12%);
$background-tint: mix(#fff, $background, 10%);

// Text color, darker and lighter
$text: #444;
$text-darker: darken($text, 15);
$text-lighter: lighten($text, 15);

After running through the Sass compiler, the colors will have the following values:

VariableValue
$background
#3880ff
$background-shade
#3171e0
$background-tint
#4c8dff
$text
#444444
$text-darker
#1e1e1e
$text-lighter
#6a6a6a

ただし、CSS変数は実行時に設定でき、より動的であるため、現時点では単純な関数を使用して操作することはできません。

これは通常は問題にはなりませんが、アプリケーションに動的なテーマカラーの設定が必要な場合は問題になります。Ionicでは、これが各色にバリエーションがある理由であり、テーマ設定にstepped colorsが必要な理由でもあります。

これを可能にするcolor modification proposalsを議論している草案とIssuesはこちらからご覧いただけます。

Contents

このページを編集