[v3] reanimated interpolateColor doesn't update theme color

[jeremybarbet]

Description

When using interpolateColor from reanimated, with theme colors from unistyles, if the theme is changed, the color is not updating to the right theme's color.

unistyles.ts

// ...

const themes = {
  light: {
    background: "#ffffff",
    box: "#0000ff",
  },

  dark: {
    background: "#000000",
    box: "#ff0000",
  },
};

StyleSheet.configure({
  themes,
  settings: {
    adaptiveThemes: true,
  },
});

index.tsx

// ...

export default function Index() {
  const { box } = UnistylesRuntime.getTheme();
  const sv = useSharedValue(0);

  const boxStyle = useAnimatedStyle(() => ({
    backgroundColor: interpolateColor(sv.value, [0, 1], [box, "#00ff00"]),
  }));

  return (
    <View style={s.wrapper}>
      <Animated.View style={[s.box, boxStyle]} />
    </View>
  );
}

// ...

interpolate-color.mov

Steps to Reproduce

1. git clone [email protected]:jeremybarbet/interpolate-color-reproducer.git
2. yarn/yarn ios
3. Go to system settings, switch from light to dark mode
4. Box background doesn't update

Snack or Repository Link (Optional)

https://github.com/jeremybarbet/interpolate-color-reproducer

Unistyles Version

3.0.0-beta.1

React Native Version

0.76.3

Platforms

Android, iOS

Expo

Yes

[jpudysz]

Thanks for putting it down from Discord to Github.

Context:
Unistyles is not (yet) capable of using worklets or sharing up-to-date values on different threads. But it will be!

I will definitely bring it on before 1st stable release.