Options
All
  • Public
  • Public/Protected
  • All
Menu

Interface IThemeColoursOptions<T>

The options that can customise the colours in the ThemeColours class. See the properties of the interface for ways to customise the colours.

Type parameters

  • T: ViewStyle

Hierarchy

  • object
    • IThemeColoursOptions

Index

Properties

Methods

Properties

Optional base

base: keyof IBaseColours

Selects the general shade of the colours. Will default to grey if not provided. Override the primary, secondary, accent, divider, etc colours if not provided.

example
Specifing a single base colour ```ts import { ThemeColours, themeColourConvertFont, IFontColourStyles, constants, } from '@ef-carbon/react-native-style'; const colours = new ThemeColours({ base: 'blue', constants, convert: themeColourConvertFont, }); ```
example
Specifing a alias overrides ```ts import { ThemeColours, themeColourConvertFont, IFontColourStyles, constants, } from '@ef-carbon/react-native-style'; const colours = new ThemeColours({ base: 'blue', constants, convert: themeColourConvertFont, secondary: constants.colour.deepPurple, accent: constants.colour.orange, }); ```

constants

constants: Readonly<IConstants>

The Constants to pick colours from

Optional shades

shades: keyof IColour | Partial<IThemeColoursShades>

The shades of the named colours such as success, failure, etc. Can be a single shade for all such as light or and object that specifies each shade for each named colour.

example
Specifing a single shade ```ts import { ThemeColours, themeColourConvertFont, IFontColourStyles, constants, } from '@ef-carbon/react-native-style'; const colours = new ThemeColours({ base: 'blue', constants, convert: themeColourConvertFont, shades: 'dark', // All shades will be dark }); ```
example
Specifing a multiple shades ```ts import { ThemeColours, themeColourConvertFont, IFontColourStyles, constants, } from '@ef-carbon/react-native-style'; const colours = new ThemeColours({ base: 'blue', constants, convert: themeColourConvertFont, shades: { accent: 'dark', disabled: 'lighter', // The rest will default to `normal` }, }); ```

Methods

convert

  • Converts the colour into the specified style mixin

    example
    import { IColour, IFontColourStyles } from '@ef-carbon/react-native-style';
function convert(colour: IColour): IColour<IFontColourStyles> {
  return {
    darkest: { color: colour.darkest },
    darker: { color: colour.darker },
    dark: { color: colour.dark },
    darkened: { color: colour.darkened },
    normal: { color: colour.normal },
    lightened: { color: colour.lightened },
    light: { color: colour.light },
    lighter: { color: colour.lighter },
    lightest: { color: colour.lightest },
  };
}
    see

    themeColourConvertFont

    see

    themeColourConvertBackground

    see

    themeColourConvertBorder

    Parameters

    Returns IColour<T>