Apply custom theme to visuals in powerbi-embedded

Question

I have an embedded report in which I want to set the theme of the visuals according to the even and odd number of visuals.Can anyone suggest how can I apply the theme to the visuals ?

Answer 1

To apply themes to the visuals, please find the below code snippet:

Create customized themes:

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

Get the number of visuals:

 const visuals = await page.getVisuals();
        const num_of_visuals = visuals.length;

Use applyTheme API to apply themes to visuals:

// Apply the custom theme for even number of visuals
if(num_of_visuals % 2 == 0){
report.applyTheme({ themeJson: themes.find(theme => theme.name ==="light")});
}
else { // Apply the custom theme for odd number of visuals
report.applyTheme({ themeJson: themes.find(theme => theme.name === "dark") });
}

References:

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