Navigation: [/sitemap.md](/sitemap.md)
---
type: doc
title: Theme Toggle
description: A two-state theme toggle that switches immediately between light and dark mode.
sidebar:
badge:
text: ⋅
variant: success
---
```astro live props={{ name: 'theme-toggle' }}
---
import { ThemeToggle } from "@/components/ui/theme-toggle"
---
```
## Installation
```bash
npx shadcn@latest add @fulldev/theme-toggle
```
## Setup
The theme toggle requires `ThemeProvider` in your document's `` to prevent flash of unstyled content (FOUC) and persist theme preferences.
Add the provider to your layout's head section:
```astro
---
import { ThemeProvider } from "@/components/ui/theme-toggle"
---
```
`ThemeProvider` contains the inline bootstrap script from the shadcn Astro dark
mode docs and should render before page content to avoid a flash of unstyled
theme state.
## Usage
```ts
import { ThemeToggle } from "@/components/ui/theme-toggle"
```
```astro
```
## Notes
- `ThemeToggle` is a two-state light and dark switch.
- `ThemeProvider` reads the saved preference first and falls back to the
system color scheme on first load.
- If you need a richer theme picker, build that separately on top of the same
`.dark` class convention.
## API Reference
See the [GitHub source code](https://github.com/fulldotdev/ui/tree/main/src/components/ui/theme-toggle) for more information on props.