Theme API

For concepts and the full token table, see the Theming guide.

PickersProvider

function PickersProvider(props: {
  children: React.ReactNode;
  colorScheme?: 'auto' | 'light' | 'dark'; // default 'auto'
  theme?: DeepPartial<PickerTheme>;        // merged onto lightTheme (and onto darkTheme if `darkTheme` is omitted)
  darkTheme?: DeepPartial<PickerTheme>;    // merged onto darkTheme
  platform?: PlatformOSType;               // default Platform.OS
  design?: 'auto' | 'ios' | 'material' | 'web'; // default 'auto'
}): JSX.Element;

Optional. Without a provider, components use lightTheme / darkTheme following useColorScheme().

usePickerTheme

function usePickerTheme(override?: DeepPartial<PickerTheme>): PickerTheme;

Returns the active theme: the design's tokens on the built-in light or dark theme, then the provider's overrides, then override. The design comes from override.design, the provider's design, or the platform. theme.design tells your own components which design to match.

createTheme

function createTheme(overrides: DeepPartial<PickerTheme>, base?: PickerTheme): PickerTheme;

Builds a complete theme. Without base, starts from darkTheme if overrides.dark is true, else lightTheme.

mergeTheme

function mergeTheme<T>(base: T, override?: DeepPartial<T>): T;

Deep merge without mutating. Plain objects merge recursively; arrays, functions and primitives in override replace the base value.

lightTheme / darkTheme

const lightTheme: PickerTheme;
const darkTheme: PickerTheme;

The built-in themes. See default values.

Designs

const DESIGN: { auto: 'auto'; ios: 'ios'; material: 'material'; web: 'web' };
const DESIGN_TOKENS: Record<Design, DeepPartial<PickerTheme>>; // what each design changes on the light or dark theme
function resolveDesign(preference: DesignPreference, platform: PlatformOSType): Design;

resolveDesign('auto', platform) gives 'ios' on iOS, 'web' on the web and 'material' everywhere else. See designs.

textStyle

function textStyle(
  theme: PickerTheme,
  size: 'xs' | 'sm' | 'md' | 'lg' | 'xl',
  weight?: 'regular' | 'medium' | 'bold', // default 'regular'
): TextStyle; // { fontSize, fontWeight, fontFamily, color: theme.colors.text }

medium and bold use typography.fontFamilyMedium, falling back to fontFamily.

Types

type DeepPartial<T> = { [K in keyof T]?: T[K] extends object ? (T[K] extends Function ? T[K] : DeepPartial<T[K]>) : T[K] };
interface ThemableProps { theme?: DeepPartial<PickerTheme>; design?: Design }
type DesignPreference = 'auto' | 'ios' | 'material' | 'web';
type Design = 'ios' | 'material' | 'web';