Pull Switch

Interactive pull-cord switch to toggle light and dark mode

Documentation

pnpm dlx @t7blocks/cli add pull-switch

Usage

import PullSwitch from "@/components/T7blocks/PullSwitch";

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className="antialiased">
        {children}
        <div className="fixed top-0 right-12">
          <PullSwitch bgLight="#ffffff" bgDark="#000000" />
        </div>
      </body>
    </html>
  );
}

Properties

Parameter	Type	Default	Description
width	number	100	Width of the canvas in pixels
height	number	100	Height of the canvas in pixels
className	string	""	Additional CSS classes to apply to the component
buttonlightColor	string	"#00bcd4"	Color of the button in light mode
buttondarkColor	string	"#ff5900ff"	Color of the button in dark mode
bgLight	string	"#f5f5f5"	Background color of the page in light mode
bgDark	string	"#1a1a1a"	Background color of the page in dark mode