---
title: Theme object
sidebar_position: 1
---

import { Palette } from './Color';

```tsx
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.

```tsx
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

<Palette />

#### Default Dark Colors

<Palette dark />

### Spacing
