Add theming recipe for Emotion.js

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}`}
+  />
+);
+```

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 {}

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;