Conditionally rendering images based on light/dark theme with v9

[sharmar999]

Hi there!
We recently started migrating to fluent v9.
We have a scenario where we conditionally render images based on whether its a dark or a light theme. With v8, we had access to the useTheme hook which is no longer available with v9.

Is there a general guidance for this scenario? I understand that ideally we would want to have SVGs only which are styled using griffel, but this is one of those scenarios which'll stay for us 😓.

We were thinking of injecting image URLs with custom token which should handle this case but we were wondering if there's any official guidance on this?

[khmakoto]

I don't think we've had this request before, but I think if you can use a custom token to inject the image URLs correctly in different themes that would make sense to me as a solution 😄

[sharmar999]

I had a slight misunderstanding of how tokens worked.
looks like token values are computed within makeStyles itself (or at build time) or referenced through CSS variables. So I can't just

const img = <img src={customTokens.myImage} /> // this doesn't work

I will either need to do it through griffel which doesn't seem very straightforward.

The alternative would be to maintain theme in my own state (or a store) and pass it around.
@khmakoto isn't this a scenario which other teams must have encountered too? Do you have any guidance on this?