# Theme Switcher

Source: https://lumeo.nativ.sh/components/theme-switcher

# Theme Switcher

A complete theme control with color scheme swatches and light/dark/system mode toggle.

## Installation

.NET CLI PackageReference Lumeo CLI

dotnet add package Lumeo

One-time app setup (`AddLumeo()`, CSS & JS) is covered in the [installation guide](docs/introduction).

## Usage

@using Lumeo

<ThemeSwitcher />

## When to Use

-   Theme selection UI in settings panels or preference pages
-   Providing users with color scheme choices alongside light/dark mode
-   Customization panels where users pick their preferred visual theme
-   Applications that support multiple color schemes beyond just light and dark

Preview Code

Default

Color

Mode

Preview Code

In a Card

### Appearance

Customize the look and feel of your application.

Color

Mode

Preview Code

Settings Row

Appearance

Choose your color scheme and mode

Color

Mode

## API Reference

### ThemeSwitcher

Prop

Type

Default

Description

Class

string?

null

Additional CSS classes for the container.

AdditionalAttributes

Dictionary<string, object>?

null

Additional HTML attributes. Self-contained component that uses ThemeService to display color scheme swatches and light/dark/system mode toggle.

## Related Components

-   [ThemeToggle](/components/theme-toggle) — Simple light/dark mode toggle button
-   [Select](/components/select) — Dropdown selection for theme options in custom layouts
-   [RadioGroup](/components/radio-group) — Radio buttons for exclusive theme or mode selection