Theming

Theme toggle

The theme switch every consumer asks for.

Client componentSource

Import

import { ThemeToggle } from '@the_viveksingh/vivek-ui'

A toggle button

Reads and writes the ThemeProvider context, and takes IconButton props, so it matches whatever else sits in your header.

<ThemeToggle />
<ThemeToggle variant="outline" />
<ThemeToggle variant="solid" size="lg" round />

Toggle or cycle

cycle includes system, which matters if you want people to be able to hand control back to the OS.

mode="toggle" flips between light and dark

mode="cycle" walks light, dark, system

<ThemeToggle mode="toggle" />
<ThemeToggle mode="cycle" />

Props

Generated from the package's own type declarations, so this table cannot drift from the code.

Props for ThemeToggle
Prop	Type	Default	Description
`mode`	`ThemeToggleMode`	—	—
`labels`	`Partial<Record<Theme, string>>`	—	Override the announced label for the theme the press would move TO.
`'aria-label'`	`string`	—	Overrides the derived label entirely.

Rendering

Client component

ThemeToggle declares 'use client' because it needs state, effects or event handlers. Importing it into a Server Component creates a client boundary at this component — everything above it stays on the server.