Theme Toggle

Installation

npx shadcn@latest add @fulldev/theme-toggle

Setup

The theme toggle requires ThemeProvider in your document’s <head> to prevent flash of unstyled content (FOUC) and persist theme preferences.

Add the provider to your layout’s head section:

---
import { ThemeProvider } from "@/components/ui/theme-toggle"
---

<html>
  <head>
    <ThemeProvider />
    <!-- other head elements -->
  </head>
  <body>
    <!-- your content -->
  </body>
</html>

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

import { ThemeToggle } from "@/components/ui/theme-toggle"

<ThemeToggle />

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 for more information on props.

Sidebar