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.

[lindboe]

@markrickert I do think we should address #2636 (comment). It not only makes the demo look better, but there are likely to be other use cases where somebody needs to set a theme on non-React components (i.e., imperatively on a native component).

I took a stab at it:

AndroidLessNoticeableJump.mp4

Here's my diff:

diff --git a/app/utils/useAppTheme.ts b/app/utils/useAppTheme.ts
index 8d03a0c..712bf81 100644
--- a/app/utils/useAppTheme.ts
+++ b/app/utils/useAppTheme.ts
@@ -1,4 +1,4 @@
-import { createContext, useCallback, useContext, useMemo, useState } from "react"
+import { createContext, useCallback, useContext, useEffect, useMemo, useState } from "react"
 import { StyleProp, useColorScheme } from "react-native"
 import { DarkTheme, DefaultTheme, useTheme as useNavTheme } from "@react-navigation/native"
 import {
@@ -9,6 +9,7 @@ import {
   lightTheme,
   darkTheme,
 } from "app/theme"
+import * as SystemUI from 'expo-system-ui';

 type ThemeContextType = {
   themeScheme: ThemeContexts
@@ -23,6 +24,13 @@ export const ThemeContext = createContext<ThemeContextType>({
   },
 })

+const themeContextToTheme = (themeContext: ThemeContexts): Theme => (
+    themeContext === "dark" ? darkTheme : lightTheme)
+
+const setImperativeThemeing = (theme: Theme) => {
+  SystemUI.setBackgroundColorAsync(theme.colors.background)
+}
+
 export const useThemeProvider = (initialTheme: ThemeContexts = undefined) => {
   const colorScheme = useColorScheme()
   const [overrideTheme, setTheme] = useState<ThemeContexts>(initialTheme)
@@ -34,6 +42,10 @@ export const useThemeProvider = (initialTheme: ThemeContexts = undefined) => {
   const themeScheme = overrideTheme || colorScheme || "light"
   const navigationTheme = themeScheme === "dark" ? DarkTheme : DefaultTheme

+  useEffect(() => {
+    setImperativeThemeing(themeContextToTheme(themeScheme))
+  }, [overrideTheme])
+
   return {
     themeScheme,
     navigationTheme,
@@ -78,7 +90,7 @@ export const useAppTheme = (): UseAppThemeValue => {
   )

   const themeVariant: Theme = useMemo(
-    () => (themeContext === "dark" ? darkTheme : lightTheme),
+    () => themeContextToTheme(themeContext),
     [themeContext],
   )

My only concern here is that we haven't documented using useThemeProvider, which is what would run this. Is that meant to be a required part of the theming system?

Edit: never mind on that framing, I was searching the wrong project.

Instead, do you think this is a good approach to this problem?

[lindboe]

It's looking good to me, just would like your thoughts on the addition of the native background color setting

[lindboe]

Pushed commit with changes to set native background color after discussion with @markrickert 4fb4d61

[frankcalise]

🚢

nice work everyone!

[infinitered-circleci]

🎉 This PR is included in version 10.0.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀