Power BI Custom theme file is not getting applied with Angular

Question

We are using pbi-client to embed pbi report in our angular app. We are passing custom theme file with embed configuration as well as we tried to apply it on the pbi report load. It seems custom theme file is not getting override the default theme of pbi. Please find below code:

1. theme file with embed config:

const embedConfig = { type: 'report', embedUrl: embedUrl + '?' + 'xxxxId=' + xxxxId + '&yyyyId=' + yyyyId, accessToken: embedToken, permissions: models.Permissions.All, tokenType: models.TokenType.Embed, theme: {themeJson: powerbiTheme}, viewMode: models.ViewMode.View }; 2. theme file after report load: self.report.applyTheme({theme:powerbiTheme});

Answer 1

Please follow the below code snippets to apply custom theme to the Power BI report:

• To apply theme with embedConfig:
  1. Import custom theme file like below:

   const theme = require("../custom-theme.json");

  2. Assign the theme to themeJson property of theme property in embedConfig object:

   embedConfig: IReportEmbedConfiguration = { type: "report", embedUrl: "EMBED URL", tokenType: models.TokenType.Embed, accessToken: "ACCESS TOKEN", settings: "SETTINGS", theme: { themeJson: theme } };

• To apply theme after report load, Use:
  1. Import custom theme file like below:

   const theme = require("../custom-theme.json");

  2. In any method:

   self.report.applyTheme({ themeJson: theme });

Please refer docs: https://docs.microsoft.com/javascript/api/overview/powerbi/apply-report-themes