Default Theme

The BaseTheme<TColors> 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.

Base Theme Interface

The BaseTheme interface acts as the contract for the theme object in FlexNative. It defines the structure of the data available through the ThemeContext, including colors, metrics, and configuration flags.

Definition

The interface uses a generic TColors to support custom color extensions while maintaining type safety.

export interface BaseTheme<TColors> {
  colors: BaseColors & TColors;
  scheme: ColorSchemeName;
  isDark: boolean;
  borders: Borders;
  spaces: Record<Spaces, number>;
  fontSize: Record<FontSize, number>;
}

Properties

Property	Type	Description
`colors`	`BaseColors & TColors`	The active color palette. This includes standard semantic colors (primary, success, etc.) merged with any custom colors defined in `TColors`.
`scheme`	`ColorSchemeName`	The current color scheme preference, usually `'light'` or `'dark'`.
`isDark`	`boolean`	A convenient boolean flag derived from the scheme. Returns `true` if the theme is dark.
`borders`	`Borders`	Contains configuration for border `width` and `radius`.
`spaces`	`Record<Spaces, number>`	A dictionary of spacing values (margins, paddings) keyed by size names (e.g., `sm`, `md`).
`fontSize`	`Record<FontSize, number>`	A dictionary of font size values keyed by size names.

BaseColors

Default theme colors. You can extend the BaseColors with your own color properties.

Name	Type	Required	Light Value	Dark Value
white	`ColorValue`	true	`#FFFFFF`	`#FFFFFF`
black	`ColorValue`	true	`#3d3d3d`	`#1f1f1f`
default	`ColorValue`	true	`#f5f5f5`	`#3D3D3D`
background	`ColorValue`	true	`#fafafa`	`#141414`
card	`ColorValue`	true	`#ffffff`	`#3d3d3d`
text	`ColorValue`	true	`#424242`	`#F5F5F5`
border	`ColorValue`	true	`#00000014`	`#42424226`
placeholder	`ColorValue`	true	`#666666`	`#0000001A`
info	`ColorValue`	true	`#0058e9`	`#0058e9`
success	`ColorValue`	true	`#37b400`	`#37b400`
warning	`ColorValue`	true	`#ffc000`	`#ffc000`
error	`ColorValue`	true	`#f31700`	`#f31700`
dark	`ColorValue`	true	`#3d3d3d`	`#3d3d3d`
secondary	`ColorValue`	true	`#666666`	`#C2C2C2`
light	`ColorValue`	true	`#ebebeb`	`#E0E0E0`
primary	`ColorValue`	true	`#ff6358`	`#EA5A51`

Spaces

Spacing values for layout, such as margins and paddings. This is a key part of the theme that helps maintain consistent spacing across components.

Name	Type	Value	Description
none	`number`	0	No spacing.
xxxs	`number`	2	Spacing of 2 units.
xxs	`number`	4	Spacing of 4 units.
xs	`number`	6	Spacing of 6 units.
sm	`number`	8	Spacing of 8 units.
md	`number`	12	Spacing of 12 units.
default	`number`	16	Spacing of 16 units.
lg	`number`	18	Spacing of 18 units.
xl	`number`	24	Spacing of 24 units.
xxl	`number`	32	Spacing of 32 units.
xxxl	`number`	36	Spacing of 36 units.
`number`	`number`		A custom numeric spacing value.

Name	Type	Value	Description
`xxs`	`number`	8	A small font size, 8 units.
`xs`	`number`	12	The default font size, 12 units.
`sm`	`number`	14	A medium font size, 14 units.
`md`	`number`	16	A large font size, 16 units.
`lg`	`number`	18	A large font size, 18 units.
`xl`	`number`	20	A large font size, 20 units.
`xxl`	`number`	24	A large font size, 24 units.
`number`	`number`		A custom numeric font size.

Borders

Border styles for components. This can include border widths, radius to ensure a consistent look and feel across your UI components.

BorderWidth

Represents the possible border width values.

Name	Type	Value	Description
`none`	`number`	0	No border width (0).
`hairline`	`number`		A hairline border width, typically the thinnest possible line on the device. See StyleSheet.hairlineWidth.
`thin`	`number`	1	A thin border width, 1 unit.
`base`	`number`	2	A base border width, 2 units.
`thick`	`number`	3	A thick border width, 3 unit.
`number`	`number`		A custom numeric border width.

BorderRadius

Represents the possible border radius values.

Name	Type	Value	Description
`none`	`number`	0	No border radius (0).
`small`	`number`	2	A small border radius (2 units).
`medium`	`number`	4	A medium border radius (4 units).
`large`	`number`	6	A large border radius (6 units).
`full`	`number`	99999	A fully rounded border radius (99999 units).
`number`	`number`		A custom numeric border radius.

Usage Example

When creating a custom theme, you conform to this interface. Typically, you start with the default theme and override specific properties.

import { BaseTheme, defaultTheme } from '@flexnative/theme-context';

// 1. Define your custom colors type
interface MyCustomColors {
  brand: string;
  accent: string;
}

// 2. Create the theme object
const myAppTheme: BaseTheme<MyCustomColors> = {
  ...defaultTheme(),
  colors: {
    ...defaultTheme().colors,
    brand: '#5E72E4',
    accent: '#11CDEF',
  },
  // Overriding standard metrics
  borders: {
    width: { ...defaultTheme().borders.width, thin: 1 },
    radius: { ...defaultTheme().borders.radius, small: 4 }
  }
};

Base Theme Interface​

Definition​

Properties​

BaseColors​

Spaces​

FontSize​

Borders​

BorderWidth​

BorderRadius​

Usage Example​