Theme Prop

[DigitalMystery]

On the IEmbedConfiguration I am trying to use the theme property.

export interface IEmbedConfiguration extends IEmbedConfigurationBase { id?: string; settings?: ISettings; pageName?: string; filters?: IFilter[]; pageView?: PageView; datasetId?: string; permissions?: Permissions; viewMode?: ViewMode; action?: string; dashboardId?: string; height?: number; width?: number; theme?: IReportTheme; slicers?: ISlicer[]; bookmark?: IApplyBookmarkRequest; datasetBinding?: IDatasetBinding; contrastMode?: ContrastMode; eventHooks?: EventHooks; }

There are several items to note here. The property is of type IReportTheme. If you navigate to the model it's interface is empty. I do see that ICustumTheme is an interface which inherits IReportTheme and does have a property named themeJson.

export interface IReportTheme { }

export interface ICustomTheme extends IReportTheme { themeJson: any; }

I assume this is what is ultimately needed. In the models I did manually switch the theme property to ICustumTheme to see if it would work, to no avail. I also see the @deprecated commented above the IEmbedConfiguration so thoroughly confused here.

Is switching themes not supported yet or is it a small miss configuration of the properties?

I would be glad to help if its a small configuration issue, but I'm unsure of the correct implementation.

[KotanaSai21]

// Create a theme
const themeObj: models.IReportTheme  = {
    "name": "Sample Theme",
    "dataColors": ["#990011", "#cc1144", "#ee7799", "#eebbcc", "#cc4477", "#cc5555", "#882222", "#A30E33"],
    "background": "#FF0000",
    "foreground": "#007799",
    "tableAccent": "#990011"
};

Now at the time of Embedding you can pass this as prop to apply theme on Load

// Update the reportConfig to embed the PowerBI report
        setReportConfig({
            ...sampleReportConfig,
            embedUrl: reportConfig.EmbedUrl,
            accessToken: reportConfig.EmbedToken.Token,
            theme: {
                themeJson: themeObj
            }
        });

You can also Use Api applyTheme and apply the theme to report at runtime. await report.applyTheme({ themeJson: themeObj });

Note: We can apply theme for embedding report and not to paginated reports

References: https://learn.microsoft.com/javascript/api/overview/powerbi/apply-report-themes