# Appearance

Choose light or dark mode, text size and a colour theme with a miniature phone that updates live. Picking Dark lowers night over the preview from the top, and Light lifts it away again.

> Screen template — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add pro/core-appearance
```

## Import

```tsx
import { AppearanceScreen } from "@/screens/core/appearance";
```

## Registry dependencies

- `icon` — /components/icon
- `segmented-control` — /components/segmented-control
- `slider` — /components/slider
- `switch` — /components/switch
- `text` — /components/text

## Native packages

- react-native-reanimated@*
- react-native-svg@*
- react-native-safe-area-context@*

## Icons rendered

- `search` — /icons.html?i=search
- `check` — /icons.html?i=check
- `edit` — /icons.html?i=edit
- `chevron-left` — /icons.html?i=chevron-left
- `moon` — /icons.html?i=moon
- `grid` — /icons.html?i=grid

Source: https://lumioui.com/screens/core-appearance