Roster Attendee icons don't change color when darkTheme used

[aneeshj4]

What happened and what did you expect to happen?

At the root level of our application we have added the ThemeProvider to enable the dark theme. The UI is updating accordingly except for the icons in the RosterCell component (which we are indirectly using via the RosterAttendee component). As shown in the image below, the theme is the dark theme except for the icons which are still following the light theme.

We have added the theme into the component as follows.

` <ThemeProvider theme={isDarkMode ? darkTheme : lightTheme}>

`

I also tested adding the ThemeProvider directly above the RosterAttendee component and it did not fix it.

Have you reviewed our existing documentation?

• [X] Amazon Chime SDK for JavaScript GitHub issues
• [X] Amazon Chime SDK React Components Library GitHub issues
• [X] Storybook documentation
• [X] README page
• [X] How-to documentation
• [X] React SDK meeting demo

Reproduction steps

Apply dark theme to the UI and observe the icons in the RosterAttendee component.

Amazon Chime SDK React Components Library version

3.3.0 (this is the most up to date version in npm, even though the repository says 3.4.0)

What browsers are you seeing the problem on?

Chrome, Safari

Browser version

Chrome 106, Safari 15.4

Device Information

Desktop

Meeting and Attendee ID Information.

No response

Browser console logs

N/A

Add any other context about the problem here.

No response

[xuesichao]

@aneeshj4 Hi, I was not able to reproduce this issue using our meeting demo. After comparing the code, I think the cause for this issue is that you didn't add <GlobalStyles /> under <ThemeProvider>. Could you give it a try? Example: https://github.com/aws-samples/amazon-chime-sdk/blob/2c7a7c2b446981ae682976d4c29cf036cd73e738/apps/meeting/src/app.tsx#L42

[aneeshj4]

@xuesichao that fixed it, thank you!! I didn't see GlobalStyles mentioned anywhere in the documentation, is it something specific to this use case or should it always be included?

[xuesichao]

@aneeshj4 Yes, we use this <GlobalStyles > to do global CSS reset. Not sure why it's missing in our documentation but I'll update our documentation to recommend using it along with <ThemeProvider />.

[devalevenkatesh]

The documentation update PR is merged, thank you for your patience. Resolving this issue now.