The theme class provides a quick way to fulfill the ITheme interface. Themed components pick out styling
aliases from the ITheme interface to style themselves. The Theme class allows for pervasive styling
changes to occur to a application. For example, updating one of the red normal colour constant colours will
update that colour across the application.
The only required argument is a base colour that is used to determine the secondary and accent colours for the
theme.
const theme = new Theme({ base: 'blue' });
The base colour name can be one of the aliases properties in the IColours interface.
The theme is a nested structure of classes that can all be overridden and customised.
import {
Theme,
Constants,
Font,
FontSize,
Colours
} from'@ef-carbon/react-native-style';
// Customise the divisions used for the font sizeconst fontSize = new FontSize({ base: {
200: 9, // smallest300: 12, // smaller400: 14, // small500: 16// normal
}});
// Package up the font size into the font constants. The rest of the font constants will use their default valuesconst font = new Font({ size: fontSize });
// Override some of the colours used to determine the theme mixinsconst colours = new Colours({
// Specify the specific shades of grey
grey: {
100: '#eff3f5', // theme.constants.colour.grey.lightest200: '#dbe6ec', // theme.constants.colour.grey.lighter300: '#99a9b3', // theme.constants.colour.grey.light500: '#67747c', // theme.constants.colour.grey.normal600: '#3b444f', // theme.constants.colour.grey.darkened700: '#2c3643'// theme.constants.colour.grey.dark
},
// Provide a starting value for the central blue value.// The rest of the shades will be automatically calculated// by adjusting the lightness of the colour
blue: '#1c5ff5'// theme.constants.colour.blue.normal
});
// Package up the colours and font constantsconst constants = new Constants({ font, colour: colours });
// Use the constants in the theme that will// be used for the style mixinsconst theme = new Theme({
base: 'blue',
constants
});
The theme class provides a quick way to fulfill the ITheme interface. Themed components pick out styling aliases from the ITheme interface to style themselves. The
Themeclass allows for pervasive styling changes to occur to a application. For example, updating one of the rednormalcolour constant colours will update that colour across the application.The only required argument is a
basecolour that is used to determine thesecondaryandaccentcolours for the theme.const theme = new Theme({ base: 'blue' });The base colour name can be one of the aliases properties in the IColours interface.
The theme is a nested structure of classes that can all be overridden and customised.
import { Theme, Constants, Font, FontSize, Colours } from '@ef-carbon/react-native-style'; // Customise the divisions used for the font size const fontSize = new FontSize({ base: { 200: 9, // smallest 300: 12, // smaller 400: 14, // small 500: 16 // normal }}); // Package up the font size into the font constants. The rest of the font constants will use their default values const font = new Font({ size: fontSize }); // Override some of the colours used to determine the theme mixins const colours = new Colours({ // Specify the specific shades of grey grey: { 100: '#eff3f5', // theme.constants.colour.grey.lightest 200: '#dbe6ec', // theme.constants.colour.grey.lighter 300: '#99a9b3', // theme.constants.colour.grey.light 500: '#67747c', // theme.constants.colour.grey.normal 600: '#3b444f', // theme.constants.colour.grey.darkened 700: '#2c3643' // theme.constants.colour.grey.dark }, // Provide a starting value for the central blue value. // The rest of the shades will be automatically calculated // by adjusting the lightness of the colour blue: '#1c5ff5' // theme.constants.colour.blue.normal }); // Package up the colours and font constants const constants = new Constants({ font, colour: colours }); // Use the constants in the theme that will // be used for the style mixins const theme = new Theme({ base: 'blue', constants });ITheme
Constants
ThemeColour
ThemeFont
Margin
Padding
ThemeOpacity
ThemeBorder
IConstants
IThemeColour
IThemeFont
IMargin
IPadding
IThemeOpacity
IThemeBorder