Options
All
  • Public
  • Public/Protected
  • All
Menu

Class ThemeColour

Provides aliases for specific theme colours. Provides style mixins for the IThemeColour aliases names.

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
Customising the base colour ```ts import { TextStyle } from 'react-native'; import { constants, Theme, ThemeColour } from '@ef-carbon/react-native-style'; const colour = ThemeColour({ constants, base: 'blue' }); const theme = new Theme({ colour }); ```
see

IColours for the available base colour names

example
Customising the colour bases ```ts import { TextStyle } from 'react-native'; import { constants, Theme, ThemeColour } from '@ef-carbon/react-native-style'; const colour = ThemeColour({ constants, base: 'blue', font: 'red', background: 'green', border: 'blue' }); const theme = new Theme({ colour }); ```

Hierarchy

  • ThemeColour

Implements

Index

Constructors

Properties

Constructors

constructor

  • new ThemeColour(__namedParameters: object): ThemeColour

  • Parameters

    • __namedParameters: object
      • background: undefined | IThemeColours<IColour<IBackgroundColourStyles>> | "red" | "pink" | "purple" | "deepPurple" | "indigo" | "blue" | "lightBlue" | "cyan" | "teal" | "green" | "lightGreen" | "lime" | "yellow" | "amber" | "orange" | "deepOrange" | "brown" | "grey" | "blueGrey" | "black" | "white"
      • base: "red" | "pink" | "purple" | "deepPurple" | "indigo" | "blue" | "lightBlue" | "cyan" | "teal" | "green" | "lightGreen" | "lime" | "yellow" | "amber" | "orange" | "deepOrange" | "brown" | "grey" | "blueGrey" | "black" | "white"
      • border: undefined | IThemeColours<IColour<IBorderColourStyles>> | "red" | "pink" | "purple" | "deepPurple" | "indigo" | "blue" | "lightBlue" | "cyan" | "teal" | "green" | "lightGreen" | "lime" | "yellow" | "amber" | "orange" | "deepOrange" | "brown" | "grey" | "blueGrey" | "black" | "white"
      • constants: object
      • font: undefined | IThemeColours<IColour<IFontColourStyles>> | "red" | "pink" | "purple" | "deepPurple" | "indigo" | "blue" | "lightBlue" | "cyan" | "teal" | "green" | "lightGreen" | "lime" | "yellow" | "amber" | "orange" | "deepOrange" | "brown" | "grey" | "blueGrey" | "black" | "white"

    Returns ThemeColour

Properties

background

background: Readonly<IColours<IBaseColour<IBackgroundStyle>>>

The style mixins to use for the background colour

see

ThemeColours

border

border: Readonly<IColours<IBaseColour<IBorderStyle>>>

The style mixins to use for the border colour

see

ThemeColours

constants

constants: Readonly<IConstants>

The constants to pull colours from the colour swatch

see

Constants

font

font: Readonly<IColours<IBaseColour<IFontStyle>>>

The style mixins to use for the font colour

see

ThemeColours