スタイルとテーマ

    Grid Lite には、Bootstrap、Material、Fluent、Indigo の 4 つのテーマが用意されています。グリッドおよび UI コンポーネントにはテーマが組み込まれていますが、パレット、タイポグラフィ、その他のグローバル設定にはグローバル スタイルシートが必要です。

    基本テーマの読み込み

    プロジェクトのタイプ、セットアップ、ビルド構成に応じて、以下のいずれかのファイルを組み込む方法が異なります。フレームワーク/ビルドツールを使用している場合は、外部スタイルを出力バンドルに追加する方法についてドキュメントを参照してください。

    原則として、themes フォルダーをアセット ディレクトリにコピーし、index.html からテーマをリンクするだけで構いません。

    <link rel="stylesheet" href="./assets/themes/light/bootstrap.css"
    テーマ バリアント パス
    Bootstrap Light node_modules/igniteui-webcomponents/themes/light/bootstrap.css
    Bootstrap Dark node_modules/igniteui-webcomponents/themes/dark/bootstrap.css
    Material Light node_modules/igniteui-webcomponents/themes/light/material.css
    Material Dark node_modules/igniteui-webcomponents/themes/dark/material.css
    Fluent Light node_modules/igniteui-webcomponents/themes/light/fluent.css
    Fluent Dark node_modules/igniteui-webcomponents/themes/dark/fluent.css
    Indigo Light node_modules/igniteui-webcomponents/themes/light/indigo.css
    Indigo Dark node_modules/igniteui-webcomponents/themes/dark/indigo.css

    カスタム テーマの作成

    igniteui-grid-lite パッケージに同梱のデフォルト テーマ以外に、プロジェクトのアイデンティティやブランディングに合わせて独自のテーマを作成・変更できます。

    SCSS と CSS インターフェイスの両方のドキュメントと使用方法については、Ignite UI テーマ パッケージ wiki を参照してください。

    @use 'node_modules/igniteui-theming' as *;

// Our dark theme
$my_dark_palette: palette(
  $primary: #dab785,
  $secondary: #d5896f,
  $surface: #031d44,
  $gray: #04395e,
);

// Our light theme
$my-light-palette: palette(
  $primary: #c1292e,
  $secondary: #f1d302,
  $surface: #fdfffc,
  $gray: #235789,
);

.custom-light {
  @include palette($my_light_palette);
  @include typography('"Roboto Condensed", sans-serif', $bootstrap-type-scale);
}

.custom-dark {
  @include palette($my_dark_palette);
  @include typography('"Merriweather Sans", sans-serif', $bootstrap-type-scale);
}

    以下は、上記のカスタム テーマの例です。

    その他のリソース

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