Theme Toggle

Rust UI Icons - ChevronLeftRust UI Icons - ChevronRight

A sleek theme toggle component that smoothly transitions between light and dark modes with animated sun and moon icons.

buttonanimation
use leptos::prelude::*;

use crate::components::ui::theme_toggle::ThemeToggle;

#[component]
pub fn DemoThemeToggle() -> impl IntoView {
    view! { <ThemeToggle /> }
}

Installation

Add the ThemeToggle component to your project.

Usage

use crate::components::theme_toggle::ThemeToggle;

<ThemeToggle />

Features

  • Smooth CSS animations between light and dark mode
  • Responsive sun/moon icons with scale and rotation transitions
  • Automatic theme detection from system preferences
  • Persistent theme storage in localStorage
  • Reactive state management with Leptos signals

How it works

The component uses CSS transitions to animate between two states:

  • Light mode: Sun icon visible, moon icon hidden
  • Dark mode: Moon icon visible (with switch class), sun icon hidden

The animation includes opacity, scale, and rotation effects for a smooth visual transition.

Rust UI Icons - ChevronLeftTextareaToastRust UI Icons - ChevronRight