Theme Switch

A flexible and accessible theme mode switcher component

Installation

npx shadcn@latest add @scrollxui/theme-switch

Usage

import { ThemeSwitch } from '@/components/ui/theme-switch';
import { Sun, Moon, Laptop } from 'lucide-react';

<ThemeSwitch
  modes={['light', 'dark', 'system']}
  icons={[
    <Sun key='sun-icon' size={16} />,
    <Moon key='moon-icon' size={16} />,
    <Laptop key='laptop-icon' size={16} />,
  ]}
  showInactiveIcons='all'
/>

Examples

Hide Inactive

Show Only Next

Three Mode Show Only Next

Three Mode with any Icon Click

Single Centred with Two modes

Single Centred wit Three modes

API Reference

ThemeSwitch

A flexible and accessible theme mode switcher component for Next.js projects using next-themes. Supports multiple modes (e.g., light, dark, system), custom icons, and various display options.

Props

Property	Type	Default	Description
`modes`	string[]	`["light", "dark", "system"]`	Available theme modes to cycle through.
`icons`	ReactNode[]	`[]`	Icons representing each mode (same order as modes).
`showActiveIconOnly`	boolean	`false`	Show only the active icon centered.
`showInactiveIcons`	"all" \| "none" \| "next"	`"all"`	How inactive icons are shown.
`className`	string	`—`	Optional class for styling the switch container.
`...props`	HTMLDivElement attributes	`—`	Additional props passed to the root div.

Behavior

Clicking the switch cycles to the next mode in the modes array.
Icons are displayed according to showActiveIconOnly and showInactiveIcons props.
Animated indicator highlights the current mode.
Accessible: Uses button-like semantics and focus styles.

Changelog

2025-06-02 `ThemeSwitch` - `icon-click` Variant

Added a new variant="icon-click" prop to the ThemeSwitch component that allows users to directly select a theme by clicking on its corresponding icon.

This provides a more intuitive UX compared to the default sequential toggle.

Use this variant when you want users to set the theme directly instead of cycling through options.

Add the variant prop as shown below:

ThemeSwitch.tsx

<ThemeSwitch
  variant='icon-click'
  modes={['light', 'dark', 'system']}
  icons={[
    <Sun key='sun-icon' size={16} />,
    <Moon key='moon-icon' size={16} />,
    <Laptop key='laptop-icon' size={16} />,
  ]}
  showInactiveIcons='all'
/>