phosphor icons don't follow light/dark mode switch

[dohomi]

Currently dark/light mode change is not working with the phosphor icons - the color of icons remains dark while being in dark mode.

[mwood23]

Think I need a repro of this. The icon library itself has no opinions on color, it's based off of the prop values you provide.

As for how the colors resolves, it's the same color resolver as lucide in tamagui.

[dohomi]

@mwood23 here you go: https://github.com/dohomi/tamagui-kitchen-sink/blob/master/packages/ui/src/components/forms/LmStarRating.tsx#L5

If you switch between dark and light the color remains dark. If you change the import to @tamagui/lucide-icons the icon color switches as well. Currently it need minor code adjustment to switch the color due to weight prop

[dohomi]

In my opinion the context of the tamagui provider differs between the use of tamagui-phosphor-icons and @tamagui/lucide-icons, this might be related to #3 where the theme provider gets lost while using the lib inside of Storybook

[mwood23]

There isn't any code I can think of that would cause phosphor icons to not respect the color values you pass in. This is from my app where the icons work for color modes. Make sure you are not passing in a hard coded color value to the color prop. It needs to have a $ and there needs to be a light and dark theme configured with the variable

[dohomi]

After wrap my app into

<IconContextProvider value={{color: '$color'}}>

the color follows the theme. It might be good to update the Readme to make sure that people use the context provider in case they use dark/light

[dohomi]

@mwood23 I realised that this appears as well in Tamagui Dialog component because the <Portal.Content/> is loosing again its value on the phosphor icons. https://github.com/dohomi/tamagui-kitchen-sink/blob/master/packages/ui/src/components/panels/LmDialog.tsx#L80

This is not a big issue but definitely Phosphor icons are not following the same color as they do with Lucide icons