Theme toggle

Fixed top right. Sun and moon slide on a track; the choice persists in localStorage.

Install

npx raster add theme-toggle

Markup

<button class="rs-theme-toggle" aria-label="Toggle color scheme"><span class="rs-theme-track"><svg class="rs-theme-moon" viewBox="0 0 16 16" fill="none"><path d="M13.5 9.5A5.5 5.5 0 0 1 6.5 2.5a5.5 5.5 0 1 0 7 7Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/></svg><svg class="rs-theme-sun" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="3.25" stroke="currentColor" stroke-width="1.5"/><path d="M8 1.5v2M8 12.5v2M1.5 8h2M12.5 8h2M3.4 3.4l1.4 1.4M11.2 11.2l1.4 1.4M12.6 3.4l-1.4 1.4M4.8 11.2l-1.4 1.4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg></span></button>

React

import { ThemeToggle } from "@/components/raster/theme-toggle";

<ThemeToggle onThemeChange={(dark) => console.log(dark)} />

Classes

.rs-theme-toggle.rs-theme-track.rs-theme-track-dark.rs-theme-sun.rs-theme-moon