Theme Toggle

A physical switch with a dotted grip. Click and the knob slides across a recessed track.

Installation

terminal

pnpm dlx layro-cli add @iurvish/theme-toggle

npx layro-cli add @iurvish/theme-toggle

npx layro-cli add @iurvish/theme-toggle

bunx layro-cli add @iurvish/theme-toggle

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client";

import { type ChangeEvent, useState } from "react";

export default function ThemeToggle() {
  const [checked, setChecked] = useState(false);

  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
    setChecked(event.target.checked);
  };

  const wrapperClassName = checked
    ? "bg-transparent text-[#f8fafc]"
    : "bg-transparent text-[#0f172a]";