Editing theme / CSS of embed type "qna"

[Phidso]

Hi All!

Is it possible to change the styling of a "qna" embed?

I'm trying to provide custom CSS / theming to a "qna" type embed but nothing gets applied.

I've tried applying via theme key in the config but doesn't work. e.g.

config = {type: "qna",viewMode: models.QnaMode["ResultsOnly"] tokenType: models.TokenType.Embed, theme:{background:"#efefef"...

I've also tried using the function "applyTheme" but doesn't seem to exist for Qna?

 e.g qna.applyTheme({ themeJson:theme});

I can't apply CSS directly as the embed is through a virtual element in an iframe element (#document).

[Phidso]

Thanks @v-yiruan-msft for the response!

I have already tried these solutions please see my original post.

Q&A in Power BI embedded analytics - this link contains no information on applying a style/theme to a qna widget only to reports.

Apply a theme to a report - As already stated in my original post, the 'theme' key and applyTheme function do not work with qna widget.

Override body style for content in an iframe - the file in the iframe is loaded from https://app.powerbi.com/qnaEmbed?groupId=----&uid=--- which is not the same domain. It is impossible to access the DOM of the document from the parent.

[v-yiruan-msft]

Hi @Phidso ,

Please review the following links, hope they can help you.

Q&A in Power BI embedded analytics

Apply a theme to a report

// Parse the theme JSON file into an object
let themeJsonObject = parseJsonfile(path);
let embedConfig = {
    …
    theme: {
        themeJson: themeJsonObject
    }
};

let report = powerbi.embed(embedContainer, embedConfig);

Override body style for content in an iframe

---

An iframe is a 'hole' in your page that displays another web page inside of it. The contents of the iframe is not in any shape or form part of your parent page.

As others have stated, your options are:

• give the file that is being loaded in the iframe the necessary CSS
• if the file in the iframe is from the same domain as your parent, then you can access the DOM of the document in the iframe from the parent.

Best Regards