[BUG] mgt-react - SearchResults Dark theme missing

[tavikukko]

Describe the bug
mgt-react component SearchResults is missing dark theme

To Reproduce

create new react app and add necessary components and configure auth.
When switching the the dark/light theme, the SearchResults is missing necessary css variables
Expected behavior
Font color in SearchResults is light

Screenshots

[sebastienlevert]

KinG¡ Hello Tomi ;)

What is the version you are using? Our Storybook seems all good so we're confused.

https://mgt.dev/?path=/story/components-mgt-search-results-html--search-results

Is this happening just on mgt-react? Can you repro using the React story and using the stackblitz feature? https://mgt.dev/?path=/story/components-mgt-search-results-react--search-results

Thanks!

[tavikukko]

Hi Seb!
yes, storybooks works, the react component not. I was checking the sourcecode and there is no .theme file at all, like in the other components. I created small app to repro this, I will link it.
and yes, latest version 4.

[tavikukko]

Just add your own clientid and toggle the theme
https://github.com/tavikukko/mgt-search-results

[gavinbarron]

@tavikukko We overhauled theming in v3 to use the fluent web components theming, there not being a .theme file is not necessarily a problem.

The problem here is that the CSS trying to use the --color token is not using the sass variable that also provides the theme based default token.

As to why it's working in Storybook I have no answer, thankfully it's an easy fix.

Edit: also, try setting your body background-color via this CSS rule and then you don't need the event handler background-color: var(--fill-color);

[tavikukko]

Great! I hope I would have cathed that and contribute!