Default Theme

The theme object is where you define your application's color palette, type scale, borders, border radius values, and more.

info

First of all you need to install @flexnative/theme-context. Fallow instructions here on how to install and how to use @flexnative/theme-context.

Properties

BaseTheme<TColors>

Interface representing the base theme structure. TColors - @template for Custom colors that extend the base colors.

Name	Type	Required	Default Value	Description
colors	BaseColors & TColors	true	BaseColors	Default theme colors. You can add whatever values you want to the theme, and they will be merged with the default.
scheme	ColorSchemeName	false	Device color scheme.	Theme color scheme. ColorSchemeName
borderWidth	Record<BorderWidth, number>	true	BorderWidth	Border width used by components.
borderRadius	Record<BorderRadius, number>	true	BorderRadius	Border radius used by components.
fontSize	Record<FontSize, number>	true	FontSize	Font size used by components.
metrics	object	true	metrics	Base constants values used by components.

BaseColors

Default theme colors. You can add whatever values you want to the theme, and they will be merged with the default.

Color

Represents the possible color options for a component. The available color options are: 'default' | 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error' | 'dark' | 'light' | ColorValue

Name	Type	Required	Light Value	Dark Value
white	ColorValue	true	#FFFFFF	#FFFFFF
black	ColorValue	true	#424242	#424242
background	ColorValue	true	#f8f8f8	#000000
default	ColorValue	true	#f5f5f5	#404040
card	ColorValue	true	#ffffff	#232323
text	ColorValue	true	#424242	#ffffff
border	ColorValue	true	#42424226	#ffffff1A
placeholder	ColorValue	true	#0000001A	#FFFFFF1A
info	ColorValue	true	#3e80ed	#3e80ed
success	ColorValue	true	#5ec232	#5ec232
warning	ColorValue	true	#ffc107	#ffc107
error	ColorValue	true	#d51923	#d51923
dark	ColorValue	true	#424242	#424242
secondary	ColorValue	true	#666666	#5C5C5C
light	ColorValue	true	#ebebeb	#ebebeb
primary	ColorValue	true	#ff6358	#ff6358
overlay	ColorValue	true	#00000021	#FFFFFF21

BorderWidth

Border width used by components. One of 'none' | 'hairline' | 'thin' | 'base' | 'thick' | number

Name	Type	Value
none	number	0
hairline	number	This is defined as the width of a thin line on the platform. It can be used as the thickness of a border or division between two elements. StyleSheet.hairlineWidth
thin	number	1
base	number	2
thick	number	3

BorderRadius

Border radius used by components. One of 'none' | 'small' | 'medium' | 'large' | 'full' | number

Name	Type	Value
none	number	0
small	number	2
medium	number	4
large	number	6
full	number	99999

FontSize

Font size used by components. One of 'small' | 'default' | 'medium' | 'large' | number

Name	Type	Value
small	number	metrics.baseSize * 0.75
default	number	metrics.baseSize
medium	number	metrics.baseSize * 1.25
large	number	metrics.baseSize * 1.5

metrics

Base constants values used by components.

Name	Type	Value	Description
baseSize	number	16	Base size used in fontSize.
disabledOpacity	number	0.4	Opacity style property value for disabled components.
ghostOpacity	string	40	Color opacity for components with 'ghost' appearance.
verticalMultiplier	number	0.6	A constant multiplayer for components vertical padding.
horizontalMultiplier	number	1	A constant multiplayer for components horizontal padding.

Sizes

Represents the possible sizes for a component. One of 'small' | 'medium' | 'large' | number

note

Sizes are used by components to define their size. In different components, the size values may have different values.