---
title: Theme Switcher
description: Select the system, light, or dark display theme
type: reference
summary: Use ThemeSwitcher in custom navigation, settings, and footer UI.
url: /docs/components/theme-switcher
source: apps/template/content/docs/components/theme-switcher.mdx
related:
  - /docs/components
---

# Theme Switcher

import { ThemeSwitcher } from "@vercel/geistdocs/components/theme-switcher";

<div className="not-prose my-6 flex min-h-32 items-center justify-center rounded-lg border border-gray-400 bg-background-100 p-6">
  <ThemeSwitcher />
</div>

```tsx
import { ThemeSwitcher } from "@vercel/geistdocs/components/theme-switcher";

export function DisplaySettings() {
  return <ThemeSwitcher />;
}
```

Use the compact variant where space is limited:

```tsx
<ThemeSwitcher small />
```