From 047724e996e2fc24aefa64e6269b91fcad593be6 Mon Sep 17 00:00:00 2001
From: Mark Rickert <mjar81@gmail.com>
Date: Mon, 12 Feb 2024 18:46:36 -0700
Subject: [PATCH 1/6] chore(recpie): Adds Theming Ignite recipes

---
 docs/recipes/Theming-StyledComponents.mdx | 130 ++++++++++++++++++++
 docs/recipes/Theming-Unistyles.mdx        | 142 ++++++++++++++++++++++
 2 files changed, 272 insertions(+)
 create mode 100644 docs/recipes/Theming-StyledComponents.mdx
 create mode 100644 docs/recipes/Theming-Unistyles.mdx

diff --git a/docs/recipes/Theming-StyledComponents.mdx b/docs/recipes/Theming-StyledComponents.mdx
new file mode 100644
index 00000000..7c525ce0
--- /dev/null
+++ b/docs/recipes/Theming-StyledComponents.mdx
@@ -0,0 +1,130 @@
+---
+title: Theming Ignite with styled-components
+description: Learn how to use different styling libraries to theme your Ignited app!
+tags:
+  - Theming
+  - iOS
+  - Android
+  - colors
+  - darkmode
+  - styled-components
+last_update:
+  author: Mark Rickert
+publish_date: 2024-12-02
+---
+
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
+
+# Theming Ignite
+
+## Using `styled-components`
+
+The ignite boilerplate comes with a powerful generic theming system that you can adapt to fit the needs of your own app by replacing colors and fonts using the built-in theme files.
+
+We recognize that many people like using pre-built components and design systems such as styled-components, emotion, and unistyles.
+
+styled-components is a popular library for react and react-native that
+
+### 1. Add `styled-components to your app:
+
+<Tabs groupId="operating-systems">
+  <TabItem value="yarn" label="Yarn">
+    <CodeBlock language="jsx">yarn add styled-components</CodeBlock>
+  </TabItem>
+  <TabItem value="npm" label="NPM">
+    <CodeBlock language="jsx">npm install styled-components</CodeBlock>
+  </TabItem>
+</Tabs>
+
+### 2. Add the `ThemeProvider` to your app:
+
+Find and open the `AppNavigator.tsx` file in your project and add the import:
+
+```ts
+import { ThemeProvider as StyledThemeProvider } from "styled-components";
+```
+
+Add the following functional component:
+
+```tsx
+const StyledComponentsThemeProvider = (props: React.PropsWithChildren) => {
+  const { theme } = useAppTheme();
+  return <StyledThemeProvider theme={theme} {...props} />;
+};
+```
+
+Add the new `StyledComponentsThemeProvider` component just inside the `<ThemeProvider>` component in the `AppNavigator`.
+
+```diff
+return (
+  <ThemeProvider value={{ themeScheme, setThemeContextOverride }}>
++    <StyledComponentsThemeProvider>
+      <NavigationContainer ref={navigationRef} theme={navigationTheme} {...props}>
+        <AppStack />
+      </NavigationContainer>
++    </StyledComponentsThemeProvider>
+  </ThemeProvider>
+);
+```
+
+### 3. Create and use your first styled-component using the new theme:
+
+```tsx
+import styled from "styled-components/native";
+
+const MyTextComponent = styled.Text`
+  margin: 1em;
+  color: ${({ theme }) => theme.colors.text};
+  background-color: ${({ theme }) => theme.colors.background};
+`;
+
+export const MyScreen = (props) => {
+  return (
+    <MyTextComponent>
+      This text color and background will change when changing themes.
+    </MyTextComponent>
+  );
+};
+```
+
+### 4. Tell `styled-components` about the shape of your theme:
+
+:::info
+
+So it's all working now, but having code completion would be nice, huh?
+
+:::
+
+Create a new file in you Ignited app's `types` folder called `styled-components.d.ts` with the following content:
+
+```tsx
+// Override DefaultTheme to get accurate typings for your project.
+import type { Theme } from "app/theme";
+
+declare module "styled-components" {
+  export interface DefaultTheme extends Theme {}
+}
+
+declare module "styled-components/native" {
+  export interface DefaultTheme extends Theme {}
+}
+```
+
+## Complete!
+
+You can now use `styled-components` integrated into the Ignite theme engine. To swap themes provide the user a switch or toggle button:
+
+```tsx
+const { setThemeContextOverride, themeContext } = useAppTheme();
+
+return (
+  <Button
+    onPress={() => {
+      LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut); // Animate the transition
+      setThemeContextOverride(themeContext === "dark" ? "light" : "dark");
+    }}
+    text={`Switch Theme: ${themeContext}`}
+  />
+);
+```
diff --git a/docs/recipes/Theming-Unistyles.mdx b/docs/recipes/Theming-Unistyles.mdx
new file mode 100644
index 00000000..1db48ccc
--- /dev/null
+++ b/docs/recipes/Theming-Unistyles.mdx
@@ -0,0 +1,142 @@
+---
+title: Theming Ignite with Unistyles
+description: Learn how to use different styling libraries to theme your Ignited app!
+tags:
+  - Theming
+  - iOS
+  - Android
+  - colors
+  - darkmode
+  - unistyles
+last_update:
+  author: Mark Rickert
+publish_date: 2024-12-02
+---
+
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
+
+# Theming Ignite
+
+## Using `Unistyles`
+
+The ignite boilerplate comes with a powerful generic theming system that you can adapt to fit the needs of your own app by replacing colors and fonts using the built-in theme files.
+
+We recognize that many people like using pre-built components and design systems such as styled-components, emotion, and unistyles.
+
+styled-components is a popular library for react and react-native that
+
+:::warning
+
+Unistyles includes custom native code, which means it does not support Expo Go. You'll need to use expo CNG to build your app.
+
+To do this with an newly ignited app, run `yarn expo prebuild --clean` and then `yarn start`.
+
+:::
+
+### 1. Add `react-native-unistyles to your app:
+
+<Tabs groupId="operating-systems">
+  <TabItem value="yarn" label="Yarn">
+    <CodeBlock language="bash">yarn add react-native-unistyles</CodeBlock>
+  </TabItem>
+  <TabItem value="npm" label="npm">
+    <CodeBlock language="bash">npm install react-native-unistyles</CodeBlock>
+  </TabItem>
+  <TabItem value="pnpm" label="pnpm">
+    <CodeBlock language="bash">pnpm install react-native-unistyles</CodeBlock>
+  </TabItem>
+</Tabs>
+
+### 2. Add define Unistyles theme types:
+
+Create a new file in you Ignited app's `types` folder called `react-native-unistyles.d.ts` with the following content:
+
+```tsx
+// Override UnistylesThemes to get accurate typings for your project.
+import type { Theme } from "app/theme";
+
+type AppThemes = {
+  light: Theme;
+  dark: Theme;
+};
+
+declare module "react-native-unistyles" {
+  export interface UnistylesThemes extends AppThemes {}
+}
+```
+
+### 3. Configure unistyles to use the app's Theme:
+
+Add the following to your app's `app/App.tsx`:
+
+```diff
++import { UnistylesRegistry } from "react-native-unistyles"
++import { darkTheme, lightTheme } from "app/theme"
+
+SplashScreen.preventAutoHideAsync()
+
++UnistylesRegistry.addThemes({
++  light: lightTheme,
++  dark: darkTheme,
++}).addConfig({
++  // adaptiveThemes: true,
++  initialTheme: "light",
++})
++
+
+function IgniteApp() {
+  return <App hideSplashScreen={SplashScreen.hideAsync} />
+}
+```
+
+### 4. Ensure that Unistyles knows when we want to change the theme:
+
+Open the `app/utils/useAppTheme.ts` and make the following changes:
+
+```diff
+  const setThemeContextOverride = useCallback((newTheme: ThemeContexts) => {
+    setTheme(newTheme)
++    UnistylesRuntime.setTheme(newTheme || "light")
+  }, [])
+```
+
+### 5. Create and use your first Unistyles component using the new theme:
+
+```tsx
+import { createStyleSheet, useStyles } from "react-native-unistyles";
+
+export const MyScreen = (props) => {
+  const { styles } = useStyles($uniStyles);
+  return (
+    <Text style={styles.text}>
+      This text color and background will change when changing themes.
+    </Text>
+  );
+};
+
+const $uniStyles = createStyleSheet((theme) => ({
+  text: {
+    color: theme.colors.text,
+    backgroundColor: theme.colors.background,
+  },
+}));
+```
+
+## Complete!
+
+You can now use Unistyles integrated into the Ignite theme engine. To swap themes provide the user a switch or toggle button:
+
+```tsx
+const { setThemeContextOverride, themeContext } = useAppTheme();
+
+return (
+  <Button
+    onPress={() => {
+      LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut); // Animate the transition
+      setThemeContextOverride(themeContext === "dark" ? "light" : "dark");
+    }}
+    text={`Switch Theme: ${themeContext}`}
+  />
+);
+```

From 7f7573232b6970098b4be9cfe2d718846b5680cb Mon Sep 17 00:00:00 2001
From: Mark Rickert <mjar81@gmail.com>
Date: Tue, 13 Feb 2024 15:29:59 -0700
Subject: [PATCH 2/6] Add theming recipe for Emotion.js

---
 docs/recipes/Theming-Emotion.mdx          | 122 ++++++++++++++++++++++
 docs/recipes/Theming-StyledComponents.mdx |  29 +++--
 docs/recipes/Theming-Unistyles.mdx        |  11 +-
 3 files changed, 140 insertions(+), 22 deletions(-)
 create mode 100644 docs/recipes/Theming-Emotion.mdx

diff --git a/docs/recipes/Theming-Emotion.mdx b/docs/recipes/Theming-Emotion.mdx
new file mode 100644
index 00000000..d49c7a82
--- /dev/null
+++ b/docs/recipes/Theming-Emotion.mdx
@@ -0,0 +1,122 @@
+---
+title: Theming Ignite with Emotion.js
+description: Learn how to use different styling libraries to theme your Ignited app!
+tags:
+  - Theming
+  - iOS
+  - Android
+  - colors
+  - darkmode
+  - emotion.js
+last_update:
+  author: Mark Rickert
+publish_date: 2024-12-02
+---
+
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
+
+# Theming Ignite
+
+When it comes to styling we acknowledge the popularity and effectiveness of libraries like `styled-components`, `emotion.js` and `unistyles`. Our boilerplate is designed to work seamlessly with these styling solutions, offering you the flexibility to choose the one that aligns with your preferences and project requirements.
+
+The theming system in Ignite Boilerplate is crafted to be adaptable and easy to customize. By simply replacing colors and fonts through the designated theme files, you can tailor the look and feel of your application.
+
+## Using `Emotion`
+
+### 1. Add `Emotion` to your app:
+
+<Tabs groupId="operating-systems">
+  <TabItem value="yarn" label="Yarn">
+    <CodeBlock language="bash">yarn add @emotion/react @emotion/native</CodeBlock>
+  </TabItem>
+  <TabItem value="npm" label="npm">
+    <CodeBlock language="bash">npm install @emotion/react @emotion/native</CodeBlock>
+  </TabItem>
+  <TabItem value="pnpm" label="pnpm">
+    <CodeBlock language="bash">pnpm install @emotion/react @emotion/native</CodeBlock>
+  </TabItem>
+</Tabs>
+
+### 2. Add the Emotion `ThemeProvider`
+
+Find and open the `AppNavigator.tsx` file in your project and add the import:
+
+```ts
+import { ThemeProvider as EmotionThemeProvider } from "@emotion/react";
+```
+
+Add the following functional component:
+
+```tsx
+const EmotionJSThemeProvider = (props: React.PropsWithChildren) => {
+  const { theme } = useAppTheme();
+  return <EmotionThemeProvider theme={theme}>{props.children}</EmotionThemeProvider>;
+};
+```
+
+Add the new `EmotionJSThemeProvider` component just inside the `<ThemeProvider>` component in the `AppNavigator`.
+
+```diff
+return (
+  <ThemeProvider value={{ themeScheme, setThemeContextOverride }}>
++    <EmotionJSThemeProvider>
+      <NavigationContainer ref={navigationRef} theme={navigationTheme} {...props}>
+        <AppStack />
+      </NavigationContainer>
++    </EmotionJSThemeProvider>
+  </ThemeProvider>
+);
+```
+
+### 3. Create and use your first `Emotion` component using the new theme:
+
+```tsx
+import styled from "@emotion/native";
+
+const MyTextComponent = styled.Text`
+  margin: 10px;
+  color: ${({ theme }) => theme.colors.text};
+  background-color: ${({ theme }) => theme.colors.background};
+`;
+
+export const MyScreen = (props) => {
+  return (
+    <MyTextComponent>
+      This text color and background will change when changing themes.
+    </MyTextComponent>
+  );
+};
+```
+
+### 4. Tell Emotion.js about the shape of your theme:
+
+Create a new file in you Ignited app's `types` folder called `emotion.d.ts` with the following content:
+
+```tsx
+// Override Theme to get accurate typings for your project.
+import type { Theme as AppTheme } from "app/theme";
+import "@emotion/react";
+
+declare module "@emotion/react" {
+  export interface Theme extends AppTheme {}
+}
+```
+
+## Complete!
+
+You can now use `Emotion` integrated into the Ignite theme engine. To swap themes provide the user a switch or toggle button:
+
+```tsx
+const { setThemeContextOverride, themeContext } = useAppTheme();
+
+return (
+  <Button
+    onPress={() => {
+      LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut); // Animate the transition
+      setThemeContextOverride(themeContext === "dark" ? "light" : "dark");
+    }}
+    text={`Switch Theme: ${themeContext}`}
+  />
+);
+```
diff --git a/docs/recipes/Theming-StyledComponents.mdx b/docs/recipes/Theming-StyledComponents.mdx
index 7c525ce0..54b08318 100644
--- a/docs/recipes/Theming-StyledComponents.mdx
+++ b/docs/recipes/Theming-StyledComponents.mdx
@@ -18,22 +18,23 @@ import TabItem from "@theme/TabItem";
 
 # Theming Ignite
 
-## Using `styled-components`
-
-The ignite boilerplate comes with a powerful generic theming system that you can adapt to fit the needs of your own app by replacing colors and fonts using the built-in theme files.
+When it comes to styling we acknowledge the popularity and effectiveness of libraries like `styled-components`, `emotion.js` and `unistyles`. Our boilerplate is designed to work seamlessly with these styling solutions, offering you the flexibility to choose the one that aligns with your preferences and project requirements.
 
-We recognize that many people like using pre-built components and design systems such as styled-components, emotion, and unistyles.
+The theming system in Ignite Boilerplate is crafted to be adaptable and easy to customize. By simply replacing colors and fonts through the designated theme files, you can tailor the look and feel of your application.
 
-styled-components is a popular library for react and react-native that
+## Using `styled-components`
 
-### 1. Add `styled-components to your app:
+### 1. Add `styled-components` to your app:
 
 <Tabs groupId="operating-systems">
   <TabItem value="yarn" label="Yarn">
-    <CodeBlock language="jsx">yarn add styled-components</CodeBlock>
+    <CodeBlock language="bash">yarn add styled-components</CodeBlock>
+  </TabItem>
+  <TabItem value="npm" label="npm">
+    <CodeBlock language="bash">npm install styled-components</CodeBlock>
   </TabItem>
-  <TabItem value="npm" label="NPM">
-    <CodeBlock language="jsx">npm install styled-components</CodeBlock>
+  <TabItem value="pnpm" label="pnpm">
+    <CodeBlock language="bash">pnpm install styled-components</CodeBlock>
   </TabItem>
 </Tabs>
 
@@ -74,7 +75,7 @@ return (
 import styled from "styled-components/native";
 
 const MyTextComponent = styled.Text`
-  margin: 1em;
+  margin: 10px;
   color: ${({ theme }) => theme.colors.text};
   background-color: ${({ theme }) => theme.colors.background};
 `;
@@ -90,17 +91,13 @@ export const MyScreen = (props) => {
 
 ### 4. Tell `styled-components` about the shape of your theme:
 
-:::info
-
-So it's all working now, but having code completion would be nice, huh?
-
-:::
-
 Create a new file in you Ignited app's `types` folder called `styled-components.d.ts` with the following content:
 
 ```tsx
 // Override DefaultTheme to get accurate typings for your project.
 import type { Theme } from "app/theme";
+import "styled-components";
+import "styled-components/native";
 
 declare module "styled-components" {
   export interface DefaultTheme extends Theme {}
diff --git a/docs/recipes/Theming-Unistyles.mdx b/docs/recipes/Theming-Unistyles.mdx
index 1db48ccc..97972195 100644
--- a/docs/recipes/Theming-Unistyles.mdx
+++ b/docs/recipes/Theming-Unistyles.mdx
@@ -18,13 +18,11 @@ import TabItem from "@theme/TabItem";
 
 # Theming Ignite
 
-## Using `Unistyles`
-
-The ignite boilerplate comes with a powerful generic theming system that you can adapt to fit the needs of your own app by replacing colors and fonts using the built-in theme files.
+When it comes to styling we acknowledge the popularity and effectiveness of libraries like `styled-components`, `emotion.js` and `unistyles`. Our boilerplate is designed to work seamlessly with these styling solutions, offering you the flexibility to choose the one that aligns with your preferences and project requirements.
 
-We recognize that many people like using pre-built components and design systems such as styled-components, emotion, and unistyles.
+The theming system in Ignite Boilerplate is crafted to be adaptable and easy to customize. By simply replacing colors and fonts through the designated theme files, you can tailor the look and feel of your application.
 
-styled-components is a popular library for react and react-native that
+## Using `Unistyles`
 
 :::warning
 
@@ -34,7 +32,7 @@ To do this with an newly ignited app, run `yarn expo prebuild --clean` and then
 
 :::
 
-### 1. Add `react-native-unistyles to your app:
+### 1. Add `react-native-unistyles` to your app:
 
 <Tabs groupId="operating-systems">
   <TabItem value="yarn" label="Yarn">
@@ -55,6 +53,7 @@ Create a new file in you Ignited app's `types` folder called `react-native-unist
 ```tsx
 // Override UnistylesThemes to get accurate typings for your project.
 import type { Theme } from "app/theme";
+import "react-native-unistyles";
 
 type AppThemes = {
   light: Theme;

From ddec421c1e5fbc22089ac6282ee1e9dad0fe7cf8 Mon Sep 17 00:00:00 2001
From: Mark Rickert <mjar81@gmail.com>
Date: Wed, 14 Feb 2024 12:44:03 -0700
Subject: [PATCH 3/6] Update warning for expo and unistyles.

---
 docs/recipes/Theming-Unistyles.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/recipes/Theming-Unistyles.mdx b/docs/recipes/Theming-Unistyles.mdx
index 97972195..879f01e6 100644
--- a/docs/recipes/Theming-Unistyles.mdx
+++ b/docs/recipes/Theming-Unistyles.mdx
@@ -28,7 +28,7 @@ The theming system in Ignite Boilerplate is crafted to be adaptable and easy to
 
 Unistyles includes custom native code, which means it does not support Expo Go. You'll need to use expo CNG to build your app.
 
-To do this with an newly ignited app, run `yarn expo prebuild --clean` and then `yarn start`.
+To do this with an newly ignited app, run `yarn prebuild:clean` and then `yarn start`.
 
 :::
 

From d48df6609f9bb481978c636eb8560402426f104c Mon Sep 17 00:00:00 2001
From: Mark Rickert <mjar81@gmail.com>
Date: Thu, 15 Feb 2024 11:20:02 -0700
Subject: [PATCH 4/6] chore(docs): Update a few recipes for the new theming
 system.

---
 docs/recipes/Redux.md                       | 10 ++-
 docs/recipes/SelectFieldWithBottomSheet.mdx | 99 ++++++++-------------
 2 files changed, 43 insertions(+), 66 deletions(-)

diff --git a/docs/recipes/Redux.md b/docs/recipes/Redux.md
index 355c7d83..e91606a6 100644
--- a/docs/recipes/Redux.md
+++ b/docs/recipes/Redux.md
@@ -131,7 +131,8 @@ import React, { FC } from "react";
 import { View, ViewStyle } from "react-native";
 import { Button, Text } from "app/components";
 import { AppStackScreenProps } from "../navigators";
-import { colors } from "../theme";
+import type { ThemedStyle } from "app/theme";
+import { useAppTheme } from "app/utils/useAppTheme";
 import { useSafeAreaInsetsStyle } from "../utils/useSafeAreaInsetsStyle";
 import { useAppDispatch, useAppSelector } from "app/store/store";
 import { decrement, increment } from "app/store/counterSlice";
@@ -139,11 +140,12 @@ import { decrement, increment } from "app/store/counterSlice";
 interface WelcomeScreenProps extends AppStackScreenProps<"Welcome"> {}
 
 export const WelcomeScreen: FC<WelcomeScreenProps> = () => {
+  const { themed } = useAppTheme();
   const $containerInsets = useSafeAreaInsetsStyle(["top", "bottom"]);
   const count = useAppSelector((state) => state.counter.value);
   const dispatch = useAppDispatch();
   return (
-    <View style={[$containerInsets, $container]}>
+    <View style={themed([$containerInsets, $container])}>
       <Button text="Increment" onPress={() => dispatch(increment())} />
       <Button text="Decrement" onPress={() => dispatch(decrement())} />
       <Text text={`Count: ${count}`} />
@@ -151,10 +153,10 @@ export const WelcomeScreen: FC<WelcomeScreenProps> = () => {
   );
 };
 
-const $container: ViewStyle = {
+const $container: ThemedStyle<ViewStyle> = ({ colors }) => ({
   flex: 1,
   backgroundColor: colors.background,
-};
+});
 ```
 
 You're now using Redux!
diff --git a/docs/recipes/SelectFieldWithBottomSheet.mdx b/docs/recipes/SelectFieldWithBottomSheet.mdx
index 5a94532b..92e89342 100644
--- a/docs/recipes/SelectFieldWithBottomSheet.mdx
+++ b/docs/recipes/SelectFieldWithBottomSheet.mdx
@@ -60,10 +60,7 @@ import { View, TouchableOpacity } from "react-native";
 import { TextField, TextFieldProps } from "./TextField";
 
 export interface SelectFieldProps
-  extends Omit<
-    TextFieldProps,
-    "ref" | "onValueChange" | "onChange" | "value"
-  > {}
+  extends Omit<TextFieldProps, "ref" | "onValueChange" | "onChange" | "value"> {}
 export interface SelectFieldRef {}
 
 export const SelectField = forwardRef(function SelectField(
@@ -72,8 +69,7 @@ export const SelectField = forwardRef(function SelectField(
 ) {
   const { ...TextFieldProps } = props;
 
-  const disabled =
-    TextFieldProps.editable === false || TextFieldProps.status === "disabled";
+  const disabled = TextFieldProps.editable === false || TextFieldProps.status === "disabled";
 
   useImperativeHandle(ref, () => ({}));
 
@@ -121,9 +117,7 @@ Let's add an accessory to the input to make it look like a `SelectField`.
 ```tsx
 <TextField
   {...TextFieldProps}
-  RightAccessory={(props) => (
-    <Icon icon="caretRight" containerStyle={props.style} />
-  )}
+  RightAccessory={(props) => <Icon icon="caretRight" containerStyle={props.style} />}
 />
 ```
 
@@ -210,8 +204,7 @@ export const SelectField = forwardRef(function SelectField(
     ...TextFieldProps
   } = props;
 
-  const disabled =
-    TextFieldProps.editable === false || TextFieldProps.status === "disabled";
+  const disabled = TextFieldProps.editable === false || TextFieldProps.status === "disabled";
 
   useImperativeHandle(ref, () => ({}));
 
@@ -232,9 +225,7 @@ export const SelectField = forwardRef(function SelectField(
             {...TextFieldProps}
             // success-line-start
             value={valueString}
-            RightAccessory={(props) => (
-              <Icon icon="caretRight" containerStyle={props.style} />
-            )}
+            RightAccessory={(props) => <Icon icon="caretRight" containerStyle={props.style} />}
             // success-line-end
           />
         </View>
@@ -348,6 +339,8 @@ import {
 // success-line-end
 import React, { forwardRef, Ref, useImperativeHandle, useRef } from "react";
 import { TouchableOpacity, View, ViewStyle } from "react-native";
+import type { ThemedStyle } from "app/theme";
+import { useAppTheme } from "app/utils/useAppTheme";
 // success-line
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 // success-line
@@ -391,8 +384,9 @@ export const SelectField = forwardRef(function SelectField(
   const { bottom } = useSafeAreaInsets();
   // success-line-end
 
-  const disabled =
-    TextFieldProps.editable === false || TextFieldProps.status === "disabled";
+  const { themed } = useAppTheme();
+
+  const disabled = TextFieldProps.editable === false || TextFieldProps.status === "disabled";
 
   // success-line
   useImperativeHandle(ref, () => ({ presentOptions, dismissOptions }));
@@ -426,9 +420,7 @@ export const SelectField = forwardRef(function SelectField(
           <TextField
             {...TextFieldProps}
             value={valueString}
-            RightAccessory={(props) => (
-              <Icon icon="caretRight" containerStyle={props.style} />
-            )}
+            RightAccessory={(props) => <Icon icon="caretRight" containerStyle={props.style} />}
           />
         </View>
       </TouchableOpacity>
@@ -440,11 +432,7 @@ export const SelectField = forwardRef(function SelectField(
         stackBehavior="replace"
         enableDismissOnClose
         backdropComponent={(props) => (
-          <BottomSheetBackdrop
-            {...props}
-            appearsOnIndex={0}
-            disappearsOnIndex={-1}
-          />
+          <BottomSheetBackdrop {...props} appearsOnIndex={0} disappearsOnIndex={-1} />
         )}
         footerComponent={
           !multiple
@@ -452,14 +440,10 @@ export const SelectField = forwardRef(function SelectField(
             : (props) => (
                 <BottomSheetFooter
                   {...props}
-                  style={$bottomSheetFooter}
+                  style={themed($bottomSheetFooter)}
                   bottomInset={bottom}
                 >
-                  <Button
-                    text="Dismiss"
-                    preset="reversed"
-                    onPress={dismissOptions}
-                  />
+                  <Button text="Dismiss" preset="reversed" onPress={dismissOptions} />
                 </BottomSheetFooter>
               )
         }
@@ -469,11 +453,7 @@ export const SelectField = forwardRef(function SelectField(
           data={options}
           keyExtractor={(o) => o.value}
           renderItem={({ item, index }) => (
-            <ListItem
-              text={item.label}
-              topSeparator={index !== 0}
-              style={$listItem}
-            />
+            <ListItem text={item.label} topSeparator={index !== 0} style={themed($listItem)} />
           )}
         />
       </BottomSheetModal>
@@ -483,14 +463,14 @@ export const SelectField = forwardRef(function SelectField(
 });
 
 // success-line-start
-const $bottomSheetFooter: ViewStyle = {
+const $bottomSheetFooter: ThemedStyle<ViewStyle> = ({ spacing }) => ({
   paddingHorizontal: spacing.lg,
   paddingBottom: spacing.xs,
-};
+});
 
-const $listItem: ViewStyle = {
+const $listItem: ThemedStyle<ViewStyle> = ({ spacing }) => ({
   paddingHorizontal: spacing.lg,
-};
+});
 // success-line-end
 ```
 
@@ -515,8 +495,8 @@ import {
 import React, { forwardRef, Ref, useImperativeHandle, useRef } from "react";
 import { TouchableOpacity, View, ViewStyle } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-// success-line
-import { colors, spacing } from "../theme";
+import type { ThemedStyle } from "app/theme";
+import { useAppTheme } from "app/utils/useAppTheme";
 import { Button } from "./Button";
 import { Icon } from "./Icon";
 import { ListItem } from "./ListItem";
@@ -555,9 +535,14 @@ export const SelectField = forwardRef(function SelectField(
   } = props;
   const sheet = useRef<BottomSheetModal>(null);
   const { bottom } = useSafeAreaInsets();
+  const {
+    themed,
+    // success-line-start
+    theme: { colors },
+    // success-line-end
+  } = useAppTheme();
 
-  const disabled =
-    TextFieldProps.editable === false || TextFieldProps.status === "disabled";
+  const disabled = TextFieldProps.editable === false || TextFieldProps.status === "disabled";
 
   useImperativeHandle(ref, () => ({ presentOptions, dismissOptions }));
 
@@ -596,9 +581,7 @@ export const SelectField = forwardRef(function SelectField(
           <TextField
             {...TextFieldProps}
             value={valueString}
-            RightAccessory={(props) => (
-              <Icon icon="caretRight" containerStyle={props.style} />
-            )}
+            RightAccessory={(props) => <Icon icon="caretRight" containerStyle={props.style} />}
           />
         </View>
       </TouchableOpacity>
@@ -609,11 +592,7 @@ export const SelectField = forwardRef(function SelectField(
         stackBehavior="replace"
         enableDismissOnClose
         backdropComponent={(props) => (
-          <BottomSheetBackdrop
-            {...props}
-            appearsOnIndex={0}
-            disappearsOnIndex={-1}
-          />
+          <BottomSheetBackdrop {...props} appearsOnIndex={0} disappearsOnIndex={-1} />
         )}
         footerComponent={
           !multiple
@@ -621,14 +600,10 @@ export const SelectField = forwardRef(function SelectField(
             : (props) => (
                 <BottomSheetFooter
                   {...props}
-                  style={$bottomSheetFooter}
+                  style={themed($bottomSheetFooter)}
                   bottomInset={bottom}
                 >
-                  <Button
-                    text="Dismiss"
-                    preset="reversed"
-                    onPress={dismissOptions}
-                  />
+                  <Button text="Dismiss" preset="reversed" onPress={dismissOptions} />
                 </BottomSheetFooter>
               )
         }
@@ -641,7 +616,7 @@ export const SelectField = forwardRef(function SelectField(
             <ListItem
               text={item.label}
               topSeparator={index !== 0}
-              style={$listItem}
+              style={themed($listItem)}
               // success-line-start
               rightIcon={value.includes(item.value) ? "check" : undefined}
               rightIconColor={colors.palette.angry500}
@@ -655,14 +630,14 @@ export const SelectField = forwardRef(function SelectField(
   );
 });
 
-const $bottomSheetFooter: ViewStyle = {
+const $bottomSheetFooter: ThemedStyle<ViewStyle> = ({ spacing }) => ({
   paddingHorizontal: spacing.lg,
   paddingBottom: spacing.xs,
-};
+});
 
-const $listItem: ViewStyle = {
+const $listItem: ThemedStyle<ViewStyle> = ({ spacing }) => ({
   paddingHorizontal: spacing.lg,
-};
+});
 ```
 
 And we're done!

From 5d870e889ed887496c9d01994accd74aba14d2c4 Mon Sep 17 00:00:00 2001
From: Mark Rickert <mjar81@gmail.com>
Date: Mon, 14 Oct 2024 14:55:27 -0600
Subject: [PATCH 5/6] chore: fix mdx codeblock imports.

---
 docs/recipes/Theming-Emotion.mdx          | 1 +
 docs/recipes/Theming-StyledComponents.mdx | 1 +
 docs/recipes/Theming-Unistyles.mdx        | 1 +
 3 files changed, 3 insertions(+)

diff --git a/docs/recipes/Theming-Emotion.mdx b/docs/recipes/Theming-Emotion.mdx
index d49c7a82..df5eabbc 100644
--- a/docs/recipes/Theming-Emotion.mdx
+++ b/docs/recipes/Theming-Emotion.mdx
@@ -15,6 +15,7 @@ publish_date: 2024-12-02
 
 import Tabs from "@theme/Tabs";
 import TabItem from "@theme/TabItem";
+import CodeBlock from "@theme/CodeBlock";
 
 # Theming Ignite
 
diff --git a/docs/recipes/Theming-StyledComponents.mdx b/docs/recipes/Theming-StyledComponents.mdx
index 54b08318..b5ca3a04 100644
--- a/docs/recipes/Theming-StyledComponents.mdx
+++ b/docs/recipes/Theming-StyledComponents.mdx
@@ -15,6 +15,7 @@ publish_date: 2024-12-02
 
 import Tabs from "@theme/Tabs";
 import TabItem from "@theme/TabItem";
+import CodeBlock from "@theme/CodeBlock";
 
 # Theming Ignite
 
diff --git a/docs/recipes/Theming-Unistyles.mdx b/docs/recipes/Theming-Unistyles.mdx
index 879f01e6..23dfe19d 100644
--- a/docs/recipes/Theming-Unistyles.mdx
+++ b/docs/recipes/Theming-Unistyles.mdx
@@ -15,6 +15,7 @@ publish_date: 2024-12-02
 
 import Tabs from "@theme/Tabs";
 import TabItem from "@theme/TabItem";
+import CodeBlock from "@theme/CodeBlock";
 
 # Theming Ignite
 

From 83ad7806c261a995a2b3b820e65f9dfa2fffae91 Mon Sep 17 00:00:00 2001
From: Mark Rickert <mjar81@gmail.com>
Date: Mon, 14 Oct 2024 14:56:57 -0600
Subject: [PATCH 6/6] chore: run npx update-browserslist-db@latest

---
 yarn.lock | 23 +++++++++++++----------
 1 file changed, 13 insertions(+), 10 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index 3e2b43ee..5c384fdb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1722,7 +1722,7 @@
     "@docusaurus/theme-search-algolia" "3.1.1"
     "@docusaurus/types" "3.1.1"
 
-"@docusaurus/react-loadable@5.5.2", "react-loadable@npm:@docusaurus/react-loadable@5.5.2":
+"@docusaurus/react-loadable@5.5.2":
   version "5.5.2"
   resolved "https://registry.yarnpkg.com/@docusaurus/react-loadable/-/react-loadable-5.5.2.tgz#81aae0db81ecafbdaee3651f12804580868fa6ce"
   integrity sha512-A3dYjdBGuy0IGT+wyLIGIKLRE+sAk1iNk0f1HjNDysO7u8lhL4N3VEm+FAubmJbAztn94F7MxBTPmnixbiyFdQ==
@@ -3165,15 +3165,10 @@ caniuse-api@^3.0.0:
     lodash.memoize "^4.1.2"
     lodash.uniq "^4.5.0"
 
-caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001370:
-  version "1.0.30001374"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001374.tgz#3dab138e3f5485ba2e74bd13eca7fe1037ce6f57"
-  integrity sha512-mWvzatRx3w+j5wx/mpFN5v5twlPrabG8NqX2c6e45LCpymdoGqNvRkRutFUqpRTXKFQFNQJasvK0YT7suW6/Hw==
-
-caniuse-lite@^1.0.30001578, caniuse-lite@^1.0.30001587:
-  version "1.0.30001587"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001587.tgz#a0bce920155fa56a1885a69c74e1163fc34b4881"
-  integrity sha512-HMFNotUmLXn71BQxg8cijvqxnIAofforZOwGsxyXJ0qugTdspUF4sPSJ2vhgprHCB996tIDzEq1ubumPDV8ULA==
+caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001370, caniuse-lite@^1.0.30001578, caniuse-lite@^1.0.30001587:
+  version "1.0.30001668"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001668.tgz"
+  integrity sha512-nWLrdxqCdblixUO+27JtGJJE/txpJlyUy5YN1u53wLZkP0emYCo5zgS6QYft7VUYR42LGgi/S5hdLZTrnyIddw==
 
 ccount@^2.0.0:
   version "2.0.1"
@@ -7353,6 +7348,14 @@ react-loadable-ssr-addon-v5-slorber@^1.0.1:
   dependencies:
     "@babel/runtime" "^7.10.3"
 
+"react-loadable@npm:@docusaurus/react-loadable@5.5.2":
+  version "5.5.2"
+  resolved "https://registry.yarnpkg.com/@docusaurus/react-loadable/-/react-loadable-5.5.2.tgz#81aae0db81ecafbdaee3651f12804580868fa6ce"
+  integrity sha512-A3dYjdBGuy0IGT+wyLIGIKLRE+sAk1iNk0f1HjNDysO7u8lhL4N3VEm+FAubmJbAztn94F7MxBTPmnixbiyFdQ==
+  dependencies:
+    "@types/react" "*"
+    prop-types "^15.6.2"
+
 react-player@^2.11.2:
   version "2.11.2"
   resolved "https://registry.yarnpkg.com/react-player/-/react-player-2.11.2.tgz#19a0070e08d5ca0db8329a0584babce636372540"