グローバル テーマ

概要

アプリケーション プロジェクトに igniteui-angular.css ファイルを追加した場合、削除してください。my-app-theme.scss ファイルを使用してアプリケーションのすべてのコンポーネント用にグローバル テーマを生成します。

Ignite UI for Angular は、コンポーネント全体のテーマにグローバル テーマをデフォルトで使用します。アプリでユース ケースに合わせてコンポーネントにスコープしたテーマを作成できます。ここでは 1 ファイルにすべてのテーマを含みます。 グローバル テーマの生成には 2 つのミックスイン core と theme を含みます。両方のミックスインは数個の引数を受け取ります。

Core ミックスイン

Theme ミックスイン

会社のプライマリ カラー、セカンダリ カラー、サーフェス カラーを使用するカスタム グローバル テーマを作成しましょう。

// Import the theming module
@use "igniteui-angular/theming" as *;

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';

$primary-color: #2ab759;
$secondary-color: #f96a88;
$surface-color: #fff;

$my-color-palette: palette(
    $primary: $primary-color,
    $secondary: $secondary-color,
    $surface: $surface-color
);

// IMPORTANT: Make sure you always include core first!
@include core();
@include typography();
// Pass the color palette we generated to the theme mixin.
@include theme($my-color-palette);

core と theme ミックスインが何をするか説明しましょう。core ミックスインは、強化されたアクセシビリティ (色弱ユーザーに適した色など) やすべてのコンポーネントの印刷スタイルの追加など、いくつかの構成を処理します。theme ミックスインには、個々のコンポーネント スタイル (除外リストにあるものを除く) が含まれ、コンポーネントの $exclude リストにリストされていないパレット、スキーマ、エレベーション、および丸みを構成します。

コンポーネントの除外

theme ミックスインは、グローバル テーマ スタイルから除外されるコンポーネント名のリストを提供します。たとえば、igx-avatar および igx-badge に含まれるすべてのスタイルを完全に削除したい場合は (生成される CSS の量を減らすか、独自のカスタム スタイルを提供する場合)、以下のようなコンポーネントのリストを渡すことで可能です。

// ...
$unnecessary: (igx-avatar, igx-badge);

@include theme($my-color-palette, $exclude: $unnecessary);

アプリが一部のコンポーネントを使用しない場合は、$exclude リストに追加することをお勧めします。

逆を行うことができます - 以下の方法を使用して、必要なコンポーネント スタイルのみを含めます。

@use 'sass:map';

@function include($items, $register) {
    @return map.keys(map.remove($register, $items...));
}

$allowed: (igx-avatar, igx-badge);

@include theme(
    $exclude: include($allowed, $components)
);

明暗テーマ (Light/Dark)

また、Material、Fluent、Indigo、Bootstrap の 4 つのテーマには、light バージョンと dark バージョンも用意されています。

いずれかのバージョンを使用するには、theme ミックスインに渡すだけです。

Light

@include core();
@include typography(
    $font-family: $material-typeface,
    $type-scale: $material-type-scale
);
@include theme(
    $schema: $light-material-schema,
    $palette: $light-material-palette,
);

*Dark_

@include core();
@include typography(
    $font-family: $material-typeface,
    $type-scale: $material-type-scale
);
@include theme(
    $schema: $dark-material-schema,
    $palette: $dark-material-palette,
);

使用可能なテーマ

Ignite UI for Angular には、事前定義されたテーマのセットから選択するオプションがあります。 以下の表では、すぐに使用できるすべての定義済みテーマを示します。

その他のリソース

各コンポーネント テーマの作成する方法:

• コンポーネント テーマ

コミュニティに参加して新しいアイデアをご提案ください。

• Ignite UI for Angular フォーラム (英語)
• Ignite UI for Angular GitHub (英語)