feat(Theming): Adds theming support with documentation.

[markrickert]

Please verify the following:

• yarn test jest tests pass with new tests, if relevant
• yarn lint eslint checks pass with new code, if relevant
• yarn format:check prettier checks pass with new code, if relevant
• README.md (or relevant documentation) has been updated with your changes

Describe your PR

This PR adds theming support to the ignite boilerplate as well as relevant documentation on how to use the theming system.

Note that this PR is onto the v10 branch and not main.

[jamonholmgren]

Before we merge this, I want to make sure we get some real-world experience. @markrickert you're starting a new project soon, so this will be a good opportunity for that.

[jamonholmgren]

This is really looking good. Just want to wait for real-world experience.

[markrickert]

@jamonholmgren Absolutely. I'll keep this branch up to date with main and use this as the starting point for my next project.

[markrickert]

Rebased on the v10 branch and fixed a few issues caused by the Switch/Toggle rewrite

[frankcalise]

TODO: need to check over the showroom issue: https://infiniteredcommunity.slack.com/archives/C41PK1LAY/p1716828905367989?thread_ts=1716662953.807429&cid=C41PK1LAY

[frankcalise]

Really great work, it's fun to see this in action!

One thing I noticed with this implementation, is animated styles do something funny when incorporated into the entire themed(...) function.

The easy workaround is via documentation and making a note about animated styles. Still have to dive deeper into themed I'm guessing for a proper fix

For example, there are two instances of this that I found:

1. DrawerIconButton
2. ButtonLeftAccessory in DemoPodcastListScreen.tsx

When the style and animated style are both passed into the themed function, it doesn't style correctly (I'm thinking because of shared values, etc don't get properly executed since it's a non-worklet (although I'm not entirely sure that's true, since the heart does animate correctly, it's just the style is misaligned)?

If you instead create an array of styles, pass the themed bare style object as one and also the animated style, it works.

DrawerIconButton

All in one <Animated.View style={themed([$middleBar, animatedMiddleBarStyles])} />

Separate objects <Animated.View style={[themed($middleBar), animatedMiddleBarStyles]} />

ButtonLeftAccessory in DemoPodcastListScreen

All in one

<Animated.View  style={themed([$iconContainer, StyleSheet.absoluteFill, animatedLikeButtonStyles])}>
// ...
<Animated.View style={themed([$iconContainer, animatedUnlikeButtonStyles])}>

Separate

<Animated.View style={[themed($iconContainer), StyleSheet.absoluteFill, animatedLikeButtonStyles]}>
// ...
<Animated.View style={[themed($iconContainer), animatedUnlikeButtonStyles]}>

One thing I noticed with this implementation, is animated styles do something funny when incorporated into the entire themed(...) function.

For example, there are two instances of this that I found:

1. DrawerIconButton
2. ButtonLeftAccessory in DemoPodcastListScreen.tsx

When the style and animated style are both passed into the themed function, it doesn't style correctly (I'm thinking because of shared values, etc don't get properly executed since it's a non-worklet?

If you instead create an array of styles, pass the themed bare style object as one and also the animated style, it works.

DrawerIconButton

All in one <Animated.View style={themed([$middleBar, animatedMiddleBarStyles])} />

Separate objects <Animated.View style={[themed($middleBar), animatedMiddleBarStyles]} />

ButtonLeftAccessory in DemoPodcastListScreen

All in one

<Animated.View  style={themed([$iconContainer, StyleSheet.absoluteFill, animatedLikeButtonStyles])}>
// ...
<Animated.View style={themed([$iconContainer, animatedUnlikeButtonStyles])}>

Separate

<Animated.View style={[themed($iconContainer), StyleSheet.absoluteFill, animatedLikeButtonStyles]}>
// ...
<Animated.View style={[themed($iconContainer), animatedUnlikeButtonStyles]}>