App.js (1496B)
1 // @flow 2 import React from 'react'; 3 import styled, {ThemeProvider} from 'styled-components'; 4 import {Router} from 'react-router'; 5 import {createBrowserHistory} from 'history'; 6 import theme from 'styled-theming'; 7 8 import routes from './routes'; 9 import {HeaderFooter} from './Components'; 10 import Style from './Theme/Style'; 11 import {colors} from './Theme/colors'; 12 13 const backgroundColor = theme('mode', { 14 light: colors.light, 15 dark: colors.dark, 16 }); 17 18 const OuterWrapper = styled.div` 19 min-height: calc(100vh - 2px); 20 background-color: ${backgroundColor}; 21 padding: 1px; 22 `; 23 24 const InnerWrapper = styled.div` 25 margin: 0 auto; 26 max-width: 600px; 27 28 @media (max-width: 599px) { 29 padding: 0 10px; 30 } 31 `; 32 33 const history = createBrowserHistory(); 34 35 const App = () => { 36 const [dark, setDark] = React.useState(true); 37 38 React.useEffect(() => { 39 const isDark = localStorage.getItem('dark') === 'true'; 40 setDark(isDark); 41 }, []); 42 43 const toggleDark = () => { 44 const newState = !dark; 45 localStorage.setItem('dark', JSON.stringify(newState)); 46 setDark(newState); 47 }; 48 49 return ( 50 <Router history={history}> 51 <ThemeProvider theme={{mode: dark ? 'dark' : 'light'}}> 52 <Style dark={dark} /> 53 <OuterWrapper> 54 <InnerWrapper> 55 <HeaderFooter dark={dark} toggleDark={toggleDark}> 56 {routes()} 57 </HeaderFooter> 58 </InnerWrapper> 59 </OuterWrapper> 60 </ThemeProvider> 61 </Router> 62 ); 63 }; 64 65 export default App;