# Theme Toggle

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

# Theme Toggle

A simple button to toggle between light and dark mode.

## 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

<ThemeToggle />

## When to Use

-   Dark/light mode toggle in navigation bars or headers
-   Simple theme switching without color scheme selection
-   Settings rows where users toggle between two appearance modes
-   Compact UI areas where a single icon button is preferred over a full switcher

Preview Code

Default

Click to toggle theme

Preview Code

In a Navbar

My App

About Docs

Preview Code

With Label

Dark Mode

Toggle light and dark theme

## API Reference

### ThemeToggle

Prop

Type

Default

Description

AdditionalAttributes

Dictionary<string, object>?

null

Additional HTML attributes. Self-contained button that toggles between light and dark mode using ThemeService. Displays a sun or moon icon based on the current mode.

## Related Components

-   [ThemeSwitcher](/components/theme-switcher) — Full theme control with color scheme swatches and mode toggle
-   [Switch](/components/switch) — Toggle switch for boolean settings
-   [Button](/components/button) — Base button component used internally by ThemeToggle