React & React Native Theme Manager
Goal: Make it easier to support multiple styles in your app (e.g light and dark theme).
-- Contributions are welcome!
Install
$ npm i -S react-themable@latest
Features
-
React
andReact Native
support - Change component theme using
theme
prop - Get theme from parent components using
theme
context - Support global variables per theme (e.g.
$backgroundColor
or nested$card.backgroundColor
) - Use cache (memoize) to prevent unneed style recreation
Example
You can copy and paste both files below for a fully working example:
App.js
;;; ; // tip: import theme variables from different files (e.g. ./themes/dark.theme.js)const globalThemeVariables = fontSize: 20 ;const darkThemeVariables = backgroundColor: '#333333' color: '#666666' ;const lightThemeVariables = backgroundColor: '#eeeeee' color: '#111111' ; // configure variables (optional, but makes life easier)// if I dont pass a theme, styles will be applied globally.// you can also specify the themes as an array at the first argument (e.g. ['dark', 'light'])ThemeManager;ThemeManager;ThemeManager; const ThemableView = ; = <ThemableView style= flex: 1 paddingTop: 22 theme='blue'> <Button></Button> <Button theme='dark'>Dark</Button> <Button theme='light'>Light</Button> </ThemableView>; AppRegistry;
src/Button.js
;;; const Button = { // if you are not using a pure funciton, // you access the theme via this.context.theme themeManager; const styles = themeManager; return <View style=stylesview> <Text style=stylestext>propschildren</Text> </View> ;} const themeManager = ; // simple mode -- styles applied only on blue themethemeManager; // if I dont pass a theme, styles will be applied globally.// variables will still get the correspondent theme value.// you can also specify the themes as an array at the first argument (e.g. ['dark', 'light'])themeManager; Button;
Developer
- Full Stack Developer (Node.js, GraphQL, React, React Native)
- Twitter: @brunolemos
License
- MIT