Version: 4.0.0-rc.8

Theme object

export interface Theme {
  colors: Colors;
  mode: 'light' | 'dark';
  spacing: {
    xs: number;
    sm: number;
    md: number;
    lg: number;
    xl: number;
  };
}

Theme Properties

Colors

By default, the theme object looks like this. You can add whatever values you want to the theme, and they will be merged with the default. By default the platform colors aren't used anywhere. These native colors are added for your convenience.

interface Colors {
  primary: string;
  secondary: string;
  background: string;
  white: string;
  black: string;
  grey0: string;
  grey1: string;
  grey2: string;
  grey3: string;
  grey4: string;
  grey5: string;
  greyOutline: string;
  searchBg: string;
  success: string;
  warning: string;
  error: string;
  disabled: string;
  divider: string;
  platform: {
    ios: PlatformColors;
    android: PlatformColors;
    web: PlatformColors;
    default: PlatformColors;
  };
}

Default Light Colors

#2089dc

primary

#ca71eb

secondary

#ffffff

background

#ffffff

white

#242424

black

#393e42

grey0

#43484d

grey1

#5e6977

grey2

#86939e

grey3

#bdc6cf

grey4

#e1e8ee

grey5

#bbb

greyOutline

#303337

searchBg

#52c41a

success

#ff190c

error

#faad14

warning

hsl(208, 8%, 90%)

disabled

Default Dark Colors

#439ce0