Skip to main content
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
primary
#aa49eb
secondary
#080808
background
#080808
white
#f2f2f2
black
#393e42
grey5
#43484d
grey4
#5e6977
grey3
#86939e
grey2
#bdc6cf
grey1
#e1e8ee
grey0
#bbb
greyOutline
#303337
searchBg
#439946
success
#bf2c24
error
#cfbe27
warning
hsl(208, 8%, 90%)
disabled

Spacing