Dynamic Theming (Light and Dark Support)

[johntimothybailey]

Problem

As is, the user is not able to change the theme. This feature is blocked as there is a code design flaw. The flaw is that we currently use a static theme referenced in file.

Design

useTheme

The React Native Paper Provider needs to receive theme by evaluating the state (e.g. useDarkTheme)

Moreover, when needing to access the theme directly, use useTheme hook and specifically from ./app/theme or react-native-paper. This enable us to use the Provider so if the value of theme changes we can respond.

Clarify colors, palette, and theme

Terms

• Colors = common color names paired with their corresponding hex values. Basically just a map
• Palette = a collection of colors. This is where we'll find things like primary and accent etc. The purpose of this is to enable various palettes like DarkMaterial or LightInitiativeTree or simply LightPalette and DarkPalette
• Theme = a collection of colors + palette + spacing + fonts

Remove Colors from the repository

Colors should refer to a specific nearly unchanging list of colors (e.g. https://github.com/callstack/react-native-paper/blob/main/src/styles/colors.tsx). We don't need colors and should remove it.

colors is being referenced in so many styles which does not have access to Provider context

Navigation Theme should be dynamically mapped

Instead of a static file (e.g. app/theme/navigation) we should use a mapping method within the given UI library mapper (e.g. app/paper/theme.ts) where a method like the following exists to map between the UI Library's theming approach to the Navigation

For example

export const mapToNavigationTheme = (theme:Theme):NavigationTheme => {
  return {
    dark: theme.dark,
    colors: {
      primary: theme.colors.primary,
      background: theme.colors.background,
      card: theme.colors.surface,
      text: theme.colors.text,
      border: theme.colors.surface,
      notification: theme.colors.primary
    }
  }
}

Do not use theme within Styles

As mentioned previously, styles.ts files are referencing theme for colors. The components and screens should be using the theme from useTheme or simply letting the components access the theme via the Provider. React Native Paper components will automatically receive changes to the theme.

Storybook theming is not in regular themes

The originally boilerplate has Storybook specific properties. We should either put this in a single file or leverage configurations for theme controls in Storybook