-
Notifications
You must be signed in to change notification settings - Fork 7
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* integrated dark/light theme using react context and useState hooks
- Loading branch information
Showing
11 changed files
with
149 additions
and
61 deletions.
There are no files selected for viewing
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
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
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
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
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
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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,56 +1,90 @@ | ||
| import React, {PureComponent} from 'react'; | ||
| import SafeAreaView from 'react-native-safe-area-view'; | ||
| import { DrawerNavigatorItems } from 'react-navigation-drawer'; | ||
| import { StyleSheet, Text } from 'react-native'; | ||
| import React, { PureComponent } from 'react'; | ||
| import { StyleSheet, View, Text, Switch } from 'react-native'; | ||
| import { | ||
| Container, Header, Content, HeaderBody, | ||
| HeaderRight,Footer, | ||
| HeaderRight, Footer, | ||
| HeaderLeft, Button | ||
| } from '../../components/index'; | ||
| import { GlobalStyle } from '../../theme/global'; | ||
| import store from '../../store/configureStore'; | ||
| import * as loginTypes from '../login/types'; | ||
| import { wrapTheme } from '../../theme/themeProvider'; | ||
| import storageService from '../../utils/storageService'; | ||
|
|
||
|
|
||
| class Sidemenu extends PureComponent { | ||
|
|
||
| export class SidemenuScreen extends PureComponent { | ||
| constructor(props) { | ||
| super(props) | ||
| console.log(props) | ||
|
|
||
| this.state = { | ||
| isDarkMode: this.props.theme.key === 'Dark Mode' ? true : false | ||
| } | ||
| } | ||
|
|
||
| onLogOut() { | ||
| store.dispatch({ | ||
| type: loginTypes.LOGOUT | ||
| }); | ||
| } | ||
| onThemeChange() { | ||
| this.props.setTheme(this.state.isDarkMode ? 'Light Mode' : 'Dark Mode'); | ||
| storageService.setThemeId(this.state.isDarkMode ? 'Light Mode' : 'Dark Mode'); | ||
| this.setState((prev) => ({ isDarkMode: !prev.isDarkMode })) | ||
| } | ||
| render() { | ||
| return ( | ||
| <Container> | ||
| <Header | ||
| barStyle="dark-content" | ||
| statusbarColor="white"> | ||
| <HeaderLeft /> | ||
| <HeaderBody> | ||
| <Text style={[GlobalStyle.headerTitle]}>Boilerplate</Text> | ||
| </HeaderBody> | ||
| <HeaderRight /> | ||
| </Header> | ||
| <Content> | ||
| </Content> | ||
| <Footer> | ||
| <Button | ||
| onClick={()=> this.onLogOut()} | ||
| style={{backgroundColor: 'red'}}> | ||
| <Text style={{color:'white'}}>Logout</Text> | ||
| </Button> | ||
| </Footer> | ||
| </Container> | ||
| ) | ||
| const { isDarkMode } = this.state; | ||
| const { theme } = this.props; | ||
| return ( | ||
| <Container> | ||
| <Header | ||
| barStyle="dark-content" | ||
| statusbarColor="white"> | ||
| <HeaderLeft /> | ||
| <HeaderBody> | ||
| <Text style={[GlobalStyle.headerTitle]}>Boilerplate</Text> | ||
| </HeaderBody> | ||
| <HeaderRight /> | ||
| </Header> | ||
| <Content style={{ | ||
| backgroundColor: theme.backgroundColor | ||
| }}> | ||
| <Text style={{ | ||
| marginBottom: 40, | ||
| color: theme.color, | ||
| fontWeight: 'bold' | ||
| }}>Switch Theme</Text> | ||
| <View style={styles.switchContainer}> | ||
| <Text style={{ color: theme.color, | ||
| fontSize: isDarkMode ? 14 : 16, | ||
| fontWeight: isDarkMode ? '100' : 'bold' }}>{'Light Mode'}</Text> | ||
| <Switch | ||
| onValueChange={() => this.onThemeChange()} | ||
| value={isDarkMode} /> | ||
| <Text style={{ color: theme.color, | ||
| fontSize: isDarkMode ? 16 : 14, | ||
| fontWeight: isDarkMode ? 'bold' : '100' }}>{'Dark Mode'}</Text> | ||
| </View> | ||
| </Content> | ||
| <Footer> | ||
| <Button | ||
| onClick={() => this.onLogOut()} | ||
| style={{ backgroundColor: 'red' }}> | ||
| <Text style={{ color: 'white' }}>Logout</Text> | ||
| </Button> | ||
| </Footer> | ||
| </Container> | ||
| ) | ||
| } | ||
| } | ||
|
|
||
| export const SidemenuScreen = wrapTheme(Sidemenu); | ||
| const styles = StyleSheet.create({ | ||
| container: { | ||
| flex: 1, | ||
| }, | ||
| switchContainer: { | ||
| flexDirection: 'row', | ||
| justifyContent: 'space-evenly', | ||
| alignItems: 'center', | ||
| } | ||
| }); |
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,4 +1,38 @@ | ||
| import THEMES from './themes.json'; | ||
| import React, { useContext, useState, useEffect } from 'react'; | ||
|
|
||
| export const themes = THEMES; | ||
| export const theme = THEMES[1]; | ||
| export const ThemeContext = React.createContext(); | ||
|
|
||
| import storageService from '../utils/storageService'; | ||
|
|
||
|
|
||
| import Themes from './themes.json'; | ||
|
|
||
|
|
||
|
|
||
| export const ThemeContextProvider = ({ children }) => { | ||
| const [themeID, setThemeID] = useState(); | ||
|
|
||
| useEffect(() => { | ||
| (async () => { | ||
| const storedThemeID = await storageService.getThemeId(); | ||
| if (storedThemeID) setThemeID(storedThemeID); | ||
| else setThemeID(Themes[0].key); | ||
| })(); | ||
| }, []); | ||
| return ( | ||
| <ThemeContext.Provider value={{ themeID, setThemeID }}> | ||
| {!!themeID ? children : null} | ||
| </ThemeContext.Provider> | ||
| ); | ||
| }; | ||
|
|
||
| export function wrapTheme(Component) { | ||
| return props => { | ||
| const { themeID, setThemeID } = useContext(ThemeContext); | ||
| const getTheme = themeID => Themes.find(theme => theme.key === themeID); | ||
| const setTheme = themeID => setThemeID(themeID); | ||
|
|
||
| return <Component {...props} themes={Themes} theme={getTheme(themeID)} | ||
| setTheme={setTheme}/>; | ||
| }; | ||
| } |
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,22 +1,12 @@ | ||
| [ | ||
| { | ||
| "key": "MAASTRICHT BLUE", | ||
| "backgroundColor": "#011627", | ||
| "color": "#ffffff" | ||
| "key": "Light Mode", | ||
| "backgroundColor": "white", | ||
| "color": "black" | ||
| }, | ||
| { | ||
| "key": "MAXIMUM BLUE GREEN", | ||
| "backgroundColor": "#2EC4B6", | ||
| "color": "#ffffff" | ||
| }, | ||
| { | ||
| "key": "ROSE MADDER", | ||
| "backgroundColor": "#E71D36", | ||
| "color": "#ffffff" | ||
| }, | ||
| { | ||
| "key": "BRIGHT YELLOW (CRAYOLA)", | ||
| "backgroundColor": "#FF9F1C", | ||
| "color": "#1F2D3D" | ||
| "key": "Dark Mode", | ||
| "backgroundColor": "#24292e", | ||
| "color": "white" | ||
| } | ||
| ] |
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
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