Theming

[アーティクル]
03/21/2023

テーマは、ページ上のすべてのコンポーネントに一貫した外観を適用できるメカニズムです。つまり、今のところはページ全体で配色を共有することを意味します。

Note

テーマ JSON オブジェクトは、色のセットを含むコードブロックです。 Creator Kit コンポーネントは、特に Fluent テーマデザイナーアプリで生成されたテーマコードブロックを受け入れ、色の値をコンポーネントプロパティにマップするように設計されています。オブジェクトを変数としてアプリに保存します (次の手順で説明します)。テーマ JSON オブジェクトは、キットコンポーネントで簡単に参照できるように設計されていますが、キット外のコンポーネントでもこれらの値を参照できるため、すべてのアプリコンポーネント間で一貫性を簡単に維持できます。

テーマの生成

Fluent テーマデザイナーアプリを使用して (CreatorKitReferences(Canvas) ソリューションで提供) を使用して、Creator Kit コンポーネントで参照できるテーマ JSON オブジェクトを生成します。

Fluent テーマデザイナ― アプリを再生します。
プライマリの色、テキストの色、背景色の値を変更します。
右上隅から テーマのエクスポート を選択し、テーマ JSON の Power Fx 式バージョンを生成し、パネルから値をコピーします。
テーマをグローバル変数としてアプリに保存します (次のセクション)。

テーマの設定

以下の Power Fx 式は、Fluent UI テーマデザイナーアプリからの出力を使用してグローバル変数を設定する方法の例です。この変数は、アプリ内のすべてのコンポーネントから参照できます。

この Power Fx 式を配置して、アプリの OnStart プロパティで実行する。
/* THEME OBJECT */ コンテンツ間の値をデザイナーからのテーマオブジェクトに置き換えます。

Set(
    AppTheme,
    /* START THEME OBJECT */
    {
        palette: {
            themePrimary: "#0078d4",
            themeLighterAlt: "#eff6fc",
            themeLighter: "#deecf9",
            themeLight: "#c7e0f4",
            themeTertiary: "#71afe5",
            themeSecondary: "#2b88d8",
            themeDarkAlt: "#106ebe",
            themeDark: "#005a9e",
            themeDarker: "#004578",
            neutralLighterAlt: "#faf9f8",
            neutralLighter: "#f3f2f1",
            neutralLight: "#edebe9",
            neutralQuaternaryAlt: "#e1dfdd",
            neutralQuaternary: "#d0d0d0",
            neutralTertiaryAlt: "#c8c6c4",
            neutralTertiary: "#a19f9d",
            neutralSecondary: "#605e5c",
            neutralPrimaryAlt: "#3b3a39",
            neutralPrimary:"#323130",
            neutralDark: "#201f1e",
            black: "#000000",
            white: "#ffffff"
        }
    }
    /* END THEME OBJECT */
);
Set(
    AppThemeJson,
    JSON(
        AppTheme,
        JSONFormat.IndentFour
    )
);

Creator Kit コンポーネントからのテーマの参照

テーマは、それぞれのコンポーネントの Theme プロパティに渡すことができます。

キャンバス コンポーネントは、AppTheme 変数を参照する必要があります。
コード コンポーネントは、AppThemeJson 変数を参照する必要があります。

Power Apps コンポーネントからのテーマの参照

キャンバスアプリまたはカスタムページのコアコンポーネントはいずれも、AppTheme オブジェクト (JSON 形式にすることはできません) からの要素を参照できます。これらのコントロールは、必要な palette プロパティを参照する必要があり、ColorValue() 式を使用して色のデータ型としてキャストできます。

例 Button。テーマのプライマリカラーを参照する Fill Power Fx 式:

ColorValue(AppTheme.palette.themePrimary)

次の方法で共有