React Native – How to build a simple and scalable app theming strategy

Here is how I would want to consume a `theme` and have access to its properties and methods but also benefit from it automatically switching to the appropriate theme mappings (fonts, colour sets, etc.).

@WithTheme() // Notice this bad body here - if you're into that, I got you.
class App extends React.Component<AppProps, AppState> {
  render() {
    const { theme } = this.props // => `theme` is guaranteed by the `WithTheme` class decorator. If you don't resonate with the decorator pattern, think of it as a higher-order function, and that would work the same.
    const styleView = {
      backgroundColor: theme.primaryBackgroundColor // => This is how a theme backround colour would be consumed
    };
    const styleText = [
      theme.fonts.BodyRegular, // => This is how I would want an entire typography style applied (family, size, letter spacing, etc).
      { color: theme.primaryFontColor } // => This is how I would subscribe to a theme colour - the actual color value (depending on which theme is active) will be handled in the context itself.
    ];

    return (
      <View style={styleView}>
        <Text style={styleText}>
          Hello world
        </Text>
      </View>
    );
  }
}

├── providers
│   ├── index.ts
│   └── theme
│       ├── ThemeContext.Provider.const.ts
│       └── ThemeContext.Provider.tsx
├── theme
│   ├── fixtures
│   │   ├── colors.json
│   │   ├── colors.standard.json
│   │   ├── typography.json
│   │   └── themes.json
│   ├── index.ts
│   ├── theme.const.ts
│   ├── theme.test.ts
│   ├── theme.ts
│   └── theme.utils.tsx

1. Three font colour variants (two colour alternatives and a disabled colour version for that specific theme variant, it really depends on your design);
2. Three background colour variants;
3. Three border colour variants;
4. Optional - box shadow colour information - depends on the design you have, but usually shadow is important to communicate elevation and it does not hurt to have it declared here.

{  
  "@class": "Theme",  
  "@version": "0.0.1",  
  "light": {  
    "primaryFontColor": "Color1",  
    "secondaryFontColor": "Color2",  
    "disabledFontColor": "Color3",  

    "primaryBackgroundColor": "#fff",  
    "secondaryBackgroundColor": "Grey2",  
    "disabledBackgroundColor": "Grey3",  

    "primaryBorderColor": "Grey1",  
    "secondaryBorderColor": "Grey2",
    "disabledBorderColor": "Grey3",  

    "disabledColor": "Grey3",  
    "boxShadowColor": "rgba(1, 10, 20, 0.1)"  
 },  
  "dark": {  
    "primaryFontColor": "ColorAlternative1",  
    "secondaryFontColor": "ColorAlternative2",  
    "disabledFontColor": "ColorAlternative3",  

    "primaryBackgroundColor": "#fff",  
    "secondaryBackgroundColor": "ColorAlternative2",  
    "disabledBackgroundColor": "ColorAlternative3",  

    "primaryBorderColor": "ColorAlternative1",  
    "secondaryBorderColor": "ColorAlternative2",
    "disabledBorderColor": "ColorAlternative3",  

    "disabledColor": "ColorAlternative3",  
    "boxShadowColor": "rgba(1, 10, 20, 0.4)"   
 }
}

// theme.ts

// [...]
import Themes from './fixtures/themes.json'  
import Colors from './fixtures/colors.json'  
import ColorsStandard from './fixtures/colors.standard.json'  
import Typography from './fixtures/typography.json'

const ThemeFixtureProvider: ThemeFixtureProvider = (() => {  
    const { light, dark } = Themes  
    const colors: FixtureColor = merge(ColorsStandard, Colors)  
    const typography: FixtureTypography = Typography  
    const platformTypography: { [font in ThemePlatformTypography]: ThemePlatformTypographyProps } = Typography[getPlatform()]

    // Extra step here to traverse and process your fixtures (scale your fonts or normalise your colour information, etc.)
        // fancyColourProcessor(colors)
        // fancyTypographyProcessor(platformTypography)

    return {  
      [ThemeModes.Light]: {  
        ...light,  
        colors,
        typography: platformTypography
      },  
      [ThemeModes.Dark]: {  
        ...dark,  
        colors,
        typography: platformTypography,
      },
      /* 👉🏻 You can add other keys here, but having at least these two will help us work more easily with most platforms (web & native) as these property names (light, dark) are ubiquitous.**/
    }  
  })()

const originalObject = {
  prop1: "ABC",
  prop2: "DEF"
};

const proxyHandler = {
  get: (target, prop, receiver) => {
    if (prop === 'prop2') {
        return '🚀';
    }

    return target[prop];
  }
};

const proxyExample = new Proxy(originalObject, proxyHandler);

console.log('proxyExample', proxyExample.prop1) // 'ABC'
console.log('proxyExample 2', proxyExample.prop2) // '🚀'

// As you can see, the original object remains intact:
console.log('originalObject', proxyExample.prop2) // 'DEF'

import React, { useEffect, useMemo } from 'react'
import { useColorScheme } from 'react-native'
import { Theme, ThemeFixtureProvider, ThemeModes } from '@/themes'
import { ThemeContext } from './ThemeContext.Provider.const'

interface PropsThemeContextProvider {
  children?: React.ReactChildren
  onChange?: (themeId: ThemeModes) => Theme
}


const themeContextProxyHandler = {

    /**
     * @description
     * A simple getter interceptor that returns a default in case the `themeId` does not match what is in our original `ThemeFixtureProvider`.
     */
    get: function(target, prop, receiver) {
        if (prop === 'themeId' && !Reflect.has(ThemeFixtureProvider, prop)) {
            return ThemeFixtureProvider.Light
        }

        return Reflect.get(...arguments)
    },

    /**
     * @description
     * A simple setter interceptor that prevents setting an inexistent `themeId` wrt. to what is declared in `ThemeFixtureProvider`.
     */
    set: function(target, prop, receiver) {
        if (prop === 'themeId' && !Reflect.has(ThemeFixtureProvider, prop)) {
            return
        }

        Reflect.get(...arguments)
    },
}

const themeContextProxy = new Proxy(Object.create(null), themeContextProxyHandler)
const ThemeContext = React.createContext(themeContextProxy)

export const ThemeContextProvider = (props: PropsThemeContextProvider) => {
  const themeId = useColorScheme() // Fetch the current system theme.
  const theme = useMemo<Theme>(() => ThemeFixtureProvider[themeId as ThemeModes], [themeId]) // Extract the entire theme information.

  useEffect(() => {
    props.onChange(theme, themeId)
  }, [theme, themeId])

  return (
    <ThemeContext.Provider
      value={{
        themeId,
        theme,
      }}
    >
      {props.children}
    </ThemeContext.Provider>
  )
}


export const withThemeContext = (ChildComponent: React.FC<any> | React.ComponentClass<any>, options?: any) => {
      return (props: any) => (
        <ThemeContext.Consumer>
          {(context) => <ChildComponent {...props} {...context} {...options} />}
        </ThemeContext.Consumer>
      )
}

import { useContext } from 'react'
import { 
    Theme, 
    ThemeFixtureProvider, 
    ThemeModes 
} from '@/themes'
import { ThemeContext } from '@providers/theme/ThemeContext.Provider.const'



interface UseThemeHook {
    theme: Theme
    themeId: ThemeModes
    setTheme: (themeId: ThemeModes) => Theme
}

export function useTheme(): UseThemeHook {
    const { theme, setTheme, themeId } = useContext(ThemeContext)

    return {
        theme,
        themeId,
        setTheme
    }
}

// Our class decorator (yes, some still prefer class based implementations)
export function WithTheme() {
    return (target: new (...args: any[]): any): any => {

        if (!isClassComponent(target)) {

            throw TypeError(
                'Invalid type, pass a React `class` instead.'
            )

        }

        const Component = withThemeContext(target, options)

        return class WithThemeDecorator extends target<any, any> {

            render() {
                return <Component {...this.props} />
            }
        }
    }
}

const Header: React.FC<{title: string}> = ({title}) => {
    const {theme} = useTheme()

    return <View>
        <Text style={[
            theme.typography.BodyRegular,
            { color: theme.primaryFontColor}
        ]}>
            {title}
        </Text>
    <View>
}

//app.ts

@WithTheme() 
class App extends React.Component<any, any> {

    render() {
        const {theme} = this.props

        return (
            <View style={{backgroundColor: theme.primaryBackgroundColor}}>
                <Header title={'Hello world'}/>
            </View>
        )
    }
}

//index.ts

export const AppExample: React.FC<any> = () => (
  <ThemeContextProvider>
    <App />
  </ThemeContextProvider>
)