import React from "react"; import { ThemeProvider } from "styled-components"; import { BrowserRouter as Router, Route, Switch } from "react-router-dom"; import { useDarkMode } from "../useDarkMode"; import Home from "../pages/Home"; import UserProfile from "../pages/UserProfile"; import { light as LightTheme, dark as DarkTheme, GlobalStyle } from "../style"; const App = () => { // Custom hook for persistent darkmode const [theme, setTheme] = useDarkMode(); return ( <ThemeProvider theme={{ ...theme, setTheme: () => { setTheme((state) => state.id === "light" ? DarkTheme : LightTheme ); }, }}> <GlobalStyle /> <Router> <Switch> <Route path='/' exact component={Home} /> <Route path='/user/:id' component={UserProfile} /> </Switch> </Router> </ThemeProvider> ); }; export default App;