IThemeColour | EF React Native Style Framework

The various groupings of colours to use for different components in an application. Can be extended to provide application specific groupings.

example

Using the mixins ```ts import { TextStyle } from 'react-native'; import { Theme } from '@ef-carbon/react-native-style'; const theme = new Theme(); const style: TextStyle = { ...theme.colour.font.accent.normal, ...theme.colour.background.accent.normal, ...theme.colour.border.accent.normal, ...theme.border.width.normal, }; ```

example

Extending theme colour groupings ```ts interface IMyColours extends IColours { message: IColours; }

interface IMyTheme extends ITheme {}

const theme: Readonly = new MyTheme();

// The normal theme colours theme.colour.font.primary.normal; theme.colour.background.primary.normal; theme.colour.border.primary.normal;

// The extended grouping theme.colour.message.primary.normal; `

see

ThemeColour

Hierarchy

IThemeColour

Implemented by

ThemeColour

Index

Properties

background

background: IColours<IBaseColour<IBackgroundStyle>>

The style mixins to use for the font colour

example: Using the mixins ```ts import { TextStyle } from 'react-native'; import { Theme } from '@ef-carbon/react-native-style'; const theme = new Theme(); const style: TextStyle = { ...theme.colour.background.accent.normal, }; ```
see: ThemeColours

border

border: IColours<IBaseColour<IBorderStyle>>

The style mixins to use for the font colour

example: Using the mixins ```ts import { TextStyle } from 'react-native'; import { Theme } from '@ef-carbon/react-native-style'; const theme = new Theme(); const style: TextStyle = { ...theme.colour.border.accent.normal, ...theme.border.width.normal, }; ```
see: ThemeColours

font

font: IColours<IBaseColour<IFontStyle>>

The style mixins to use for the font colour

example: Using the mixins ```ts import { TextStyle } from 'react-native'; import { Theme } from '@ef-carbon/react-native-style'; const theme = new Theme(); const style: TextStyle = { ...theme.colour.font.accent.normal, }; ```
see: ThemeColours