本文為英文版的機器翻譯版本，如內容有任何歧義或不一致之處，概以英文版為準。

自訂 Amazon Quick Sight 內嵌儀表板和視覺效果的外觀和風格

您可以使用 Amazon Quick Sight 內嵌 SDK (2.5.0 版及更高版本），在執行時間變更內嵌 Amazon Quick Sight 儀表板和視覺效果。執行時間它們可讓您更輕鬆地將軟體即服務 (SaaS) 應用程式與 Amazon Quick Sight 內嵌資產整合。執行期它們可讓您將內嵌內容的主題與內嵌 Amazon Quick Sight 資產的父應用程式主題同步。您也可以使用執行時期佈景主題設定，為讀者新增自訂選項。佈景主題設定變更可在初始化時或嵌入式儀表板或視覺效果的整個生命週期內套用至嵌入式資產。

如需有關佈景主題的詳細資訊，請參閱在 Amazon Quick Sight 中使用佈景主題。如需使用 Amazon Quick Sight 內嵌 SDK 的詳細資訊，請參閱 GitHub 上的 amazon-quicksight-embedding-sdk。

先決條件

開始使用之前，請確定已滿足下列必要先決條件。

術語與概念

下列術語在使用嵌入執行時期佈景主題設定時非常實用。

設定

請確定您已準備好下列資訊，以開始使用執行時期佈景主題設定。

SDK 方法界面

Setter 方法

下表說明開發人員可用於執行時期佈景主題設定的不同 Setter 方法。

初始化使用佈景主題的嵌入式內容

若要初始化使用非預設佈景主題的嵌入式儀表板或視覺效果，請在 DashboardContentOptions 或 VisualContentOptions 參數上定義 themeOptions 物件，並將 themeOptions 中的 themeArn 屬性設定為所需的佈景主題 ARN。

下列範例會使用 MIDNIGHT 佈景主題初始化嵌入式儀表板。

import { createEmbeddingContext } from 'amazon-quicksight-embedding-sdk';

const embeddingContext = await createEmbeddingContext();

const {
    embedDashboard,
} = embeddingContext;

const frameOptions = {
    url: '<YOUR_EMBED_URL>',
    container: '#experience-container',
};
const contentOptions = {
    themeOptions: {
        themeArn: "arn:aws:quicksight::aws:theme/MIDNIGHT"
    }
};

// Embedding a dashboard experience
const embeddedDashboardExperience = await embedDashboard(frameOptions, contentOptions);

初始化使用佈景主題覆寫的嵌入式內容

開發人員可以使用佈景主題覆寫，在執行時期定義嵌入式儀表板或視覺效果的佈景主題。這可讓儀表板或視覺效果從第三方應用程式繼承佈景主題，而不需要在 Amazon Quick Sight 中預先設定佈景主題。若要初始化使用佈景主題覆寫的嵌入式儀表板或視覺效果，請在 DashboardContentOptions 或 VisualContentOptions 參數中的 themeOptions 內設定 themeOverride 屬性。下列範例會將儀表板佈景主題的字型從預設字型覆寫為 Amazon Ember。

import { createEmbeddingContext } from 'amazon-quicksight-embedding-sdk';

const embeddingContext = await createEmbeddingContext();

const {
    embedDashboard,
} = embeddingContext;

const frameOptions = {
    url: '<YOUR_EMBED_URL>',
    container: '#experience-container',
};
const contentOptions = {
    themeOptions: {
        "themeOverride":{"Typography":{"FontFamilies":[{"FontFamily":"Comic Neue"}]}}
    }
};

// Embedding a dashboard experience
const embeddedDashboardExperience = await embedDashboard(frameOptions, contentOptions);

初始化使用預先載入佈景主題的嵌入式內容

開發人員可以設定一組要在初始化時預先載入的儀表板佈景主題。這對於在不同檢視 (例如深色和淺色模式) 之間快速切換最有益處。嵌入式儀表板或視覺效果進行初始化時最多可使用 5 個預先載入佈景主題。若要使用預先載入佈景主題，請在 DashboardContentOptions 或 VisualContentOptions 中設定 preloadThemes 屬性，陣列最多可達 5 個 themeArns。下列範例會將 Midnight 和 Rainier 入門佈景主題預先載入到儀表板。

import { createEmbeddingContext } from 'amazon-quicksight-embedding-sdk';

const embeddingContext = await createEmbeddingContext();

const {
    embedDashboard,
} = embeddingContext;

const frameOptions = {
    url: '<YOUR_EMBED_URL>',
    container: '#experience-container',
};
const contentOptions = {
    themeOptions: {
        "preloadThemes": ["arn:aws:quicksight::aws:theme/RAINIER", "arn:aws:quicksight::aws:theme/MIDNIGHT"]
    }
};

// Embedding a dashboard experience
const embeddedDashboardExperience = await embedDashboard(frameOptions, contentOptions);