Customizing Stylo theme
Theme structure
themes
|- default
|- __generated__
|- assorted
|- components
|- generic
|- types
|- __generated__
|- assorted
|- components
|- generic
types
All the types are defined under the directory called types.
default
It's the Stylo theme.
__generated__
The default style definitions, created by Stylo, are defined under directory called __generated__. These style definitions are used across all the other files in the theme. Do not directly modify the files under __generated__.
How to customize?
Any file which is outside of the directory __generated__ can be modified. All the files, which are meant to be modified, clearly state that they can be modified, like below.
/* -------------------------------------------------------------------------------- */
/* react-native-stylo */
/* GitHub: https://github.com/vivekmunde/react-native-stylo */
/* Docs: https://vivekmunde.github.io/react-native-stylo-documentation/ */
/* -------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------- */
/* Customize as per your needs */
/* -------------------------------------------------------------------------------- */
Variables
All the variables are defined in the file called variable.ts. Open the variable.ts file from the theme & modify them as per your needs.
Example 1: Add new background colors
1. Add type definition
1.1 Open the file types/variables.ts.
Add new color names as per your need.
/* -------------------------------------------------------------------------------- */
/* react-native-stylo */
/* GitHub: https://github.com/vivekmunde/react-native-stylo */
/* Docs: https://vivekmunde.github.io/react-native-stylo-documentation/ */
/* -------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------- */
/* Customize as per your needs */
/* -------------------------------------------------------------------------------- */
import _TVariable from './__generated__/variable';
type TVariable = _TVariable | 'Color.Pink' | 'Color.Violet';
export default TVariable;
1.2 Open the file types/generic/background-color.ts.
Add new background color names as per your need.
/* -------------------------------------------------------------------------------- */
/* react-native-stylo */
/* GitHub: https://github.com/vivekmunde/react-native-stylo */
/* Docs: https://vivekmunde.github.io/react-native-stylo-documentation/ */
/* -------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------- */
/* Customize as per your needs */
/* -------------------------------------------------------------------------------- */
import _TBackgroundColorStyle from '../__generated__/generic/background-color';
type TBackgroundColorStyle = _TBackgroundColorStyle | 'BackgroundColor.Pink' | 'BackgroundColor.Violet';
export default TBackgroundColorStyle;
2. Add style definition
2.1 Open the file default/variables.ts.
Add new colors, against the types defined in step 1.1, as per your need.
/* -------------------------------------------------------------------------------- */
/* react-native-stylo */
/* GitHub: https://github.com/vivekmunde/react-native-stylo */
/* Docs: https://vivekmunde.github.io/react-native-stylo-documentation/ */
/* -------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------- */
/* Customize as per your needs */
/* -------------------------------------------------------------------------------- */
import TVariable from '../types/variable';
import _Variables from './__generated__/variables';
const Variables: Record<'light' | 'dark', Record<TVariable, string | number>> = {
light: {
..._Variables.light,
'Color.Pink': '#FF69B4',
'Color.Violet': '#EE82EE',
},
dark: {
..._Variables.light,
'Color.Pink': '#FF69B4',
'Color.Violet': '#EE82EE',
},
};
export default Variables;
2.2 Open the file default/generic/background-color.ts.
Add new background colors, against the types defined in step 1.2, as per your need.
/* -------------------------------------------------------------------------------- */
/* react-native-stylo */
/* GitHub: https://github.com/vivekmunde/react-native-stylo */
/* Docs: https://vivekmunde.github.io/react-native-stylo-documentation/ */
/* -------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------- */
/* Customize as per your needs */
/* -------------------------------------------------------------------------------- */
import { StyleSheet, ViewStyle } from 'react-native';
import { TVariable } from '../../types';
import TBackgroundColorStyle from '../../types/generic/background-color';
import _getBackgroundColorStyles from '../__generated__/generic/background-color-styles';
const getBackgroundColorStyles = (variables: Record<TVariable, string | number>) => (
StyleSheet.create<Record<TBackgroundColorStyle, ViewStyle>>({
..._getBackgroundColorStyles(variables),
'BackgroundColor.Pink': {
backgroundColor: variables['Color.Pink'].toString(),
},
'BackgroundColor.Violet': {
backgroundColor: variables['Color.Violet'].toString(),
}
})
);
export default getBackgroundColorStyles;
Example 2: Extend theme by adding new styles
You can easily add a new styles which do not exist in the theme. For example, Card styles. Lets add a new style definitions for Card component.
1. Define style types
Create a new file under directory types as types/assorted/card.ts.
/* -------------------------------------------------------------------------------- */
/* react-native-stylo */
/* GitHub: https://github.com/vivekmunde/react-native-stylo */
/* Docs: https://vivekmunde.github.io/react-native-stylo-documentation/ */
/* -------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------- */
/* Customize as per your needs */
/* -------------------------------------------------------------------------------- */
export type TCardStyle = 'Card' | 'Card.Header' | 'Card.Body' | 'Card.Footer';
2. Apply the style types to desired components
The CardStyle is expected to be applied to View & Touchable components.
Open the file types/components/view.ts.
/* -------------------------------------------------------------------------------- */
/* react-native-stylo */
/* GitHub: https://github.com/vivekmunde/react-native-stylo */
/* Docs: https://vivekmunde.github.io/react-native-stylo-documentation/ */
/* -------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------- */
/* Customize as per your needs */
/* -------------------------------------------------------------------------------- */
// Other imports
import TCardStyle from '../assorted/card';
type TViewStyle =
// other style types
| TCardStyle;
export default TViewStyle;
Open the file types/components/touchable.ts.
/* -------------------------------------------------------------------------------- */
/* react-native-stylo */
/* GitHub: https://github.com/vivekmunde/react-native-stylo */
/* Docs: https://vivekmunde.github.io/react-native-stylo-documentation/ */
/* -------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------- */
/* Customize as per your needs */
/* -------------------------------------------------------------------------------- */
// Other imports
import TCardStyle from '../assorted/card';
type TTouchableStyle =
// other style types
| TCardStyle;
export default TViewStyle;
3. Create style definitions
Create a new file under directory default as default/assorted/card.ts.
/* -------------------------------------------------------------------------------- */
/* react-native-stylo */
/* GitHub: https://github.com/vivekmunde/react-native-stylo */
/* Docs: https://vivekmunde.github.io/react-native-stylo-documentation/ */
/* -------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------- */
/* Customize as per your needs */
/* -------------------------------------------------------------------------------- */
import { StyleSheet } from 'react-native';
const getCardStyles = (variables: Record<TVariable, string | number>) => (
StyleSheet.create({
Card: {
borderRadius: variables['Border.Radius'],
flexDirection: 'column',
},
'Card.Header': {
padding: variables.Padding,
borderTopLeftRadius: variables['Border.Radius'],
borderTopRightRadius: variables['Border.Radius'],
borderBottomWidth: 1,
borderBottomColor: variables['Border.Color'],
},
'Card.Body': {
padding: variables.Padding,
},
'Card.Footer': {
padding: variables.Padding,
borderBottomLeftRadius: variables['Border.Radius'],
borderBottomRightRadius: variables['Border.Radius'],
borderTopWidth: 1,
borderTopColor: variables['Border.Color'],
},
})
);
export default getCardStyles;
4. Add these styles to View styles
Open default/components/view-styles.ts
/* -------------------------------------------------------------------------------- */
/* react-native-stylo */
/* GitHub: https://github.com/vivekmunde/react-native-stylo */
/* Docs: https://vivekmunde.github.io/react-native-stylo-documentation/ */
/* -------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------- */
/* Customize as per your needs */
/* -------------------------------------------------------------------------------- */
import { StyleSheet } from 'react-native';
import getCardStyles from '../assorted/card-styles';
... // other imports
const getViewStyles = (variables: Record<TVariable, string | number>) => (
StyleSheet.create<Record<TViewStyle, ViewStyle>>({
... // other styles
...getCardStyles(variables),
})
);
export default getViewStyles;
5. Add these styles to Touchable styles
Open default/components/touchable-styles.ts
/* -------------------------------------------------------------------------------- */
/* react-native-stylo */
/* GitHub: https://github.com/vivekmunde/react-native-stylo */
/* Docs: https://vivekmunde.github.io/react-native-stylo-documentation/ */
/* -------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------- */
/* Customize as per your needs */
/* -------------------------------------------------------------------------------- */
import { StyleSheet } from 'react-native';
import getCardStyles from '../assorted/card-styles';
... // other imports
const getTouchableStyles = (variables: Record<TVariable, string | number>) => (
StyleSheet.create<Record<TTouchableStyle, ViewStyle>>({
... // other styles
...getCardStyles(variables),
})
);
export default getTouchableStyles;