This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 = { |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<Box bg="primary" /> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { ThemeProvider } from 'styled-components' | |
<ThemeProvider theme={theme}> | |
<App /> | |
</ThemeProvider> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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}> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
React.useEffect(() => { | |
async function getMode() { | |
const stored = await colorModeStorage.get() | |
setMode(stored) | |
} | |
getMode() | |
}, []) | |
React.useEffect(() => { | |
if (!mode) return |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
modes: { | |
dark: { | |
text: '#fff', | |
background: '#000', | |
primary: '#0cf', | |
secondary: '#f0e', | |
}, | |
cyan: { | |
text: '#023', | |
background: '#0ff', |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import * as React from 'react' | |
type AppContextType = { | |
mode: string | |
toggleMode: () => void | |
} | |
export const AppContext = React.createContext<Partial<AppContextType>>({ | |
mode: 'default' | |
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
export const colorModeStorage = { | |
get: async (): Promise<string | null> => { | |
return await AsyncStorage.getItem('MODE') | |
}, | |
set: (mode: string): Promise<void> => { | |
return AsyncStorage.setItem('MODE', mode) | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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) => |
NewerOlder