FluentThemeProvider is not respecting some of the style options

[patilravikiran]

Is it an issue related to Adaptive Cards?

No

Is this an accessibility issue?

No

What version of Web Chat are you using?

Latest production

Which distribution are you using Web Chat from?

NPM

Which hosting environment does this issue primarily affect?

PowerApps

Which browsers and platforms do the issue happened?

Others or unrelated

Which area does this issue affect?

Others or unrelated

Which theme pack does this issue affect?

Fluent UI

What is the public URL for the website?

No response

Please describe the bug

Hi Team,

Whenever I wrap ReactWebChat within FluentThemeProvider component, accent style option is not getting applied. Please check below image files for reference.

With FluentThemeProvider

Without FluentThemeProvider

Code:
<FluentThemeProvider> <ReactWebChat directLine={directLine} styleOptions={JSON.parse(styleOptions)} /> </FluentThemeProvider>

Do you see any errors in console log?

No related errors.

How to reproduce the issue?

Code to reproduce this issue. Please add few options to your bot similar to screenshots pasted while describing the bug.
<FluentThemeProvider> <ReactWebChat directLine={directLine} styleOptions={JSON.parse(styleOptions)} /> </FluentThemeProvider>

What do you expect?

The accent style option should get applied.

What actually happened?

The bot has not respected accent style option.

Do you have any screenshots or recordings to repro the issue?

Added above.

Adaptive Card JSON

Additional context

No response

[OEvgeny]

This is known/expected as the package makes changes which conflict with default Web Chat ones. See theme.module.css for possible adjustments using CSS variables.