ITheme | EF React Native Style Framework

The theme interface provides a utility kit of styles. The theme interface is used to create themed components.

example

Using a the theme in a component ```ts import { ITheme } from '@ef-carbon/react-native-style';

export interface IProps { // The theme for the component theme?: ITheme; }

export interface IState { }

class ThemedComponent extends React.PureComponent<IProps, IState> { render(): React.ReactNode { const { style: propStyle, theme } = this.props; const baseStyle = styles.container

// Pick out relevant aliases for our component
const themeStyle = !theme ? undefined : {
  // Override the default styles with the theme
  ...theme.margin.normal,
  ...theme.padding.normal,
  ...theme.border.radius.normal,
  ...theme.border.width.normal,

  // Use the colour aliases
  ...theme.colour.border.primary.normal,
  ...theme.colour.background.primary.normal,
}

// Add the theme to the style. Make sure to allow the property to override the theme styles
const style = [ baseStyle, themeStyle, propStyle ];

return (
  <View style={style}>
    <Text style={styles.text}>Hello, world!</Text>
  </View>;
);

} } `

example

Some example aliases ```ts theme.font.primary; // A full TextConstants theme.opacity.cloudy; // A slighty transparent opacity value theme.animation.timing.fast; // A short amount of milliseconds theme.animation.easing.normal; // The normal animation easing function theme.border.radius.large; // A large border radius to apply to elements ```

see

see

see

see

see

see

see

see

Hierarchy

ITheme

Implemented by

Theme

Index

Properties

border

border: IBorder

Font alias mixins that can be used to style borders. Various high level categories are provided such as:

width
radius
…etc…

See the IThemeBorder for more information on the mixins and the alias uses.

example

Using the mixins ```ts import { ITheme } from '@ef-carbon/react-native-style';

export interface IProps { theme?: ITheme; }

export interface IState { }

class ThemedComponent extends React.PureComponent<IProps, IState> { render(): React.ReactNode { const textStyle = !theme ? undefined : { ...theme.border.radius.normal, ...theme.border.width.normal, }

return (
  <Text style={textStyle}>Hello, world!</Text>
);

} } `

see

IThemeBorder

colour

colour: IColour

Provides alias mixins for providing colours to common styles. The following aliases are provided:

font - provides the color mixin
background - provides the backgroundColor mixin
border - provides the borderColor mixin
…etc…

See the IThemeColour for more information on the mixins and the alias uses.

example

Using the mixins ```ts import { ITheme } from '@ef-carbon/react-native-style';

export interface IProps { theme?: ITheme; }

export interface IState { }

class ThemedComponent extends React.PureComponent<IProps, IState> { render(): React.ReactNode { const textStyle = !theme ? undefined : { ...theme.colour.background.red.light, ...theme.colour.border.red.dark, ...theme.colour.font.red.dark, ...theme.border.width.normal, }

return (
  <Text style={textStyle}>Hello, world!</Text>
);

} } `

see

IThemeColour

constants

constants: IConstants

The constants that were used to derive the theme values.

see: IConstants

font

font: IFont

Font alias mixins that can be used to style text. Various high level aliases are provided such as:

primary
secondary
accent
information
…etc…

See the IThemeFont for more information on the mixins and the alias uses.

example

Using the mixins ```ts import { ITheme } from '@ef-carbon/react-native-style';

export interface IProps { theme?: ITheme; }

export interface IState { }

class ThemedComponent extends React.PureComponent<IProps, IState> { render(): React.ReactNode { const textStyle = !theme ? undefined : { ...theme.font.primary, // Set the font to the primary style }

return (
  <Text style={textStyle}>Hello, world!</Text>
);

} } `

see

IThemeFont

margin

margin: IMargin

Mixins that can be used to add margins to an element.

example

Using the mixins ```ts import { ITheme } from '@ef-carbon/react-native-style';

export interface IProps { // The theme for the component theme?: ITheme; }

export interface IState { }

class ThemedComponent extends React.PureComponent<IProps, IState> { render(): React.ReactNode { const { style: propStyle, theme } = this.props; const baseStyle = styles.container

// Pick out relevant aliases for our component
const themeStyle = !theme ? undefined : {
  ...theme.margin.normal,  // Use the mixin
}

// Add the theme to the style. Make sure to allow the property to override the theme styles
const style = [ baseStyle, themeStyle, propStyle ];

return (
  <View style={style}>
    <Text style={styles.text}>Hello, world!</Text>
  </View>;
);

} } `

see

IMargin

opacity

opacity: IOpacity

Mixins that can be used to change the opacity of the component. Provides the opacity property in the mixin.

example

Using the mixins ```ts import { ITheme } from '@ef-carbon/react-native-style';

export interface IProps { theme?: ITheme; }

export interface IState { }

class ThemedComponent extends React.PureComponent<IProps, IState> { render(): React.ReactNode { const textStyle = !theme ? undefined : { ...theme.opacity.cloudy, }

return (
  <Text style={textStyle}>Hello, world!</Text>
);

} } `

see

IThemeOpacity

padding

padding: IPadding

Mixins that can be used to add padding to an element.

example

Using the mixins ```ts import { ITheme } from '@ef-carbon/react-native-style';

export interface IProps { // The theme for the component theme?: ITheme; }

export interface IState { }

class ThemedComponent extends React.PureComponent<IProps, IState> { render(): React.ReactNode { const { style: propStyle, theme } = this.props; const baseStyle = styles.container

// Pick out relevant aliases for our component
const themeStyle = !theme ? undefined : {
  ...theme.padding.normal,  // Use the mixin
}

// Add the theme to the style. Make sure to allow the property to override the theme styles
const style = [ baseStyle, themeStyle, propStyle ];

return (
  <View style={style}>
    <Text style={styles.text}>Hello, world!</Text>
  </View>;
);

} } `

see

IPadding