---
title: UI-Theme overview
description: UI-Theme adds light mode, dark mode, system mode, and named color palettes to your app.
url: https://uitheme.thally.app/
---

# UI-Theme overview

UI-Theme adds light mode, dark mode, system mode, and named color palettes to your app.

UI-Theme adds light mode, dark mode, system mode, and named color palettes to your app. It also adds animated theme changes on the web and on native devices.

UI-Theme has three packages. Each package targets one platform family.

| Platform                       | Package       | Status                     |
| ------------------------------ | ------------- | -------------------------- |
| React on the web               | `uitheme-web` | Stable. Version 1.1.0      |
| Vue 3 and Nuxt 4               | `uitheme-vue` | Alpha. Version 0.1.0-alpha |
| React Native and Expo (native) | `uitheme-rn`  | Alpha. Version 0.1.0-alpha |

## What UI-Theme does

- It stores the user choice for appearance (`light`, `dark`, or `system`).
- It stores the user choice for a named color palette. The palette is separate from the appearance.
- It restores both choices when the app starts.
- It plays an animated change when the user switches. The web packages use the View Transitions API. The native package uses Reanimated and Skia.
- It respects the reduced motion setting of the user.

## Setup guides

| Guide                                                 | Package       | Use it for                                                     |
| ----------------------------------------------------- | ------------- | -------------------------------------------------------------- |
| [Installation](/installation)                     | All           | Choose a package and install it                                |
| [Next.js](/setup/nextjs)                          | `uitheme-web` | Next.js App Router and Pages Router                            |
| [Vite and React](/setup/vite-react)               | `uitheme-web` | React single-page apps built with Vite                         |
| [TanStack Start](/setup/tanstack-start)           | `uitheme-web` | TanStack Start apps, with cookie-based server rendering        |
| [Vue](/setup/vue)                                 | `uitheme-vue` | Vue 3 apps built with Vite                                     |
| [Nuxt](/setup/nuxt)                               | `uitheme-vue` | Nuxt 4 apps with server rendering                              |
| [React Native and Expo](/setup/react-native-expo) | `uitheme-rn`  | Expo and React Native apps with `StyleSheet` styles            |
| [NativeWind](/setup/nativewind)                   | `uitheme-rn`  | Expo apps that use NativeWind 5 classes                        |
| [Uniwind](/setup/uniwind)                         | `uitheme-rn`  | Expo apps that use Uniwind classes                             |
| [Theme CSS](/setup/theme-css)                     | Web packages  | CSS variables and Tailwind CSS v4 palettes                     |
| [Transitions](/setup/transitions)                 | All           | Enable animated theme changes on the web and on native devices |
| [Troubleshooting](/troubleshooting)               | All           | Fix common setup problems                                      |

## How to read these guides

Each setup guide uses the same order:

1. Requirements
2. Install
3. Configure
4. Add theme CSS or palettes
5. Add a control
6. Verify it works
7. Next steps

Start with the [installation page](/installation) if you do not know which package you need.