# ThemeToggle
> Cherry ThemeToggle component - a pill-shaped sun and moon switch for light and dark mode.
Source: https://cherry.al/code/theme-toggle
> For the complete documentation index, see [llms.txt](https://cherry.al/llms.txt).
# ThemeToggle
The ThemeToggle is a pill-shaped switch for light and dark mode. It shows a sun and a moon side by side, with a soft circular highlight that slides over the active icon when the theme changes.
ThemeToggle works with the providers described on the [Dark Mode](/code/dark-mode) page.
It works out of the box inside `CherryThemeProvider` or `ClientThemeProvider`: clicking it flips the current theme, persists the choice (to the `theme` cookie and `localStorage` under `ClientThemeProvider`, to `localStorage` under `CherryThemeProvider`), and keeps the `dark` class on the `` element in sync. No wiring is needed. See [Dark Mode](/code/dark-mode) for the flash-free SSR setup.
Keep in mind that the `