How to override the dashboard area background color

[ayobamiseun]

I would like to know how I can change the background color that came with the iframe. I saw something like this embeddedDashboardExperience.setThemeOverride online, but there isn't much information regarding it.

[jiajing28]

Hi, please reference our documentation or see a real work example in this blog

[ayobamiseun]

Hi, please reference our documentation or see a real work example in this blog

Thank you; this made it more clear. I will appreciate if i can get a blog or doc on the theme names or how to set desired background color. I can only see few names, like MIDNIGHT

[nickday]

@ayobamiseun I had the same issue. You need to apply SecondaryBackground as a theme override, e.g. to change it to white:

embeddedDashboardExperience.setThemeOverride({
    UIColorPalette: {
        SecondaryBackground: '#FFFFFF',
    },
});

However while the iframe is loading (before the override is applied), it will be using the default theme (or whatever theme if you specify themeOptions.themeArn) which has a light grey background. To get round this I had a save a copy of the Classic theme in QS, change the Secondary Background to white, and then apply this theme from the outset of the embedding using themeArn.

[ayobamiseun]

@nickday I used react useEffect please how do i get this embeddedDashboardExperience.setThemeOverride will i import it; Here is how i embedded my dashboard link `const embed = async () => {

const options = {
  url: dashboardUrl,
  container: dashboardRef.current,
  height: '100%',
  width: '100%',
  background: 'red',
};

const newEmbeddedDashboard: EmbeddedDashboard = await embeddingContext.embedDashboard(options);
setEmbeddedDashboard(newEmbeddedDashboard);
setProgress(100);

}; `

[nickday]

setThemeOverride is simply a method on your EmbeddedDashboard instance - so newEmbeddedDashboard.setThemeOverride(...) should do it.

[bwelkin]

setThemeOverride action was added with 2.5.0 release.