jeanverster

colors: {
  text: '#0A0A0A',
  background: '#FFF',
  primary: '#1476F2',
  secondary: '#595959',
  border: '#E2E8F0',
  modes: {
    dark: {
      text: '#FFF',
      background: '#141414',

jeanverster

const AppNavigation = createAppContainer(
  createAnimatedSwitchNavigator(
    {
      LaunchScreen,
      LoginStack,
      HomeTabs
    },
    {
      initialRouteName: 'LaunchScreen'
    }

jeanverster

import { get, merge } from 'lodash'
import * as React from 'react'
import { ThemeProvider } from 'styled-components'
import AppProvider from './src/context'
import AppNavigation from './src/navigation'
import { modes, theme as baseTheme } from './src/theme'
import { colorModeStorage } from './src/utils'

const AppWithProvider = () => {
  const getTheme = (mode) =>

jeanverster

export const colorModeStorage = {
  get: async (): Promise<string | null> => {
    return await AsyncStorage.getItem('MODE')
  },
  set: (mode: string): Promise<void> => {
    return AsyncStorage.setItem('MODE', mode)
  }
}

jeanverster

import * as React from 'react'

type AppContextType = {
  mode: string
  toggleMode: () => void
}

export const AppContext = React.createContext<Partial<AppContextType>>({
  mode: 'default'
})

jeanverster

modes: {
  dark: {
    text: '#fff',
    background: '#000',
    primary: '#0cf',
    secondary: '#f0e',
  },
  cyan: {
    text: '#023',
    background: '#0ff',

jeanverster

React.useEffect(() => {
  async function getMode() {
    const stored = await colorModeStorage.get()
    setMode(stored)
  }
  getMode()
}, [])

React.useEffect(() => {
  if (!mode) return

jeanverster

import { modes } from './src/theme'

const [mode, setMode] = React.useState(modes[0])

const toggleMode = () => {
  const i = (modes.indexOf(mode) + 1) % modes.length
  setMode(modes[i])
}

<ThemeProvider theme={theme}>

jeanverster

import { modes, theme as baseTheme } from './src/theme'
import { get, merge } from 'lodash'

const getTheme = (mode) =>
  merge({}, baseTheme, {
    colors: get(baseTheme.colors.modes, mode, baseTheme.colors)
  }
  
const theme = getTheme(mode)

jeanverster

import { ThemeProvider } from 'styled-components'

<ThemeProvider theme={theme}>
  <App />
</ThemeProvider>