jeanverster

import * as React from 'react'
import { Dimensions } from 'react-native'
import Animated from 'react-native-reanimated'
import Svg, { Path } from 'react-native-svg'
import { theme } from '../../theme'
import { BodyText, H1, H5 } from '../../typography'
import Box from '../Box'
import Card from '../Card'

export type PointsDialProps = {

jeanverster

<Box bg="primary" />

jeanverster

import { ThemeProvider } from 'styled-components'

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

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

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

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

jeanverster

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

jeanverster

import * as React from 'react'

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

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

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 { 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) =>